I have the following layout:
<article class='pb5 bg-near-white'>
<header class='tc ph4-ns pt4 pt5-ns'>
<h1 class='tc blue'>Let's get started posting your question</h1>
</header>
<div class=''>
<div class='pa4 bg-white measure db center f5 f4-ns lh-copy'>
<form class='center mt3 mb4 justify-around'>
<fieldset class='ba b--transparent'>
<div class='mt4'>
<label class='db mb2 b'>Title</label>
<input
class='noresize ph3 pv3 input-reset ba b--black-10 w-100'
placeholder='title'
onChange={handleTitleChange}
></input>
</div>
<div class='mv4'>
<label class='db mb2 b'>Content</label>
<textarea
class='noresize ph3 pv3 input-reset ba b--black-10 w-100'
placeholder='Content Here!'
cols='50'
rows='5'
onChange={handleBodyChange}
></textarea>
</div>
<a
class='tc f6 fw6 b link dim br2 ph3 pv3 mb2 dib white bg-blue w-100'
onClick={handlePostQuestion}
>
Submit
</a>
</fieldset>
</form>
</div>
</div>
</article>
which uses tachyons inline css in order to create a basic form layout. However, I end up with the following ui:
The padding seems not to be applying to the title input
field, but it does apply to the textarea
field. When I change the input
tag to a textarea
tag, the padding applies but the problem is this seems to be a temporary fix. Am I doing something wrong?
On the input element, adding the class border-box
or setting type="text"
will make it behave as you expect.
Reason being, Tachyons does not give all input elements "border-box" box sizing; explained in more detail in the docs. Also visible in the source code.