CODEWITHSUNDEEP
htmlcsswidthpercentage
eagle
eagle

Reputation: 461

How to use width percentage (%) for text?

I have textbox and label. I want to display side by side and want to width: 100% for text (so I need this :text width change when page size change) but I didn't.

this is my code :

<div class="col-xs-6 col-md-6">
    <div class="form-group clearfix">
        <label for="UxSearch">Search:</label>
        <input type="text" name="UxSearch" id="UxSearch" class="form-control"/>
    </div>
</div>

and this is my css class: 

form-group {
    margin-bottom: 15px;
}

.form-control {
    display: block;
    width: 100%;
    height: 29px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.25;
    color: #555555;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

width : 100% works but text and label are not in alignment (like photo) enter image description here

but That's what I want : enter image description here

I tried display: inline-block but not happend.

Can you help me please ?

Upvotes: 0

Views: 2311

Answers (1)

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

col-xs-6 means in mobile div will take hafl width of the device screen(<768px)

.form-group {
display:inline-flex;
width:100%;

}
.form-control {
display: block;

height: 29px;
padding: 6px 12px;
font-size: 12px;
line-height: 1.25;
color: #555555;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-6 col-md-6">
<div class="form-group clearfix">
    <label for="UxSearch">Search:</label>
    <input type="text" name="UxSearch" id="UxSearch" class="form-control"/>
</div>
</div>

Upvotes: 1

Related Questions