0

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>
Asons
  • 84,923
  • 12
  • 110
  • 165
user3541631
  • 3,686
  • 8
  • 48
  • 115
  • `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

2 Answers2

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)

Nimitt Shah
  • 4,477
  • 2
  • 10
  • 21
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

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