CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Ram
Ram

Reputation: 3091

Bootstrap styling for input inside a label

I need to have a input or a textarea inside a label and be displayed inline in my form which is styled using Bootstrap 3. The following code is just a sample and my original code is different and more complex. I want to make sure that they look consistent with the remaining elements in the form.

Bootply

enter image description here

I want the label, input and textarea to look consistent with the Bootstrap form styling and have tried adding control-label and form-control classes to get the bootstrap styling but it doesn't work.

enter image description here

enter image description here

How to make the input answer1 and textarea answer2 have the Bootstrap styling like the Name and Id in the same form and also be inline with the labels surrounding them?

Code

HTML

<form class="form-horizontal padding-md" id="form1">
    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="form-group">
            <label class="control-label col-xs-5 col-sm-4 col-md-3" for="sName">Name</label>
            <div class="controls col-xs-7 col-sm-8 col-md-9"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Name of the student."></span>
                <input type="text" id="sName" name="Name" class="form-control" placeholder="Enter Name">
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="form-group">
            <label class="control-label col-xs-4 col-sm-3 col-md-3" for="sId">Id</label>
            <div class="controls col-xs-8 col-sm-9 col-md-9"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Id of the student."></span>
                <input type="text" id="sId" name="Id" class="form-control" placeholder="Enter Id">
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <label class="control-label col-xs-3 col-sm-2 col-md-1" for="answer1">1.</label>
            <div class="controls col-xs-9 col-sm-10 col-md-11"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Answer for first question."></span>
                <div class="inline">[<div class="sname">Student</div>'s answer: "<input type="text" id="answer1" name="Answer1" placeholder="Enter Answer">"]</div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <label class="control-label col-xs-3 col-sm-2 col-md-1" for="answer2">2.</label>
            <div class="controls col-xs-9 col-sm-10 col-md-11"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Answer for second question."></span>
              <div class="inline">[<div class="sname">Student</div>'s answer: "<textarea id="answer2" name="Answer2" placeholder="Enter Answer"></textarea>"]</div>
            </div>
        </div>
    </div>
    <div class="row pull-right">
        <button type="submit" class="btn btn-primary" id="submitAnswers">Submit Answers</button>
    </div>
</form>

JavaScript

$('#sName').on('input', function() {
   $('.sname').html($('#sName').val()?$('#sName').val():"Student");
});

CSS

.help {
  position:absolute;
  right:-5px;
  top:8px;
}

.inline {
    display:inline-block;
    width:100%;
 }

.sname {
    display:inline;
}

.padding-md {
    padding: 25px;
}

Upvotes: 1

Views: 4868

Answers (1)

Ram
Ram

Reputation: 3091

With help from Rachel and after some reading about display:table I have found a solution by using display:table and display:table-cell. This solution is very close to what I want except that I don't want the width of sname1 and sname2 to be a fixed value. It should ideally be adjusting based on the width of the name entered in sName. I will be using this solution till someone posts a better solution.

Solution:

JSFiddle

$('#sName').on('input', function () {
    $('.sname').html($('#sName').val() ? $('#sName').val() : "Student");
});
.help {
    position:absolute;
    right:-5px;
    top:8px;
}
.inline {
    display:table;
    font-weight:bold;
    width:100%;
}
.sname2, .tail2 {
    vertical-align:top;
}
.sname {
    display:inline;
}
.sname1, .sname2 {
    width:150px;
    font-weight:bold;
    display:table-cell;
}
.padding-md {
    padding: 25px;
}
.inline > .form-control {
    width:100%;
    display:table-cell;
}
.tail1, .tail2 {
    padding-left:10px;
    width: 30px;
    display:table-cell;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<form class="form-horizontal padding-md" id="form1">
    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="form-group">
            <label class="control-label col-xs-5 col-sm-4 col-md-3" for="sName">Name</label>
            <div class="controls col-xs-7 col-sm-8 col-md-9"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Name of the student."></span>
                <input type="text" id="sName" name="Name" class="form-control" placeholder="Enter Name" />
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="form-group">
            <label class="control-label col-xs-4 col-sm-3 col-md-3" for="sId">Id</label>
            <div class="controls col-xs-8 col-sm-9 col-md-9"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Id of the student."></span>
                <input type="text" id="sId" name="Id" class="form-control" placeholder="Enter Id" />
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <label class="control-label col-xs-1 col-sm-1 col-md-1" for="answer1">1.</label>
            <div class="controls col-xs-11 col-sm-11 col-md-11"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Answer for first question."></span>
                <div class="inline">
                    <div class="sname1">[<div class="sname">Student</div>'s answer: "</div>
                    <input type="text" id="answer1" class="form-control" name="Answer1" placeholder="Enter Answer" />
                    <div class="tail1">" ]</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <label class="control-label col-xs-1 col-sm-1 col-md-1" for="answer2">2.</label>
            <div class="controls col-xs-11 col-sm-11 col-md-11"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Answer for second question."></span>
                <div class="inline">
                    <div class="sname2">[<div class="sname">Student</div>'s answer: "</div>
                    <textarea id="answer2" class="form-control" name="Answer2" placeholder="Enter Answer"></textarea>
                    <div class="tail2">" ]</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row pull-right">
        <button type="submit" class="btn btn-primary" id="submitAnswers">Submit Answers</button>
    </div>
</form>

Upvotes: 1

Related Questions