CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
AAA
AAA

Reputation: 2032

100% input width that stretches fluidly

This is more complicated than it should be, but I'm having trouble displaying an input width of literally 100% of within its div.

Example here:

http://jsfiddle.net/aml90/mfdtk/

I'm using Twitter Bootstrap. I want the inputs to be 100% of the width of the span6 classes, like the blue highlights:

enter image description here

Despite the lack of CSS, I have tried many things -- just didn't put the non-working CSS on there.

You will need to resize the windows, like this:

Window resize

Upvotes: 0

Views: 122

Answers (3)

Simon Steinberger
Simon Steinberger

Reputation: 6825

Patching Bootstrap in such a way is a bit tricky, since there can be different "side effects". Maybe something along those lines will do the trick for you:

.span6 { width: 100% !important; margin-left: 0 !important }
.span6 input { width: 92%; }
.input-prepend { display: block; }

Play around with overriding these CSS directives and test you layout with it. Good luck! http://jsfiddle.net/Yuv3H/

Upvotes: 1

Patrick Evans
Patrick Evans

Reputation: 42746

.span6 .input-prepend {
     padding-left:28px;
     display:block;
}
.span6 .input-prepend .add-on {
     float:left;
     margin-left:-28px;
}
.span6 .input-prepend input {
     width:100% !important;
}

this will put the add-on to the left side, and let the input take up remaining space

JSFiddle

Upvotes: 1

Pumpkinpro
Pumpkinpro

Reputation: 847

well it have to be something like this LINK

.input-prepend{
    width:100%;
}
.input-prepend input{
    width:95%;
}

Upvotes: 1

Related Questions