Utiliser Fieldset Legend avec bootstrap

J'utilise Bootstrap pour ma JSPpage.

Je veux utiliser <fieldset>et <legend>pour mon formulaire. Ceci est mon 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 est

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;
}

Je reçois une sortie comme celle-ci

Je veux une sortie de la manière suivante

J'ai essayé d'ajouter

border:none;
width:100px;

à legend.scheduler-borderen CSS. Et j'obtiens la sortie attendue. Mais le problème est que je voudrais en ajouter un autre <fieldset>pour un autre champ. Cette fois, la largeur du texte dans la légende est un problème car elle est plus longue que 100px.

Alors, que dois-je faire pour obtenir une sortie comme je l'ai mentionné? (Sans frapper le texte de la légende)

En effet, Bootstrap définit par défaut la largeur de l' legendélément sur 100%. Vous pouvez résoudre ce problème en modifiant votre legend.scheduler-borderpour utiliser également:

legend.scheduler-border {
    width:inherit; /* Or auto */
    padding:0 10px; /* To give a bit of padding on the left and right */
    border-bottom:none;
}

Exemple JSFiddle .

Vous devrez également vous assurer que votre feuille de style personnalisée est ajoutée après Bootstrap pour empêcher Bootstrap de remplacer votre style - bien que vos styles ici devraient avoir une spécificité plus élevée.

Vous pouvez également y ajouter des éléments margin-bottom:0;pour réduire l’écart entre la légende et le séparateur.

Dans bootstrap 4, il est beaucoup plus facile d'avoir une bordure sur le jeu de champs qui se confond avec la légende. Vous n'avez pas besoin de css personnalisé pour y parvenir, cela peut être fait comme ceci:

<fieldset class="border p-2">
   <legend  class="w-auto">Your Legend</legend>
</fieldset>

qui ressemble à ceci:

J'ai eu ce problème et je l'ai résolu de cette façon:

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;
}

J'ai eu une approche différente, utilisé le panneau de bootstrap pour le montrer un peu plus riche. Juste pour aider quelqu'un et améliorer la réponse.

.text-on-pannel {
  background: #fff none repeat scroll 0 0;
  height: auto;
  margin-left: 20px;
  padding: 3px 5px;
  position: absolute;
  margin-top: -47px;
  border: 1px solid #337ab7;
  border-radius: 8px;
}

.panel {
  /* for text on pannel */
  margin-top: 27px !important;
}

.panel-body {
  padding-top: 30px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-body">
      <h3 class="text-on-pannel text-primary"><strong class="text-uppercase"> Title </strong></h3>
      <p> Your Code </p>
    </div>
  </div>
  <div>

Cela donnera le look ci-dessous.

Remarque: nous devons changer les styles afin d'utiliser une taille d'en-tête différente.

Je voulais juste résumer toutes les bonnes réponses ci-dessus en bref. Parce que j'ai dû passer beaucoup de temps à déterminer quelle réponse résout le problème et ce qui se passe dans les coulisses.

Il semble y avoir deux problèmes de fieldset avec bootstrap:

1. Le bootstrapdéfinit la largeur à legend100%. C'est pourquoi il recouvre la bordure supérieure du fieldset.
2. Il y a un bottom borderpour le legend.

Donc, tout ce dont nous avons besoin pour résoudre ce problème est de définir la largeur de la légende sur auto comme suit:

legend.scheduler-border {
   width: auto; // fixes the problem 1
   border-bottom: none; // fixes the problem 2
}