web-dev-qa-db-fra.com

Utiliser la légende du jeu de champs avec bootstrap

J'utilise Bootstrap pour ma page JSP.

Je souhaite 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 enter image description here

Je veux une sortie de la manière suivante

enter image description here

J'ai essayé d'ajouter

border:none;
width:100px;

à legend.scheduler-border en CSS. Et je reçois le résultat attendu. Mais le problème est que je voudrais ajouter un autre<fieldset>pour un autre champ. Cette fois, la largeur du texte dans la légende pose un problème car il est plus long que 100px.

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

htmlcssformstwitter-bootstrap
142
Shiju K Babu

En effet, Bootstrap définit par défaut la largeur de l'élément legend sur 100%. Vous pouvez résoudre ce problème en modifiant votre legend.scheduler-border afin qu'il utilise é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 devez également vous assurer que votre feuille de style personnalisée est ajoutée après Bootstrap pour empêcher Bootstrap de surcharger votre style - bien que vos styles aient une spécificité supérieure.

Vous voudrez peut-être également ajouter margin-bottom:0; afin de réduire l’écart entre la légende et le diviseur.

194
James Donnelly

Dans le bootstrap 4, il est beaucoup plus facile d’avoir une bordure qui se confond avec la légende. Vous n'avez pas besoin de fichiers CSS personnalisés pour le réaliser, cela peut être fait comme ceci:

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

qui ressemble à ceci:  bootstrap 4 fieldset and legend

24
Joe Audette

J'ai eu ce problème et j'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;
}
17
Mohammad Aghayari

J'ai eu une approche différente, j'ai utilisé le panneau 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 ci-dessous regarder .  enter image description here

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

14
Jajikanth pydimarla

Je voulais juste résumer toutes les bonnes réponses ci-dessus en bref. Parce que je devais passer beaucoup de temps à trouver quelle réponse résoudrait le problème et ce qui se passait en coulisse.

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

  1. La bootstrap définit la largeur sur la legend sur 100%. C'est pourquoi il recouvre le bord supérieur de la fieldset. 
  2. Il y a un bottom border pour la legend.

Il suffit donc de régler 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
}
4
Manoj Shrestha

.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>

0
mystackoverflowhut