Use a legenda do conjunto de campos com autoinicialização

Estou usando o Bootstrap para minha JSPpágina.

Eu quero usar <fieldset>e <legend>para o meu formulário. Este é o meu código.

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

Estou recebendo saída como esta

Eu quero saída da seguinte maneira

Eu tentei adicionar

border:none;
width:100px;

para legend.scheduler-borderem CSS. E estou obtendo a saída esperada. Mas o problema é que eu gostaria de adicionar outro <fieldset>para outros campos. Nesse momento, a largura do texto na legenda é um problema, pois é mais longa que a 100px.

Então, o que devo fazer para obter a saída como mencionei? (Sem marcar o texto da legenda)

Isso ocorre porque o Bootstrap, por padrão, define a largura do legendelemento como 100%. Você pode corrigir isso alterando seu legend.scheduler-borderpara também usar:

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

Exemplo JSFiddle .

Você também precisará garantir que sua folha de estilo personalizada seja adicionada após o Bootstrap para evitar que o Bootstrap substitua seu estilo - embora seus estilos aqui devam ter uma especificidade maior.

Você também pode adicionar um acréscimo margin-bottom:0;a ele para reduzir a diferença entre a legenda e o divisor.

No bootstrap 4, é muito mais fácil ter uma borda no conjunto de campos que combina com a legenda. Você não precisa de css personalizado para alcançá-lo, isso pode ser feito assim:

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

que se parece com isso:

Eu tive esse problema e resolvi desta maneira:

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

Eu tinha uma abordagem diferente, usei o painel de inicialização para mostrar um pouco mais rico. Apenas para ajudar alguém e melhorar a resposta.

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

Isso dará uma olhada abaixo.

Nota: Precisamos alterar os estilos para usar diferentes tamanhos de cabeçalho.

Só queria resumir todas as respostas corretas acima em resumo. Porque eu tive que gastar muito tempo para descobrir qual resposta resolve o problema e o que está acontecendo nos bastidores.

Parece haver dois problemas do fieldset com o bootstrap:

1. A bootstrapdefine a largura para o legendcomo 100%. É por isso que sobrepõe a borda superior do fieldset.
2. Há um bottom borderpara o legend.

Portanto, tudo o que precisamos corrigir é definir a largura da legenda como automática, da seguinte maneira:

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