CODEWITHSUNDEEP
cssasp.nettwitter-bootstrapwebforms
DC_AC
DC_AC

Reputation: 416

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: https://i.sstatic.net/aN3us.png

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

Upvotes: 2

Views: 204

Answers (2)

Edison Biba
Edison Biba

Reputation: 4413

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%;
}

Upvotes: 1

LXhelili
LXhelili

Reputation: 980

Check if you have any css style in the form of input[type="text"] with custom width.

Upvotes: 1

Related Questions