2017-07-21 1 views
0

Remarque, ce n'est pas juste un autre message "margin-right". Select2 semble me baiser.Comment mettre le bouton juste à côté de selectbox? (Formatage jQuery-Select2)

J'ai une forme qui ressemble à ceci:

Form

Et voici ce qu'elle ressemble à une erreur — l'adresse email incorrecte est correctement formaté.

Form2

Il est évident que le bouton New devrait être à côté du menu déroulant patient.


Voici le problème:
Lorsque vous dites Select2 pour faire son travail sur un select, il se cache cet élément et ajoute plusieurs de ses propres éléments imbriqués pour le remplacer. Cependant, les classes que vous placez sur le select ne sont pas transférées vers ces éléments générés. J'ai défini margin-right:100% pour .select2-container, qui gère l'espacement. C'est pour éviter le comportement dans la deuxième capture d'écran. Je ne connais pas d'autre moyen de forcer le message d'erreur sur la ligne suivante.

Si je règle margin-right:0px, le bouton se place à côté de la liste déroulante, comme je le veux, mais le message d'erreur se trouve également à côté de celui-ci (photo ci-dessus).

source HTML image du bas: (je signale la source pour la deuxième image, car il montre à la fois ce que je veux et ce que je ne veux pas):

<div class="form-group"> 
    <label class="control-label col-md-2" for="Email">Email Address</label> 
    <div class="col-md-10"> 
     <input class="form-control text-box single-line" data-val="true" data-val-regex="Invalid email format" data-val-regex-pattern=".*" data-val-required="The Email Address field is required." id="Email" name="Email" type="email" value="" /> 
     <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span> 
    </div> 
</div> 

This code markup est directement au-dessous. Les trucs select2 n'apparaissent pas dans view-source, d'où la capture d'écran.


Fix que je voudrais éviter:
je pouvais mettre margin-right:0px, puis envelopper les dizaines d'autres boîtes de sélection dans un div qui a margin-right:100%, mais ce serait une douleur qui fait rage dans le cul .


tentative de solution qui ne fonctionne pas: Réglage margin-left:100% ou margin-left:600px, etc. sur la classe d'erreur.


Résumé: je dois mettre le bouton New juste à côté du menu déroulant Select a patient..., mais je ne veux pas avoir accès au style pour le menu déroulant.


Si cela fait une différence, j'utilise ASP.NET MVC avec Bootstrap.

+0

Qu'en est-il simplement d'envelopper l'élément '