CODEWITHSUNDEEP
twitter-bootstrapresize
Dhugalmac
Dhugalmac

Reputation: 574

Bootstrap Form-Horizontal Appearance

I am still pretty new to Bootstrap so forgive me if my question seems too simple.

I have gotten my Bootstrap webpage almost appearing as I want, but when I change the screen size the layout goes from OK (at phone & tablet size) to Bad (at full Desktop size).

My code is as follows: 

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <form class="form-horizontal" role="form">
                <fieldset>

                    <!-- Text input-->
                    <div id="Row1" class="form-group">
                        <label class="col-sm-2 control-label" for="txtDeviceID">Device ID:</label>
                        <div class="col-sm-4">
                            <input id="txtDeviceID" type="text" placeholder="Device ID" class="form-control" runat="server">
                        </div>

                        <label class="col-sm-2 control-label" for="ddlOwnerID">Owner ID:</label>
                        <div class="col-sm-4">
                            <select class="form-control" id="ddlOwnerID"  runat="server">
                            </select>
                        </div>
                    </div>

                    <!-- Text input-->
                    <div id="Row2" class="form-group">
                        <label class="col-sm-2 control-label" for="ddlDevType">Device Type:</label>
                        <div class="col-sm-4">
                            <select class="form-control" id="ddlDevType"  runat="server">
                            </select>
                        </div>

                        <label class="col-sm-2 control-label" for="txtLocation">Location:</label>
                        <div class="col-sm-4">
                            <input type="text" id="txtLocation" placeholder="Location" class="form-control" runat="server">
                        </div>
                    </div>

                    <!-- Text input-->
                    <div id="Row3" class="form-group">
                        <label class="col-sm-2 control-label" for="txtCreditFee">Credit Fee:</label>
                        <div class="col-sm-4">
                            <input type="text" id="txtCreditFee" placeholder="Credit Fee" class="form-control" runat="server">
                        </div>

                        <label class="col-sm-2 control-label" for="txtClosingText">Closing Msg:</label>
                        <div class="col-sm-4">
                            <textarea id="txtClosingText" class="form-control h4" rows="2" runat="server" wrap="off" placeholder="* Closing Msg *" runat="server"></textarea>
                        </div>
                    </div>
                    </fieldset>
                </form>
            </div>   <!-- /.col-lg-12 -->
        </div>  <!-- /.row -->
</div>  <!-- class="container" -->

My Tablet "good" screen appears as follows:
enter image description here

But when I open up the Browser window to Full Desktop screen size the display changes to the following with the Input fields over-lapping the Labels:
enter image description here

I have the columns defined in my HTML div's and I don't think that NoWrap is set True on the Labels (although I cannot be sure), but it does not seem to help.

Your suggestions/advice would be greatly appreciated.

Upvotes: 1

Views: 936

Answers (1)

maccettura
maccettura

Reputation: 10819

On line 3 of your code you set the div class to: col-md-4 col-md-offset-4

This means your markup will take up no more than 4 columns on md size screens and larger.

Since you did not specify a xs or sm col value in your class attribute it will default to 12 columns, it isn't until your screen size exceeds the md value that your 4 column rule comes into play.

Upvotes: 3

Related Questions