CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ram
Ram

Reputation: 3091

Match the top and bottom padding in fieldset bootstrap

I am following the below post to add some css to fieldset and legend in bootstrap.

Use Fieldset Legend with bootstrap

HTML

<fieldset class=" scheduler-border">
    <legend class="scheduler-border">Start Time</legend>
    <div class="control-group">
        <label class="control-label col-xs-6 input-label" for="startTime">Start :</label>
        <div class="controls col-xs-6  bootstrap-timepicker">
            <input type="text" class="datetime" type="text" id="startTime" name="startTime" placeholder="Start Time" />
            <i class="icon-time"></i>
        </div>
    </div>
</fieldset>

CSS

fieldset.scheduler-border {
    border: 1px groove  !important;
    padding: 0 1em 1em !important;
    margin: 0 0 0 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}
    legend.scheduler-border {
        font-size: 1.1em !important;
        font-weight: bold !important;
        text-align: left !important;
        width:auto;
        padding:0 5px;
        border-top:none;
        border-bottom:none;
    }

Fiddle: http://jsfiddle.net/zpp1u1q5/

Here is how it looks now

enter image description here

How do I change CSS to reduce the reduce H1 and make it equal to H2 ?

Upvotes: 1

Views: 2397

Answers (2)

Maen
Maen

Reputation: 10698

Your first gap is due to legend's margin-bottom :

enter image description here

While the second gap is due to fieldset's padding-bottom:

enter image description here

Adjust one of them to get your desired layout (4px margin-bottom on legend seems a good fit)

Upvotes: 2

Leandro Carracedo
Leandro Carracedo

Reputation: 7345

Maybe you need to change the padding-left, here is the solution: http://jsfiddle.net/td9o6ecg/

<fieldset class=" scheduler-border">
<legend class="scheduler-border">Start Time</legend>
<div class="control-group">
    <label class="control-label col-xs-6 input-label" style="padding-left: 5px;" for="startTime">Start :</label>
    <div class="controls col-xs-6  bootstrap-timepicker">
        <input type="text" class="datetime" type="text" id="startTime" name="startTime" placeholder="Start Time" />
        <i class="icon-time"></i>
    </div>
</div>
</fieldset>

Upvotes: 0

Related Questions