Group an input and a button

Question

I'm trying to group an input and a button. Basically the button need to be on the same row as input with no space between them

Because I need to support IE9, I'm using display: table.

.container{
 border: 1px red solid;
 width: 35rem;
}

.input-group {
    border-collapse: separate;
    display: table;
    position: relative;
    }
    
.input {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    font-size: .875rem;
    line-height: 1.5;
    margin: 0 ;
    display: table-cell;
}    

.button {
    color: #fff;
    background-color: #0b0b0b;
    border: 0;
    padding: .375rem .75rem;
    text-align: center;
    }

<div class="container">
<div class="input-group">
        <input class="input">
        <button class="button">Get Data</button>
</div>
</div>

`button` and `input` elements don't want to be _table cells_, so wrap them: https://jsfiddle.net/p67f4wox/ ... and don't set `float` on _table cells_ — Asons, Nov 12 '18 at 19:59
@LGSon, is not the same question, this one have also an input an the group needs to expand on the total width of the parent — user3541631, Nov 12 '18 at 20:04
First off, doesn't need to be same question, can also be related to one or more of its answers. Second, your main issue is just that, try make e.g. a `button` to display as a table cell. When done as I suggested in the above fiddle, it works when you assign the `width` to the wrappers in the same way you did in your original code sample. — Asons, Nov 12 '18 at 20:09

Nimitt Shah · Accepted Answer · 2018-11-14T16:55:48.423

0

I don't know why width:100% is there on the input. It will take whole width of parent space. I have removed it and its working.!

See the Snippet below:

.container{
    border: 1px red solid;
    width: 35rem;
}

.input-group {
    border-collapse: separate;
    display: table;
    position: relative;
    width:100%;
}
  

.input-group>div {
    display: table-cell;
}

.input-group>div:first-child {
    width: 100%;
} 
.input {
    position: relative;
    z-index: 2;
    width: 100%;
    font-size: .875rem;
    line-height: 1.5;
}

.button {
    color: #fff;
    background-color: #0b0b0b;
    border: 0;
    padding: .375rem .75rem;
    text-align: center;
    white-space: nowrap;
}

<div class="container">
<div class="input-group">
   <div><input class="input"></div>
   <div><button class="button">Get Data Dummy Text</button></div>
</div>
</div>

Update 1:

You can use calc to calculate the width of input text. Can I use?

Update 2:

To make it possible without button width, you might want to wrap both input and button in the div. And apply display:table-cell to both div.

You can test it here (as per the @LGSon's answer)

edited Nov 14 '18 at 16:55

answered Nov 12 '18 at 19:41

Nimitt Shah

4,477
2
10
21

I want the group to take all the width of the parent; I added a container with border, to be more clear; – user3541631 Nov 12 '18 at 19:48
Use `calc` to calculate the input width.. Updated the Snippet – Nimitt Shah Nov 12 '18 at 19:59
I want the group to take all the width of the parent; I added a container with border, to be more clear; Also the button and doesn't have a fixed width; the text of the button is dynamic from backend; – user3541631 Nov 12 '18 at 20:06
I have updated my answer with Update 2 and also updated the snippet. I have removed fixed width from the button. – Nimitt Shah Nov 13 '18 at 15:19
@LGSon: Hey man, I am not even seeing your answer here. How can I copy you? – Nimitt Shah Nov 14 '18 at 16:40
Sorry boss, I have no idea what you are talking about but if you feel I have copied your code then I can add your name in answer, but FYI I didn't – Nimitt Shah Nov 14 '18 at 16:54
And I have added your name on answer – Nimitt Shah Nov 14 '18 at 16:56

score 0 · Answer 2 · answered Nov 12 '18 at 19:41

0

Try this, I added a position: absolute to button, let me know if that help!

.button {
    color: #fff;
    background-color: #0b0b0b;
    border: 0;
    padding: .375rem .75rem;
    text-align: center;
    position: absolute; /*Added*/
    width: 100px; /*Added*/
    height: 27px; /*Added*/
}

You can check it here

answered Nov 12 '18 at 19:41

MartinBA

797
1
5
15

I want the group to take all the width of the parent; I added a container with border, to be more clear; Also the button and doesn't have a fixed width; the text of the button is dynamic from backend; – user3541631 Nov 12 '18 at 19:52
@user3541631 Maybe something like this? https://codepen.io/federicomartin/pen/jQVpqG – MartinBA Nov 12 '18 at 19:55

Group an input and a button

2 Answers2