CODEWITHSUNDEEP
htmltwitter-bootstrapbootstrap-modal
umamaheswar.cs
umamaheswar.cs

Reputation: 21

Bootstrap labels are overlapping input text field

In one of my projects, i need to show edit record form on the modal. So, I'm using bootstrap 3.3.7 modal to show the edit form. but I see the weird behavior of control alignment on Html Page as the label is overlapping on input field.

    <html>
    <head>


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>

<form>
    <div class="container">
                <div class="form-inline">
            <div class="col-md-3">
                <label for="txtArtiklenummer" class="col-md-6 control-label">Artikelnummer:</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" id="txtArtikelnummer" name="txtArtikelnummer" value="" />
                </div>
            </div>

            <div class="form-group col-md-3">

                <label for="txtPharmacode" class="col-md-6 form-control-label">Pharmacode:</label>
                <div class="col-md-6">
                    <input type="text" class="form-control" id="txtPharmacode" name="txtPharmacode" value="" />
                </div>
            </div>
            <div class="col-md-2">

                <label for="txtPrdnr" class="col-md-6">Prdnr:</label>
                <div class="col-md-6">
                    <input type="text" class="form-control" id="txtPrdnr" name="txtPrdnr" value="">
                </div>
            </div>

            <div class="col-md-4">
                <label for="txtTimestamp" class="col-md-5">Timestamp:</label>
                <div class="col-md-6 input-group date" data-provide="datepicker">
                    <input type="text" id="txtTimestamp" name="txtTimestamp" class="form-control disabled" value="">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                </div>
                <button type="button" class="col-md-1 btn btn-default btn-sm pull-right">
                    <span class="glyphicon glyphicon-exclamation-sign"></span>
                </button>
            </div>

        </div>


    </div>
</form>
</body>
</html>

JSfiddle -

http://jsfiddle.net/umamaheswarcs/dmezLn5k/10/

Please maximize the output window to see the alignment issue.

Can anyone please help me in fixing this issue?

Upvotes: 0

Views: 5005

Answers (1)

newman
newman

Reputation: 424

Place the div tag before the label tag and remove col-md classes from labels. For example:

            <div class="col-md-3">
                <div class="col-md-4">
                    <label for="txtArtiklenummer" class="control-label">Artikelnummer:</label>

                    <input type="text" class="form-control" id="txtArtikelnummer" name="txtArtikelnummer" value="" />
                </div>
            </div>

Or place the label in another div:

                  <div class="col-md-3">
                    <div class="col-md-6">
                        <label for="txtArtiklenummer" class="control-label">Artikelnummer:</label>
                    </div> 
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="txtArtikelnummer" name="txtArtikelnummer" value="" />
                    </div>
                </div>

Upvotes: 1

Related Questions