html5 - not - tooltip bootstrap 4

Desplegable con un formulario dentro con twitter-bootstrap

Question

Tengo un menú desplegable en mi barra superior, construido con el marco CSS de Twitter Bootstrap.

Tengo 3 problemas con él que no puedo encontrar ninguna solución para:

1. Los campos de entrada de texto y contraseña son demasiado grandes, ¿cómo puedo ajustarlos? Hacer la caja desplegable más grande también estaría bien.
2. Las etiquetas de los campos son muy oscuras, ¿cómo puedo aligerarlas un poco?
3. El menú desplegable se cierra cuando hago clic en uno de los campos. Tengo que volver a abrirlo y luego puedo escribir hasta que haga clic en el siguiente campo. Los valores se conservan incluso cuando el menú desplegable está cerrado. ¿Cómo puedo mantenerlo abierto?

Aquí hay una captura de pantalla de los problemas 1 y 2:

También aquí está el HTML para la barra superior tal como está ahora.

<div class=''topbar-wrapper''>
  <div class=''topbar''>
    <div class=''topbar-inner''>
      <div class=''container''>
        <h3>
          <a href="/">Webworld</a>
        </h3>
        <ul class=''nav''>
          <li>FILLER...</li>
        </ul>
        <ul class=''nav secondary-nav''>
          <li class=''dropdown'' data-dropdown=''dropdown''>
            <a href="#" class="dropdown-toggle">Login</a>
            <div class=''dropdown-menu'' id=''signin-dropdown''>
              <form accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40=" /></div>
                <fieldset class=''textbox''>
                  <label id=''js-username''>
                    <span>Username</span>
                    <input autocomplete="on" id="username" name="username" type="text" />
                  </label>
                  <label id=''password''>
                    <span>Passwort</span>
                    <input id="userpassword" name="userpassword" type="password" />
                  </label>
                </fieldset>
                <fieldset class=''subchk''>
                  <input name="commit" type="submit" value="Log In" />
                </fieldset>
              </form>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Los rieles necesitan entradas ocultas y se generan automáticamente.

Ya he intentado copiar la implementación del formulario de inicio de sesión que usa Twitter, pero cuando lo intenté, TopBar tiene una altura de aproximadamente 250 px y el contenido del menú desplegable está abierto, no se puede cerrar.

Hasta el momento no tengo CSS o JavaScript personalizados, excepto por el relleno superior de 40 píxeles en el cuerpo, como sugieren los documentos de arranque.

¿Puede alguien ayudarme con esto?

Answer 1

(Twitter Bootstrap 2.x)

Es posible que desee mover los contenidos de style="" a sus hojas de estilo ...

Si el usuario ingresó una contraseña incorrecta:

agregar clase open a li class="dropdown open"

y error clase a fieldset class="control-group error"

<ul class="nav pull-right">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login <b class="caret"></b></a>
    <div class="dropdown-menu">
      <form action="" id="form_login" style="margin: 0; padding: 3px 15px" accept-charset="utf-8" method="post">
        <fieldset class="control-group">
          <label for="form_email" class="control-label">Email address</label>
          <div class="controls">
            <div class="input-prepend" style="white-space: nowrap">
              <span class="add-on"><i class="icon-envelope"></i></span>
              <input type="email" name="email" id="form_email" autocomplete="on" class="span2">
            </div>
          </div>
        </fieldset>
        <fieldset class="control-group">
          <label for="form_password" class="control-label">Password</label>
          <div class="controls">
            <div class="input-prepend" style="white-space: nowrap">
              <span class="add-on"><i class="icon-lock"></i></span>
              <input type="password" name="password" id="form_password" class="span2">
            </div>
          </div>
        </fieldset>
        <label class="checkbox">
          <input type="checkbox" name="remember" value="true"> Remember me
        </label>
        <p class="navbar-text">
          <button type="submit" class="btn btn-primary">Login</button>
        </p>
      </form>
    </div>
  </li>
</ul>

No necesita ningún css o JavaScript adicional para que se vea bien (con TB2.x)

Answer 2

En caso de que no desee detener la propagación de sus eventos, o esa solución no funcionó para usted, puede agregar este código en algún lugar cerca de la inicialización del menú desplegable de arranque:

$(''html'').off(''click.dropdown.data-api'');
$(''html'').on(''click.dropdown.data-api'', function(e) {
  if(!$(e.target).parents().is(''.dropdown-menu form'')) {
    $(''.dropdown'').removeClass(''open'');
  }
});

Answer 3

Intente agregar el código a continuación en algún lugar de su javascript. Debe evitar que suceda.

  $(''.dropdown-menu'').find(''form'').click(function (e) {
    e.stopPropagation();
  });

Answer 4

Para su tercera pregunta: en su fila de código fuente de comentario bootstrap-dropdown.js

$(''html'').on(''click.dropdown.data-api'', clearMenus)

y escribe aquí esto:

$(document).bind(''click'', function(e) {
    var $clicked = $(e.target);
    if (!$clicked.hasClass("dropdown-menu") &&
            !$clicked.parents().hasClass("dropdown-menu")){
        clearMenus();
    }
});

Answer 5

Parece un problema basado en CSS que estás enfrentando.

Lo arreglé con los siguientes estilos:

#signin-dropdown {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 1em;
}
#signin-dropdown form {
    margin:0px;
}
#signin-dropdown form .textbox {
    margin-bottom:0em;
    padding-top:0em;
}

#signin-dropdown form .subchk {
    margin-bottom: 5px;
    padding-top: 8px;
}

#username, #password, #userpassword {
    color: #404040;
    float: left;
    font-size: 13px;
    line-height: 18px;
    padding-top: 0px;
    text-align: left !important;
    width: 140px;
}

Answer 6

Sobre sus preguntas 1 y 2.

1. ¿Has intentado configurar la duración de la entrada? Puede hacer esto configurando el atributo "tamaño" de la etiqueta de entrada. Puedes leer más aquí

2. ¿Intentó cambiar el estilo de la etiqueta? Por ejemplo:

<span style="color:#FFFFFF">Username </span>

Answer 7

solo agrega su contenido en la etiqueta <form></form>

Me gusta esto:

 <div class="dropdown  dropdown-scroll" id="selectedClient">
    <button class="btn btn-block btn-lg btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        انتخاب <span class="caret"></span>
 </button>
    <div class="dropdown-menu " role="menu" aria-labelledby="dropdownMenu1">
        <button type="button" class="close">&times;</button>
        <form>
            <ul>
                <li role="presentation">
                    <input id="searchSubClientInput" type="text" class="form-control" placeholder="جستجو بر اساس نام خانوادگی" ng-model="query">
                </li>
            </ul>
        </form>
  <ul class="select-list scrollable-menu">
   <li class="dropdown-header">خودم</li>
  </ul>
 </div>
</div>

Answer 8

https://github.com/twitter/bootstrap/blob/master/bootstrap.css#L1559

max-width se establece en 220px, elimina el atributo y se estirará.