Daniel Cordeiro Daniel Cordeiro - 3 months ago 8
CSS Question

HTML Input field with bootstrap class: width changes when I add certain attributes

I have two inputs on the same row and I want both input fields to fill the parent container (a "col-sm-10" and "col-sm-2", respectively) width-wise. If I just leave it this way:

<div class="col-sm-10">
<label for="inputA">Cliente:</label>
<input class="form-control" id="inputA" />
</div>
<div class="col-sm-2">
<label for="inputB">NIF:</label>
<input class="form-control" id="inputB" />
</div>


Then I have no problem

However, If I add certain attributes to the input (such as type="text" OR runat="server"(I need this to process the input programmatically)), the width of the first input changes and it no longer fills the parent container:

<div class="col-sm-10">
<label for="inputA">Cliente:</label>
<input class="form-control" id="inputA" type="text" runat="server"/>
</div>
<div class="col-sm-2">
<label for="inputB">NIF:</label>
<input class="form-control" id="inputB" runat="server"/>
</div>


The most amazing thing is that if I change type="text" to type="number" it works. See the image, since I can't post more than 2 links: i.stack.imgur.com/aN3us.png

I tried using the control with CssClass="form-control" and the same behavior happens.

Answer

Here you have an example of your code and it runs perfectly. I think that you might have another css style that is overwriting your style.

You should check for input[type='text']. I would suggest you that you open the browser developer tools select your input type and in the right side you have all your styles that are applying to that element. You should check for width and it also tells you file where this style is coming from and the line.

Also you can add full width by yourself

.col-sm-10 #inputA{
    width:100%;
}