Group an input and a button [duplicate]
0
This question already has an answer here:
Setting a <button>'s display as table-cell
6 answers
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>css css3
edited Nov 12 at 20:01
LGSon
69.2k84484
asked Nov 12 at 19:35
user3541631
1,06821334
marked as duplicate by LGSon css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 12 at 19:56
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
0
This question already has an answer here:
Setting a <button>'s display as table-cell
6 answers
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>css css3
edited Nov 12 at 20:01
LGSon
69.2k84484
asked Nov 12 at 19:35
user3541631
1,06821334
marked as duplicate by LGSon css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 12 at 19:56
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
buttonandinputelements don't want to be table cells, so wrap them: jsfiddle.net/p67f4wox ... and don't setfloaton table cells
– LGSon
Nov 12 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 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. abuttonto display as a table cell. When done as I suggested in the above fiddle, it works when you assign thewidthto the wrappers in the same way you did in your original code sample.
– LGSon
Nov 12 at 20:09
add a comment |
0
0
0
1
This question already has an answer here:
Setting a <button>'s display as table-cell
6 answers
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>css css3
edited Nov 12 at 20:01
LGSon
69.2k84484
asked Nov 12 at 19:35
user3541631
1,06821334
This question already has an answer here:
Setting a <button>'s display as table-cell
6 answers
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>This question already has an answer here:
Setting a <button>'s display as table-cell
6 answers
.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>.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>css css3
css css3
edited Nov 12 at 20:01
LGSon
69.2k84484
asked Nov 12 at 19:35
user3541631
1,06821334
edited Nov 12 at 20:01
LGSon
69.2k84484
asked Nov 12 at 19:35
user3541631
1,06821334
edited Nov 12 at 20:01
LGSon
69.2k84484
edited Nov 12 at 20:01
LGSon
69.2k84484
edited Nov 12 at 20:01
LGSon
69.2k84484
69.2k84484
asked Nov 12 at 19:35
user3541631
1,06821334
asked Nov 12 at 19:35
user3541631
1,06821334
asked Nov 12 at 19:35
user3541631
1,06821334
1,06821334
marked as duplicate by LGSon css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 12 at 19:56
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by LGSon css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 12 at 19:56
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
buttonandinputelements don't want to be table cells, so wrap them: jsfiddle.net/p67f4wox ... and don't setfloaton table cells
– LGSon
Nov 12 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 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. abuttonto display as a table cell. When done as I suggested in the above fiddle, it works when you assign thewidthto the wrappers in the same way you did in your original code sample.
– LGSon
Nov 12 at 20:09
add a comment |
buttonandinputelements don't want to be table cells, so wrap them: jsfiddle.net/p67f4wox ... and don't setfloaton table cells
– LGSon
Nov 12 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 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. abuttonto display as a table cell. When done as I suggested in the above fiddle, it works when you assign thewidthto the wrappers in the same way you did in your original code sample.
– LGSon
Nov 12 at 20:09
button and input elements don't want to be table cells, so wrap them: jsfiddle.net/p67f4wox ... and don't set float on table cells– LGSon
Nov 12 at 19:59
button and input elements don't want to be table cells, so wrap them: jsfiddle.net/p67f4wox ... and don't set float on table cells– LGSon
Nov 12 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 at 20:04
@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 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.– LGSon
Nov 12 at 20:09
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.– LGSon
Nov 12 at 20:09
add a comment |
2 Answers
2
active
oldest
votes
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)
answered Nov 12 at 19:41
Nimit Shah
1,8591310
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 at 19:48
Usecalcto calculate the input width.. Updated the Snippet
– Nimit Shah
Nov 12 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 at 20:06
I have updated my answer with Update 2 and also updated the snippet. I have removed fixed width from the button.
– Nimit Shah
Nov 13 at 15:19
@LGSon: Hey man, I am not even seeing your answer here. How can I copy you?
– Nimit Shah
Nov 14 at 16:40
|
show 2 more comments
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 at 19:41
MartinBA
7161213
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 at 19:52
@user3541631 Maybe something like this? codepen.io/federicomartin/pen/jQVpqG
– MartinBA
Nov 12 at 19:55
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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)
answered Nov 12 at 19:41
Nimit Shah
1,8591310
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 at 19:48
Usecalcto calculate the input width.. Updated the Snippet
– Nimit Shah
Nov 12 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 at 20:06
I have updated my answer with Update 2 and also updated the snippet. I have removed fixed width from the button.
– Nimit Shah
Nov 13 at 15:19
@LGSon: Hey man, I am not even seeing your answer here. How can I copy you?
– Nimit Shah
Nov 14 at 16:40
|
show 2 more comments
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)
answered Nov 12 at 19:41
Nimit Shah
1,8591310
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 at 19:48
Usecalcto calculate the input width.. Updated the Snippet
– Nimit Shah
Nov 12 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 at 20:06
I have updated my answer with Update 2 and also updated the snippet. I have removed fixed width from the button.
– Nimit Shah
Nov 13 at 15:19
@LGSon: Hey man, I am not even seeing your answer here. How can I copy you?
– Nimit Shah
Nov 14 at 16:40
|
show 2 more comments
0
0
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)
answered Nov 12 at 19:41
Nimit Shah
1,8591310
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)
.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>.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>answered Nov 12 at 19:41
Nimit Shah
1,8591310
edited Nov 14 at 16:55
answered Nov 12 at 19:41
Nimit Shah
1,8591310
answered Nov 12 at 19:41
Nimit Shah
1,8591310
answered Nov 12 at 19:41
Nimit Shah
1,8591310
1,8591310
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 at 19:48
Usecalcto calculate the input width.. Updated the Snippet
– Nimit Shah
Nov 12 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 at 20:06
I have updated my answer with Update 2 and also updated the snippet. I have removed fixed width from the button.
– Nimit Shah
Nov 13 at 15:19
@LGSon: Hey man, I am not even seeing your answer here. How can I copy you?
– Nimit Shah
Nov 14 at 16:40
|
show 2 more comments
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 at 19:48
Usecalcto calculate the input width.. Updated the Snippet
– Nimit Shah
Nov 12 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 at 20:06
I have updated my answer with Update 2 and also updated the snippet. I have removed fixed width from the button.
– Nimit Shah
Nov 13 at 15:19
@LGSon: Hey man, I am not even seeing your answer here. How can I copy you?
– Nimit Shah
Nov 14 at 16:40
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 at 19:48
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 at 19:48
Use
calc to calculate the input width.. Updated the Snippet– Nimit Shah
Nov 12 at 19:59
Use
calc to calculate the input width.. Updated the Snippet– Nimit Shah
Nov 12 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 at 20:06
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 at 20:06
I have updated my answer with Update 2 and also updated the snippet. I have removed fixed width from the button.
– Nimit Shah
Nov 13 at 15:19
I have updated my answer with Update 2 and also updated the snippet. I have removed fixed width from the button.
– Nimit Shah
Nov 13 at 15:19
@LGSon: Hey man, I am not even seeing your answer here. How can I copy you?
– Nimit Shah
Nov 14 at 16:40
@LGSon: Hey man, I am not even seeing your answer here. How can I copy you?
– Nimit Shah
Nov 14 at 16:40
|
show 2 more comments
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 at 19:41
MartinBA
7161213
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 at 19:52
@user3541631 Maybe something like this? codepen.io/federicomartin/pen/jQVpqG
– MartinBA
Nov 12 at 19:55
add a comment |
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 at 19:41
MartinBA
7161213
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 at 19:52
@user3541631 Maybe something like this? codepen.io/federicomartin/pen/jQVpqG
– MartinBA
Nov 12 at 19:55
add a comment |
0
0
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 at 19:41
MartinBA
7161213
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 at 19:41
MartinBA
7161213
answered Nov 12 at 19:41
MartinBA
7161213
answered Nov 12 at 19:41
MartinBA
7161213
answered Nov 12 at 19:41
MartinBA
7161213
7161213
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 at 19:52
@user3541631 Maybe something like this? codepen.io/federicomartin/pen/jQVpqG
– MartinBA
Nov 12 at 19:55
add a comment |
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 at 19:52
@user3541631 Maybe something like this? codepen.io/federicomartin/pen/jQVpqG
– MartinBA
Nov 12 at 19:55
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 at 19:52
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 at 19:52
@user3541631 Maybe something like this? codepen.io/federicomartin/pen/jQVpqG
– MartinBA
Nov 12 at 19:55
@user3541631 Maybe something like this? codepen.io/federicomartin/pen/jQVpqG
– MartinBA
Nov 12 at 19:55
add a comment |
buttonandinputelements don't want to be table cells, so wrap them: jsfiddle.net/p67f4wox ... and don't setfloaton table cells– LGSon
Nov 12 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 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
buttonto display as a table cell. When done as I suggested in the above fiddle, it works when you assign thewidthto the wrappers in the same way you did in your original code sample.– LGSon
Nov 12 at 20:09