Input Element is not Shown Inline

Question

We have an input element besides two buttons inside a div, which is inside of a td. I don't quite understand, how to put all children of the div in one line, when its parent (the td) has a width.

Here is an example.

I could set the width of the input element to 65% e.g., but this is a hack only.

Does someone know, why the input elements takes all the width if the table cell has a width-attribute? I did not find any hint in the spec.

How can I set the input element (display) inline nonetheless? display: flex for the div (like it has been suggested for this)?

Survival Kit

HTML

<p>Input takes all width?</p>
<table>
    <tbody>
        <tr>
            <td width="163px">
                <div>
                    <input type="text" name="some-field" />
                    <button class="symbol" type="button"></button>
                    <button class="symbol" type="button"></button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

button.symbol {
    border-width: 0;
    background: white;
    display: inline;
}
button.symbol::before {
    content: '\0394';
}
input {
    display: inline;
}

input has a default width so you will simply have line break if the width you define is not enough for the input + the content — Temani Afif, Jun 24 '19 at 11:28
https://stackoverflow.com/questions/4622086/widthauto-for-input-fields — Paulie_D, Jun 24 '19 at 11:28
https://stackoverflow.com/questions/42421361/input-button-elements-not-shrinking-in-a-flex-container — Paulie_D, Jun 24 '19 at 11:29
One [more link](https://hackernoon.com/the-decline-of-stack-overflow-7cb69faa575d). — BairDev, Jun 24 '19 at 12:09

score 0 · Answer 1 · edited Jun 25 '19 at 12:44

Does someone know, why the input elements takes all the width if the table cell has a width-attribute?

It is not so. input elements of type="text" have a default size of 20, which can result in different widths (depending on font, font-size etc.).

In your case, you have given 163px width to your td. If you increase the width to say 250px, all the elements will fit in a row.

For eg.:

button.symbol {
  border-width: 0;
  background: white;
  display: inline;
}
button.symbol::before {
  content: '\0394';
}
input {
  display: inline;
}

<p>Input takes all width?</p>
<table>
  <tbody>
    <tr>
      <td width="250px">
        <div>
          <input type="text" name="some-field" />
          <button class="symbol" type="button"></button>
          <button class="symbol" type="button"></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<p>No Width</p>
<table>
  <tbody>
    <tr>
      <td>
        <div>
          <input type="text" name="some-field" />
          <button class="symbol" type="button"></button>
          <button class="symbol" type="button"></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Hope it helps!

How much is this _default width_ of an input element? [Here](https://stackoverflow.com/a/11846241/2092322) we have a hint: it apparently depends on the browser. — BairDev, Jun 25 '19 at 08:05
@BairDev as it turns out size and width are two different things, Check this: https://stackoverflow.com/questions/1480588/input-size-vs-width — AdityaSrivast, Jun 25 '19 at 11:52
Yeah and the default `size` [seems to be 20](https://html.spec.whatwg.org/#attr-input-size), which can result in various _widths_ (depends on font and font-size etc.), but we can see a minimum here. — BairDev, Jun 25 '19 at 12:18

score 0 · Answer 2 · answered Jun 24 '19 at 11:34

Well, I would say (and I am no expert so don't take my word for granted) that it sets the elements next to each other (in your jsfiddle second example), because you never specified a width. So it will align all of them next to each other, since it has no boundaries to keep in 'mind'. However when you set a width for the td it has to keep the boundaries of your x px in 'mind'. The default width of an input will be set if you do not specify it. Now, considering your button has a default width aswell. This means it tries to be inline or inline-block, but 'fails', since it still has boundaries. Therefore it DOES work when you set a certain percentage, because it will take x percentage relative to its parent. So either increase the width of your td or set x px for your buttons and input fields. If this is not an option, you could opt to go for percentages.

But again, I am no guru on this topic, so don't take my word for it. This was my 2 cents.

Input Element is not Shown Inline

Survival Kit

HTML

CSS

2 Answers2