Search code examples
htmlcss

<fieldset> has no border

I'm trying to use a <fieldset> to group some controls. No matter what I do I can't get the border to display. My understanding is it should display by default. In the <style> I've tried setting border-width:1px which does nothing and border:solid draws a border outside of everything including the <legend>. I've tested in both Firefox and Chrome and no difference. What am I missing? Here is an example of my code. I'm playing with different layouts so ignore the inconsistency.

<div class=" col-4 col-sm-4 col-med-4 col-lg-4 col-xl-4 e-primary" style="justify-content:space-around">
  <fieldset>
    <legend>Project Basics</legend>
    <ul>
      <li>
        <label for="txtName">Name</label>
        <input type="text" id="txtName" />
      </li>
      <li>
        <label for="txtDescription">Description</label>
        <textarea rows=3 cols=20 id="txtDescription"></textarea>
      </li>
    </ul>
  </fieldset>
</div>
<div class=" col-4 col-sm-4 col-med-4 col-lg-4 col-xl-4 e-primary" style="justify-content:space-around">
  <fieldset>
    <legend>Cost Estimations</legend>
    <label for="txtEstTotalHrs">Estimated Total Hours</label>
    <input type="text" id="txtEstTotalHrs" />
    <label for="txtEstLaborCost">Estimated Labor Costs</label>
    <input type="text" id="txtEstLaborCosts" />
  </fieldset>
</div>

And this is what I'm seeing, no borders. enter image description here

Update to comments:

  • Mushroomator, yes I am using bootstrap. Are you saying to add the whole bootstrap css to the snippet? And I am the designer of the project.

  • Mike K., Agreed, I am not seeing whats in the plain snippet so something is being overwritten. I wasn't very clear but I did look at the what styles are being applied and at the Fieldset level, if I change the Border setting to 1px it draws an outside box around the fieldset. I added an image from the dev tools.

*JonoJames, I tried adding styling to the tag like this <fieldset style="border-color:black !important; border-style:solid !important"> and I still see nothing. When I look at the dev tools, it shows those attributes set at the Element level but nothing changes on the front end.

This should be a simple problem.

Testing Update: I found the references to the bootstrap css in the _Layout.cshtml file so I started commenting them out , one at a time. The offender seems to be <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> The only reference to fieldset, other than fieldset:disabled, is in this line.

fieldset{min-width:0;padding:10rem;margin:10rem;border:10rem}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}

I've tried setting all properties to something other than zero but no effect. settings like "10px" or "25rem". Anytime I do get a border, its always an "outside" border like this: enter image description here

Solution

  • Finally figured it out. According to this discussion Fieldset legend does not work everything is turned off for fieldset borders in Bootstrap 5. To get the original alignment of the Legend (inline with the border) you have to set the Legend float:none; and width:auto;

    My final CSS looks like this:

    fieldset {
    margin-bottom: 1em !important;
    border: 1px solid #666 !important;
    padding:1px !important;
}

legend {
    padding: 1px 10px !important;
    float:none;
    width:auto;
}

    Thanks for all your input. Reading through your replies a couple times helped me with my troubleshooting.