web-dev-qa-db-fra.com

Liste déroulante avec un formulaire à l'intérieur avec Twitter-bootstrap

J'ai une liste déroulante dans mon TopBar, construite avec le framework CSS Twitter Bootstrap.

J'ai 3 problèmes avec lesquels je ne trouve aucune solution:

  1. Les champs de saisie de texte et de mot de passe sont beaucoup trop grands, comment puis-je les ajuster? Il serait également possible d'agrandir la liste déroulante.
  2. Les étiquettes des champs sont trop sombres, comment puis-je les éclaircir un peu?
  3. La liste déroulante se ferme lorsque je clique sur l'un des champs. Je dois le rouvrir et puis je peux taper jusqu'à ce que je clique dans le champ suivant. Les valeurs sont conservées même lorsque la liste déroulante est fermée. Comment puis-je le faire rester ouvert?

Voici une capture d'écran des problèmes 1 et 2:

Screenshot of my problems 1 and 2

Voici également le code HTML pour le TopBar tel qu'il est maintenant.

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

Il y a une entrée cachée par Rails et généré automatiquement.

J'ai déjà essayé de copier l'implémentation du formulaire de connexion que Twitter utilise, mais quand j'ai essayé cela, le TopBar mesure environ 250 pixels et le contenu de la liste déroulante est ouvert, pas refermable.

Je n'ai pas de CSS ou JavaScript personnalisé jusqu'à présent, à l'exception du rembourrage supérieur de 40 pixels dans le corps comme suggéré par les documents bootstrap.

Quelqu'un peut il m'aider avec ça?

html5css3twitter-bootstrapdrop-down-menu
46
NobbZ

Essayez d'ajouter le code ci-dessous quelque part dans votre javascript. Cela devrait l'empêcher de se produire.

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

(Twitter Bootstrap 2.x)

Vous pouvez déplacer le contenu de style="" à vos feuilles de style ...

Si l'utilisateur a entré un mot de passe incorrect:

ajoutez la classe open à li class="dropdown open"

et classe error à 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>

Vous n'avez pas besoin de css ou de javascript supplémentaires pour rendre ce look agréable (avec TB2.x)

8
Mike

Dans le cas où vous ne souhaitez pas arrêter la propagation de vos événements, ou si cette solution ne fonctionne pas pour vous, vous pouvez ajouter ce code quelque part près de l'initialisation de bootstrap-dropdown:

$('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');
  }
});
7
Michael Grischenko

Pour votre troisième question - Dans votre ligne de code source de commentaire bootstrap-dropdown.js

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

et écrivez-y ceci:

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

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

max-width est défini sur 220px, supprimez l'attribut et il s'étirera.

5
DregondRahl

Cela ressemble à un problème basé sur CSS auquel vous êtes confronté.

Je l'ai corrigé avec les styles suivants:

#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;
}
2
guruguldmand

À propos de vos questions 1 et 2.

  1. Avez-vous essayé de régler la longueur de l'entrée? Vous pouvez le faire en définissant l'attribut "taille" de la balise d'entrée. Vous pouvez en savoir plus ici

  2. Avez-vous essayé de changer le style de l'étiquette? Par exemple:

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

vous venez d'ajouter votre contenu dans <form></form> tag

comme ça:

 <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>
0
porya ras