Search code examples
asp.nettwitter-bootstrappanelfieldset

Fieldset not rendering correctly under Twitter Bootstrap

I'm trying to use a Fieldset on a page in a responsive site that uses Bootstrap. Actually, I'm trying to use an ASP.NET Panel control with the GroupingText property set - but that actually renders as a fieldset with the legend set so same difference. The page isn't rendering the fieldset correctly. Normally, with a fieldset you get a border around your content with the legend embedded in the border such as below (same site without Bootstrap):

enter image description here

But here's what it looks like if I include Bootstrap:

enter image description here

I've looked to see what the bootstrap css is doing with fieldsets but can't figure out what's causing it. Anyone else have problems using fieldsets (or ASP.NET Panels with GroupingText populated) in conjunction with Bootstrap? Anyone know how to get Bootstrap to render fieldsets normally?

Solution

  • This will undoutably not be the answer you were hoping for, but I can think of only one option that will help render the fieldset and legend elements as you want when you're including bootstrap in your project:

    There is a CSS property call all that has several values that you can set on it. You can read up on it here. The value you'd be interested in though is initial. So a class with a property all: initial; will reset all of the selected element's properties to their initial values as defined in the CSS spec. After that you would have to style the legend and fieldset elements to how you want them rendered. I've provided some working code that will get you started. You can see it in action here. Please note bootstrap is in this environment if you delete all of the CSS, you'll see bootstraps styling rendered.

    Sample HTML:

    <fieldset class="reset-this redo-fieldset" style="margin-left: 10px;">
    <legend class="reset-this redo-legend">Name</legend>
    First Name: <input type="text"><br>
    Last Name: <input type="text"><br>
</fieldset>

    Sample CSS:

    .reset-this {
  all: initial;
}

.redo-fieldset {
  border: 1px solid black;
  padding : 10px;
} 

.redo-legend {
  color: black;
}