CODEWITHSUNDEEP
htmlcss
Viktor Carlson
Viktor Carlson

Reputation: 1008

CSS - dynamic length text input field and submit button in one row

I have:

<div>
    <input id="input" type="text" />
    <button id="submit">submit</button>
</div>

which gives me this enter image description here

If I expand the main panel by dragging it with the mouse cursor the width the new space is empty:

enter image description here

I want that the <input type="text" /> fills the whole horizontal new space but that the submit button remains in the same row.

I tired to use <input style="width:100%" type="text"/> but then it fills the whole row and the submit button appears in the next row:

enter image description here

I also tried a table as mentioned in that thread: Liquid textfield width

The result was that it works "a little bit" the submit button overlaps the input text and a certain space on the right always remains empty: enter image description here

Can somebody help me with an code idea for fill the whole space except the (static) size of the submit button.

Thanks!

Upvotes: 2

Views: 5360

Answers (3)

cimmanon
cimmanon

Reputation: 68319

The "table" method you linked to will work, but you're missing one crucial property on your input elements: box-sizing.

http://cssdeck.com/labs/sbffl3l2

<div class="foo">
  <div class="bar"><input type="text"></div>
  <div class="bar"><input type="submit"></div>
</div>

.foo {
  display: table;
  width: 100%;
}

.bar {
  display: table-cell;
}

.bar:first-child, input[type="text"] {
  width: 100%;
}

input {
  box-sizing: border-box; /* this is the key */
}

Prefixes may be required: http://caniuse.com/#feat=css3-boxsizing

Upvotes: 2

tornados
tornados

Reputation: 86

Why not give width of 70% to input and 20% to button?

Upvotes: 0

xsearingheaven
xsearingheaven

Reputation: 311

I believe you can do this:

<input type="text" style="width:calc(100%- widthofbuttoninpixels);" />

It's not advisable to do inline styles though.

Edit: Make sure you also define a fixed width for the button

Upvotes: 1

Related Questions