0

My problem is similar to this question, but different.

I have a table cell of an unknown width. This cell contains an input and a span. The span should be as wide as its contents needs and the input should take all the remaining space.

I've created a trivial plunk for this seemingly trivial question. The random text should be on the very right and the input should grow or shrink as needed to fill the yellow td.

Community
  • 1
  • 1
maaartinus
  • 44,714
  • 32
  • 161
  • 320

2 Answers2

1

Try splitting the yellow <td> into its own table (or other elements using display: table-cell, etc).

Set the width of the cell containing the input to 100%, and set the max-width of the table to 100%.

That will cause the table inside the cell to re-flow when the text changes.

Basic demo: http://plnkr.co/edit/ao4at9RHg8VgRrgtmTqu?p=preview

willoller
  • 7,106
  • 1
  • 35
  • 63
  • This works nicely... I see now I forgot that there are whitespaces (and whatever) in the real text, but `white-space: nowrap;` solves this complication. – maaartinus Jul 19 '14 at 00:35
1

This can be achieved with Flexbox.

HTML:

<td class="foo">
    <input class="foo__input">
    <span>dsflkwej</span>                
</td>

CSS:

.foo {
    display: flex
}
.foo__input {
    flex-grow: 1
}

Live demo: http://jsfiddle.net/simevidas/MhR77/

(Use Autoprefixer to add vendor prefixes for Flexbox properties.)

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
  • What browser does it work in out of the box? I have Chromium 25 and FF 20 and it doesn't work. I've added `-moz-` and `-webkit-` manually and nothing has changed. – maaartinus Jul 19 '14 at 00:03
  • @maaartinus Firefox is currently at version 30. Are you sure that you have version 20? *** In order to use CSS Flexbox today, you have to provide vendor prefixes. I recommend Autoprefixer. You can either use it as part of your CSS build process (in conjunction to e.g. a minifier, linter, …) or you can copy pasted the full code via this [online tool](http://jsfiddle.net/simevidas/udyTs/show/light/). – Šime Vidas Jul 19 '14 at 13:49
  • Yes, I'm using FF version 20. And that's most probably because of Ubuntu 10.04. And that's because I haven't found any single real improvement in any newer Ubuntu. Anyway, I'll have look at the Autoprefixer. – maaartinus Jul 19 '14 at 14:31