Rendering input-group when button is not present

Question

I'm using C#.NET with webforms. I create a control to find subjects on my database. This control has a textbox and a button. The button can be hidden/removed sometimes, and that's the problem!

When the button is visible, html render ok. But when the button is hidden/removed, the html gets broken...

My html is like this:

<div class="input-group">
    <asp:TextBox runat="server" ID="SubjectTextBox" CssClass="SubjectTextBox form-control"></asp:TextBox>
    <span class="input-group-btn">
        <button id="SearchSubjectBtn" class="btn btn-default" type="button" runat="server">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;Search
        </button>
    </span>
</div>

Which renders like this:

input-group rendering incorrectly

How can I fix the html, so it could render in the correct form?

I know I could just remove the "input-group" class from the "div", but I don't want to do this by C#. The reason, is that I don't want to manage css on my code.

Actually, just remove the class, will work, but will not be correct, right?

There is a way to do that easily?

You mean hidden/removed rather than disabled, right? – cvrebert Jan 23 '15 at 22:22 — cvrebert, Jan 23 '15 at 22:22
yes! I'm sorry about this. I really mean hidden/removed. – Vinicius Garcia Jan 26 '15 at 01:45 — Vinicius Garcia, Jan 26 '15 at 01:45

score 1 · Accepted Answer · edited May 23 '17 at 10:26

Well, I did a lot of research and found this question.

Accordlly to this bug report new versions of Bootstrap implement a width: auto on .input-group to fix some problems.

So, the behaviour on my code is expected.

To fix this, I added this css code after my bootstrap.css:

<!--
    https://github.com/twbs/bootstrap/issues/14272
    https://stackoverflow.com/questions/24592969/boostrap-3-1-1-nav-bar-maximized-input-no-longer-maximized-in-3-2-0
-->
<style>
    /* make sure input-group goes 100% i.e. full width of screen 
       to compliment the display: inline-table; that showed up in 3.2.0 */
    .input-group
    {
        width: 100%;
    }
    /* override width: auto; that showed up in 3.2.0
       with at least 1px for the addon or btn (I had an addon) */
    .input-group .input-group-addon,
    .input-group .input-group-btn
    {
        width: 1px;
    }
    /* separate .form-control and give it width: 100%; */
    .input-group .form-control
    {
        width: 100%;
    }

    /* make sure navbar-form's input-group goes 100% i.e. full width of screen 
       to compliment the display: inline-table; that showed up in 3.2.0 */
    .navbar-form .input-group {
          width: 100%;
    }
    /* override width: auto; that showed up in 3.2.0
       with at least 1px for the addon or btn (I had an addon) */
    .navbar-form .input-group .input-group-addon,
    .navbar-form .input-group .input-group-btn {
          width: 1px;
    }
    /* separate .form-control and give it width: 100%; */
    .navbar-form .input-group .form-control {
            width: 100%;
    }
</style>

This fixed the layout on my site.

But still, to me, looks like something is not right on this field on Bootstrap. I'll keep watching this bug reports to see if I find more info.

Rendering input-group when button is not present

1 Answers1