Input text & button with span inline

Question

we must display an input-field and a button with an inner span on the same line. Button resp. its inner span must have width:auto, the input text must fill the remaining width.

Fiddle: http://jsfiddle.net/1xfxpm55/

HTML:

<div class="wrapper">
    <input type="text">
    <button> <span>Auswählen</span>

    </button>
</div>

CSS:

.wrapper {
    width:100%;
    display: table;
}
input {
    display: table-cell;
    width: 100%;
    float: left;
}
button {
    display: table-cell;
    width: auto;
}

Thanks for any hints

Input text and button must fill 100% width, button must be width:auto because the inner text can be taller or wider... — Raphael Jeger, Jun 04 '15 at 10:18
Change `width:100% display: table; `to `width:100%; display: table;` and `width: 100% float: left;` to `width: 100%; float: left;` — Abdulla Nilam, Jun 04 '15 at 10:22
http://stackoverflow.com/questions/773517/style-input-element-to-fill-remaining-width-of-its-container and http://stackoverflow.com/questions/17476423/how-to-make-an-input-field-have-100-width-minus-the-width-of-the-submit-button and http://stackoverflow.com/questions/13658479/css-how-to-have-an-input-field-auto-adjusting-its-width — Fabrizio Calderan, Jun 04 '15 at 10:22
these are answers without span in button, which we need to use — Raphael Jeger, Jun 04 '15 at 10:25

PoseLab · Accepted Answer · 2015-06-04T11:19:03.707

2

Put the button in a div with a small width:

* {
    box-sizing:border-box;
}
*:before, 
*:after {
    box-sizing:border-box;
}
.c1 {
    display: table-cell;
    padding-right:10px;
}
input{
    width:100%;
}
.c2 {
    display: table-cell;
    padding-left:10px;
    width:1%
}

<div class="wrapper">
    <div class="c1">
        <input type="text">
    </div>
    <div class="c2">
        <button><span>Auswählen</span></button>
    </div>
</div>

edited Jun 04 '15 at 11:19

answered Jun 04 '15 at 11:10

PoseLab

1,841
1
16
22

already near on our code, thank you! The c2 has too much height at the moment though... will be able to resolve that :) – Raphael Jeger Jun 04 '15 at 11:19

RaKXeR · Answer 2 · 2015-06-04T12:57:41.847

Are you allowed to use javascript? If I get the question right, the input text field has to fill the entire line - the width of the input button, correct? Here is a sugestion:

function getRemainingWidth(button, elm) {
    elm.style.width = "calc( 100vw - " + realWidth(button) + "px)";
    alert(elm.style.width);
}

function realWidth(elm) {
    var width = elm.offsetWidth + 
        parseInt(window.getComputedStyle(elm, null).getPropertyValue('padding-left'), 10) +
        parseInt(window.getComputedStyle(elm, null).getPropertyValue('padding-right'), 10) + 
        parseInt(window.getComputedStyle(elm, null).getPropertyValue('margin-left'), 10) + 
        parseInt(window.getComputedStyle(elm, null).getPropertyValue('margin-right'), 10);

    return width + 10;
}

window.onload = getRemainingWidth(document.getElementById('btn'), document.getElementById('textfield'));

Made a working jsfiddle here http://jsfiddle.net/1xfxpm55/4/ (its an update of your provided demo).

look at PoseLab's solution, it works fine. if you remove the padding values you get the same effect as this but without javascript. — RaKXeR, Jun 04 '15 at 11:18

Input text & button with span inline

2 Answers2