Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ffe-form: textarea: Text too close to top of input field #38

Closed
chlunde opened this issue Mar 1, 2018 · 1 comment
Closed

ffe-form: textarea: Text too close to top of input field #38

chlunde opened this issue Mar 1, 2018 · 1 comment
Assignees
@wkillerud
Labels
👶 good first issue A new contributor? This issue is for you! 🐛 bug Bugs, errors and stuff that's just plain wrong

Comments

@chlunde
Copy link
Contributor

chlunde commented Mar 1, 2018

Which package is this issue related to?

ffe-form

├── @sb1/ffe-core@12.0.0
├─┬ @sb1/ffe-form@9.0.0
│ ├── UNMET OPTIONAL DEPENDENCY @sb1/ffe-buttons@^5.2.3
│ └── UNMET OPTIONAL DEPENDENCY @sb1/ffe-core@^11.0.3
├── @sb1/ffe-webfonts@2.0.0
└── less@3.0.1 extraneous

Describe your issue (screenshots welcome!)

The text inside a textarea seems too close to top border:
image

What is the expected behavior?

Similar look to normal input field

What is the actual behavior?

No top padding:
image

Steps to reproduce

npm init
npm install --save @sb1/ffe-core @sb1/ffe-form @sb1/ffe-webfonts
./node_modules/.bin/lessc --js style.less > style.css
@import './node_modules/@sb1/ffe-core/less/ffe.less';
@import './node_modules/@sb1/ffe-form/less/form.less';
@import (inline) './node_modules/@sb1/ffe-webfonts/fonts.css';
<!DOCTYPE HTML>
<html>
    <head><link rel="stylesheet" href="style.css"></head>
    <body>
    <div class="ffe-input-group">
        <label for="textarea-id" class="ffe-form-label">
            Textarea default
        </label>
        <textarea id="textarea-id" class="ffe-textarea" maxlength="150" aria-invalid="false" rows="5">Innhold i textarea.</textarea>
    </div>
    </body>
</html>
@wkillerud wkillerud added the 🐛 bug Bugs, errors and stuff that's just plain wrong label Mar 1, 2018
@wkillerud
Copy link
Contributor

Thanks for the detailed bug report!

@wkillerud wkillerud added the 👶 good first issue A new contributor? This issue is for you! label Mar 1, 2018
@wkillerud wkillerud self-assigned this Mar 1, 2018
wkillerud added a commit that referenced this issue Mar 1, 2018
@wkillerud
docs(ffe-form-react): Add content to TextArea example
8bd5d6b 
A TextArea usually spans more than one row, so have the example reflect
that. Add some default content for good measure. This makes it easy to
spot the issue described in #38.
wkillerud added a commit that referenced this issue Mar 1, 2018
@wkillerud
fix(ffe-form): Add vertical padding to textarea
4fe4ba8 
Fixes #38

This commit adds 13px padding to `ffe-textarea` so text no longer hugs
the top and bottom borders.
@wkillerud wkillerud mentioned this issue Mar 1, 2018
Merged
kwltrs pushed a commit that referenced this issue Mar 7, 2018
@wkillerud
docs(ffe-form-react): Add content to TextArea example
0c2c7cf 
A TextArea usually spans more than one row, so have the example reflect
that. Add some default content for good measure. This makes it easy to
spot the issue described in #38.
kwltrs pushed a commit that referenced this issue Mar 7, 2018
@wkillerud
fix(ffe-form): Add vertical padding to textarea
d3ffe3f 
Fixes #38

This commit adds 13px padding to `ffe-textarea` so text no longer hugs
the top and bottom borders.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@wkillerud wkillerud

Labels
👶 good first issue A new contributor? This issue is for you! 🐛 bug Bugs, errors and stuff that's just plain wrong
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@chlunde @wkillerud