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

Question

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.

Edison Biba · Accepted Answer · 2016-09-01 12:25:13Z

1

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

answered Sep 1, 2016 at 12:25

Edison Biba

4,4833 gold badges20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DC_AC Over a year ago

Thanks! When creating an asp.net web forms project, there's a Site.css file in which several input types are fixed with a max-width of 280px. I don't know why do they do that, since the default project also has bootstrap theming. I just commented the conflicting part and it is working nice now. Thanks Also, if you don't mind answering this: which is preferable? Using the default html input or the <asp:TextBox > control? Thank you for your time.

Edison Biba Over a year ago

I am not really good at asp so i don't wanna give you any incorrect answer. Maybe you can check here in stack for that question or you can create one if you can't find any information about that. Vote me up :D

LXhelili · Accepted Answer · 2016-09-01 12:16:35Z

1

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

answered Sep 1, 2016 at 12:16

LXhelili

9806 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related