How to make space in the checkboxlist text created dimanically

Asked

Viewed 782 times

1

I’m trying to give a space between the checkboxlist square and the text, but it’s not working, I followed the code.

<div class="form-group">
    <asp:Label ID="Label2"   Text="" runat="server"
        CssClass="col-sm-2 control-label" />
    <div class="col-sm-10 "> 
        <asp:CheckBoxList ID="cblEscolhaDaOpcao" runat="server" 
             DataSourceID="SqlDataSource1" DataTextField="Opcao" RepeatColumns="5" Width="100%" CellSpacing="10" CellPadding="10" > 
        </asp:CheckBoxList>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
            SelectCommand="SELECT [Opcao] FROM [ComandaOpcao]">
        </asp:SqlDataSource>
     </div>
</div>

A picture of how this gettinginserir a descrição da imagem aqui

asp.net-mvc asp.net

2 answers

1


Following the answer on the link here .

You can create a Css 

 .test tr input {
            margin-right: 30px;
        }

And add to your checkboxlist via Cssclass.

  <asp:CheckBoxList ID="cblEscolhaDaOpcao" runat="server" CssClass="test" DataValueField="Codigo" RepeatDirection="Horizontal"
                DataTextField="Opcao">
            </asp:CheckBoxList>

See working here.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    <style>
        .test tr input {
            margin-right: 30px;
        }
    </style>
</head>
<body>
    <form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="CHHlRpgZ1fcj/nGoFbp8XKb51W/7QIo9OEkyUnRQPGftAqQjcjxKSvv9wYL02biZQiaWOAFQ0a/hvdBtgoK00aa8o3NF59Qug/Ox/aNTCkcc2KZTWOQEqFaZCGj50bJ/hEGoIgB8k0EnLKPZS/Gg2/yjwmGJo5Vgyvp2gf2/ymFF3MW9eytJ5k3ggbsiArpyZYsnjO7dbUAYGIgfhpXR2oS+gVIxzmpP8pS39Uo5V0H22FA0LWfApZNo+XLBvE0ARsCPRJJNDZUapqmQXpi0mFk3SkclEWlh3erqjE0qozZHfPbS9SchruSWabijDBbpDOv1tyUg5EAXrdaGFjhORCq0rQ60I+5SaEOv0HktK10=" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="C687F31A" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="ZtOBjR7he7tjyKWqoZd6L6CXsZPQ0hXlc1cUw0GqirsmZeOfvrQhr/MiTdBzuJ4gBLjL2uRNEkmQWnDyPJ0B5DP9VKv8QzUyLJ3Cxu1yIbDI7FOPyXtyZ/tYepThLCtxM9Wg1+I0zhdkQHXuujEG+kepfqOY/bk++xdcJMlf4R4=" />
</div>
        <div>
            <table id="cblEscolhaDaOpcao" class="test">
	<tr>
		<td><input id="cblEscolhaDaOpcao_0" type="checkbox" name="cblEscolhaDaOpcao$0" value="1" /><label for="cblEscolhaDaOpcao_0">Ademar</label></td><td><input id="cblEscolhaDaOpcao_1" type="checkbox" name="cblEscolhaDaOpcao$1" value="2" /><label for="cblEscolhaDaOpcao_1">Rosana</label></td><td><input id="cblEscolhaDaOpcao_2" type="checkbox" name="cblEscolhaDaOpcao$2" value="3" /><label for="cblEscolhaDaOpcao_2">Furukama</label></td>
	</tr>
</table>
        </div>

    </form>
</body>
</html>

0

You can create a class on css to leave it the way you want it checkBox.

For the example, we will add a class in the checkBoxList (CssClass="chkEscolhaOpcao") and use css to modify the style.

<asp:CheckBoxList ID="cblEscolhaDaOpcao" runat="server" 
             DataSourceID="SqlDataSource1" DataTextField="Opcao" RepeatColumns="5" Width="100%" CssClass="chkEscolhaOpcao"> 
        </asp:CheckBoxList>

And in his file css you add the style you want:

.chkEscolhaOpcao input 
{ 
    margin-left: -20px; 
}
.chkEscolhaOpcao td 
{ 
    padding-left: 20px; 
}

Browser other questions tagged asp.net-mvc asp.net

You are not signed in. Login or sign up in order to post.