web-dev-qa-db-fra.com

afficher radiobuttonlist inline

J'ai quelques radiolists sur ma page. Le problème auquel je suis confronté est que le texte des boutons radio ne sont pas affichés en ligne du bouton radion. J'ai mis le repeatLayout à Table and Flow et aucun ne fonctionne. J'ai essayé d'ajouter un style d'affichage: inline; mais cela ne fonctionne pas non plus (bien que ce soit le cas et que je pensais que cela fonctionnerait peut-être aussi ici).

Ceci est juste une radiolist normale:

<asp:RadioButtonList ID="radRace" CssClass="radioButtonList" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem>Race 1</asp:ListItem>
    <asp:ListItem>Race 2</asp:ListItem>
    <asp:ListItem>Race 3</asp:ListItem>
    <asp:ListItem>Race 4</asp:ListItem>
</asp:RadioButtonList>

ul.radioButtonList { list-style:none; margin: 0; padding: 0;}
ul.radioButtonList.horizontal li { display: inline;}

Quand le repeatLayout est sur la table:

enter image description here

Et quand le repeatLayout est sur Flow:

enter image description here

Quelqu'un peut-il m'aider, s'il vous plaît, à régler le texte de sorte que le texte soit affiché à côté du bouton radio ... Si cela fait une différence, radioButtonList est dans un tableau ....

SOLUTION:

Voici à quoi ressemble la liste de boutons radio:

<asp:RadioButtonList ID="radRace" CssClass="radioButtonList" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem>Race 1</asp:ListItem>
    <asp:ListItem>Race 2</asp:ListItem>
    <asp:ListItem>Race 3</asp:ListItem>
    <asp:ListItem>Race 4</asp:ListItem>
</asp:RadioButtonList>

Et voici la cssClass:

<style type="text/css">
    .radioButtonList { list-style:none; margin: 0; padding: 0;}
    .radioButtonList.horizontal li { display: inline;}

    .radioButtonList label{
        display:inline;
    }
</style>
asp.netcssradiobuttonlist
21
Kerieks

Essaye ça:

.radioButtonList label{
    display:inline;
}

fonctionne pour moi, mais si cela ne fonctionne pas pour vous, vous pouvez essayer cette solution http://forums.asp.net/t/1089664.aspx/1

Il affiche l'entrée et l'étiquette sous forme de bloc et les fait flotter.

13
prospector

Vérifiez la solution proposée par Aroon Soraali:

<asp:RadioButtonList RepeatDirection="Horizontal" ID="rblFilterType" runat="server"/>
33
Nuno Ribeiro

Si vous ajoutez une liste de cases à cocher ou de radiobuttonlist ASP.NET à une page avec "RepeatLayout = Flow", une balise "span" non stylisée entoure une série de balises "input" et "label" (pour chaque "ListItem").

Pour Bootstrap 4, la solution la plus simple semble être d'ajouter une classe personnalisée à la liste et d'ajouter du code CSS pour les éléments "input" et "label" de cette classe. Notez que vous avez uniquement besoin de "RepeatLayout = Flow" qui supprime tout formatage généré par ASP.NET. 

Par exemple, le RBL suivant:

<asp:RadioButtonList runat="server" ID="rblContact" RepeatLayout="Flow"  CssClass="form-inline bootRBL">
  <asp:ListItem Value="0" Text="Email" Selected="True"  />
  <asp:ListItem Value="1" Text="Phone"  />
</asp:RadioButtonList>

utilise la classe personnalisée "bootRBL" et rend une série d'éléments en ligne avec un espacement correct entre l'entrée et les étiquettes.

<style type="text/css">
    .bootRBL input {display:inline;margin-right:0.25em;}
    .bootRBL label {display:inline;margin-right:1em;}
</style>
<span id="rblContact" class="form-inline bootRBL">
			<input id="rblContact_0" type="radio" name="rblContact" value="0" checked="checked" />
			<label for="rblContact_0">Email</label>
			<input id="CrblContact_1" type="radio" name="rblContact" value="1" />
			<label for="rblContact_1">Phone</label>
</span>

1
dotnetnoob