I'm using Bootstrap for my JSP
page.
I want to use <fieldset>
and <legend>
for my form. This is my code.
<fieldset class="scheduler-border">
<legend class="scheduler-border">Start Time</legend>
<div class="control-group">
<label class="control-label input-label" for="startTime">Start :</label>
<div class="controls bootstrap-timepicker">
<input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" />
<i class="icon-time"></i>
</div>
</div>
</fieldset>
CSS is
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
}
I am getting output like this
I want output in the following way
I tried adding
border:none;
width:100px;
to legend.scheduler-border
in CSS. And I'm getting the expected output. But the problem is I would like to add another <fieldset>
for another fields. That time the width of text in legend is a problem as it is lengthier than than 100px
.
So what shall I do to get output like I have mentioned? (Without striking the legend text)
This question is related to
html
css
forms
twitter-bootstrap
Just wanted to summarize all the correct answers above in short. Because I had to spend lot of time to figure out which answer resolves the issue and what's going on behind the scenes.
There seems to be two problems of fieldset with bootstrap:
bootstrap
sets the width to the legend
as 100%. That is why it overlays the top border of the fieldset
. bottom border
for the legend
.So, all we need to fix this is set the legend width to auto as follows:
legend.scheduler-border {
width: auto; // fixes the problem 1
border-bottom: none; // fixes the problem 2
}
I had a different approach , used bootstrap panel to show it little more rich. Just to help someone and improve the answer.
.text-on-pannel {_x000D_
background: #fff none repeat scroll 0 0;_x000D_
height: auto;_x000D_
margin-left: 20px;_x000D_
padding: 3px 5px;_x000D_
position: absolute;_x000D_
margin-top: -47px;_x000D_
border: 1px solid #337ab7;_x000D_
border-radius: 8px;_x000D_
}_x000D_
_x000D_
.panel {_x000D_
/* for text on pannel */_x000D_
margin-top: 27px !important;_x000D_
}_x000D_
_x000D_
.panel-body {_x000D_
padding-top: 30px !important;_x000D_
}
_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />_x000D_
<div class="container">_x000D_
<div class="panel panel-primary">_x000D_
<div class="panel-body">_x000D_
<h3 class="text-on-pannel text-primary"><strong class="text-uppercase"> Title </strong></h3>_x000D_
<p> Your Code </p>_x000D_
</div>_x000D_
</div>_x000D_
<div>
_x000D_
Note: We need to change the styles in order to use different header size.
I had this problem and I solved with this way:
fieldset.scheduler-border {
border: solid 1px #DDD !important;
padding: 0 10px 10px 10px;
border-bottom: none;
}
legend.scheduler-border {
width: auto !important;
border: none;
font-size: 14px;
}
Source: Stackoverflow.com