0

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:

enter image description here

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?

Community
  • 1
  • 1
mlz7
  • 2,067
  • 3
  • 27
  • 51
  • Try adding !important to the input text padding's css, and press Ctrl + R to hard refresh your browser so that it reloads from the beginning. – Rohan Rao Jan 05 '20 at 06:37

1 Answers1

1

On the input element, adding the class border-box or setting type="text" will make it behave as you expect.

enter image description here

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.