it-swarm.com.ru

Используйте Fieldset Legend с начальной загрузкой

Я использую Bootstrap для своей страницы JSP.

Я хочу использовать<fieldset>и<legend>для своей формы. Это мой код.

<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 это

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

Я получаю вывод, как это enter image description here

Я хочу вывод следующим образом

enter image description here

Я пытался добавить

border:none;
width:100px;

legend.scheduler-border в CSS. И я получаю ожидаемый результат. Но проблема в том, что я хотел бы добавить другой<fieldset>для других полей. В то время ширина текста в легенде является проблемой, так как она длиннее, чем 100px.

Так что мне делать, чтобы получить результат, как я уже упоминал? (Не ударяя текст легенды)

142
Shiju K Babu

Это потому, что Bootstrap по умолчанию устанавливает ширину элемента legend равной 100%. Вы можете исправить это, изменив свой legend.scheduler-border, чтобы также использовать:

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

JSFiddle пример .

Вам также необходимо убедиться, что ваша пользовательская таблица стилей добавляется после Bootstrap, чтобы Bootstrap не перекрывал ваш стиль - хотя ваши стили должны иметь более высокую специфичность.

Вы также можете добавить к нему margin-bottom:0;, чтобы уменьшить разрыв между легендой и разделителем.

194
James Donnelly

В начальной загрузке 4 намного легче иметь границу на наборе полей, которая сочетается с легендой. Вам не нужно настраивать CSS для этого, это можно сделать так:

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

который выглядит так:  bootstrap 4 fieldset and legend

24
Joe Audette

У меня была эта проблема, и я решил следующим образом:

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

У меня был другой подход, я использовал панель начальной загрузки, чтобы показать ее немного более насыщенной. Просто чтобы помочь кому-то и улучшить ответ.

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

Это даст ниже взгляд .  enter image description here

Примечание. Нам нужно изменить стили, чтобы использовать другой размер заголовка. 

14
Jajikanth pydimarla

Просто хотел бы кратко изложить все правильные ответы выше. Потому что мне пришлось потратить много времени, чтобы выяснить, какой ответ решает проблему и что происходит за кулисами.

Кажется, есть две проблемы fieldset с начальной загрузкой:

  1. bootstrap устанавливает ширину legend равной 100%. Вот почему он перекрывает верхнюю границу fieldset
  2. Есть bottom border для legend.

Итак, все что нам нужно исправить это установить ширину легенды в авто следующим образом:

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