Asp.net Repeater Table style to show check boxes in the rows

395 Views Asked by At

I tried few ways of implementing Asp.net Repeaterto show check boxes in the rows. But the html table is doesnt seem to work as expected. Could anyone please help?

 <icw:Form runat="server" Caption="Action Options" ID="Form2">
                            <p>
                                Tick or un-tick roles to allow/disallow compact view</p>
                            <div style="width: 60%;">
                                <div>
                                    <span class="headercell">Action Name</span> 
                                    <span class="headercell">Include on menu</span>
                                    <span class="headercell">Include as button(max 3)</span> 
                                    <span class="headercell">Action button text</span>
                                </div>
                                <asp:Repeater runat="server" ID="actionSettingRepeater">
                                    <ItemTemplate>
                                        <div class="row">
                                            <span class="cell">
                                                <icw:Label ID="controlAction" runat="server" Text='<%# Eval("ControlAction")%>' />
                                            </span><span class="cell">
                                                <icw:CheckBox AutoPostback="true" OnValueChanged="SettingsChanged" runat="server"
                                                    ID="buttonEnabled" Checked='<%# Eval("ButtonEnabled")%>' />
                                            </span><span class="cell">
                                                <icw:CheckBox AutoPostback="true" OnValueChanged="SettingsChanged" runat="server"
                                                    ID="menuEnabled" Checked='<%# Eval("MenuEnabled")%>' />
                                            </span><span>
                                                <icw:Label ID="actionControlText" runat="server" Text='<%# Eval("Description")%>' />
                                            </span>
                                            <asp:HiddenField runat="server" ID="drugChartSettingId" Value='<%# Eval("DrugChartSettingID") %>' />
                                            <div class="row">
                                    </ItemTemplate>
                                </asp:Repeater>
                            </div>
                        </icw:Form>

and the style applied is below

.cell{background-color: Silver;width: 25%;display: block;float: left;border:none;text-align: left;}.headercell{width: 25%;display: block;float: left; border: none;text-align: left;} .row{clear: both;height: 5em;vertical-align: middle;}

I tried with simple html table as well.

  <icw:Form runat="server" Caption="Action Options" ID="Form2">
                            <p>
                                Tick or un-tick roles to allow/disallow compact view</p>
                            <table>
                                <thead>
                                    <tr>
                                        <td>
                                            Action Name
                                        </td>
                                        <td>
                                            Include on menu
                                        </td>
                                        <td>
                                            Include as button(max 3)
                                        </td>
                                        <td>
                                            Action button text
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <asp:Repeater runat="server" ID="actionSettingRepeater">
                                        <ItemTemplate>
                                            <tr>
                                                <td>
                                                    <icw:Label ID="controlAction" runat="server" Text='<%# Eval("ControlAction")%>' />
                                                </td>
                                                <td>
                                                    <icw:CheckBox AutoPostback="true" OnValueChanged="SettingsChanged" runat="server"
                                                        ID="buttonEnabled" Checked='<%# Eval("ButtonEnabled")%>' />
                                                </td>
                                                <td colspan="1">
                                                    <icw:CheckBox AutoPostback="true" OnValueChanged="SettingsChanged" runat="server"
                                                        ID="menuEnabled" Checked='<%# Eval("MenuEnabled")%>' />
                                                </td>
                                                <td>
                                                    <icw:Label ID="actionControlText" runat="server" Text='<%# Eval("ControlText")%>' />
                                                    <%--<label><%# Eval("Description")%></label>--%>
                                                </td>
                                                <asp:HiddenField runat="server" ID="drugChartSettingId" Value='<%# Eval("DrugChartSettingID") %>' />
                                            </tr>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </tbody>
                            </table>
                        </icw:Form>

still table alignment looks very bad as below. Could anyone please help?

enter image description here

0

There are 0 best solutions below