0

I am trying to align legend text to left side but when i do that the top border disappear. If i add width=auto I get the complete border but the text align to center.

border: 1px solid #395d8b !important;
border-radius: 5px;
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.border-set {
  font-size: 1.2em !important;
  font-weight: bold !important;
  text-align: left !important;
  padding: 0 10px;
  border-bottom: none;
}
<fieldset class="border-set">
  <legend class="border-set">Búsqueda</legend>
  <form>
    <div class="form-row justify-content-left">
      <div align="left" class="form-group col-sm-4">
        <small for="csf">Nombre</small>
        <input type="name" class="form-control" id="csf" aria-describedby="csfhelp">
      </div>
      <div align="left" class="form-group col-sm-4">
        <small for="csv">Descripción</small>
        <input type="name" class="form-control" id="csv" aria-describedby="csvhelp">
      </div>
      <div class="form-check form-check-inline col-sm-offset-2">
        <input class="form-check-input" type="checkbox" name="Online" id="Batch" value="Batch">
        <label class="form-check-label" for="inlineRad">Normal</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" name="Online" id="Online" value="Online">
        <label class="form-check-label" for="inlineRadio1">Especial</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" name="Online" id="Online" value="Online">
        <label class="form-check-label" for="inlineRadio1">Doc. Design</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" name="Online" id="Online" value="Online">
        <label class="form-check-label" for="inlineRadio1">Activo</label>
      </div>
    </div>
  </form>
</fieldset>

with width:auto

without width:auto

4
  • Don't use "align=left" in your div tags, this wont work well with the css framework your using. Stick to css.
    – rx2347
    Commented Mar 9, 2020 at 13:26
  • did you provide all necessary code?
    – MattOpen
    Commented Mar 9, 2020 at 13:30
  • Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Reproducible Example
    – Paulie_D
    Commented Mar 9, 2020 at 13:32
  • In addition, align=left is obsolete and shouldn't be used at all.
    – Rob
    Commented Mar 9, 2020 at 14:45

0

Browse other questions tagged or ask your own question.