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

Question

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?

"looks very bad as below". Is there supposed to be a screenshot? — ADyson, Dec 12 '16 at 11:21
you have an extra unclosed `
` within the main row in the first example which shouldn't be there. But other than that it looks fine - I made a quick mockup of both examples in an empty page and the layout is ok for both. You must have some other style definitions not given here which are interfering with it. If you use the dev tools in your browser and inspect the elements, looking at the "computed styles" you can see which style definitions are affecting the various properties of the elements. — ADyson, Dec 12 '16 at 11:46
Ok. Thank you @ADyson !!. I will check with dev tools and update :) but in case some other style definitions not given here which are interfering , what shoud i do? how do i avoid them from interfering ? — user2082630, Dec 12 '16 at 12:06
it depends what they are, and whether they are important somewhere else in your site. If they are not being used, you can remove them from your page, or you could modify them (assuming it wouldn't adversely affect other parts of your application). As a last resort, if there are styles which are in direct conflict with the styles declared in your example, you could mark all of your styles with `!important` so that the browser definitely uses those ones. — ADyson, Dec 12 '16 at 12:17
@ADyson I could not identify the exactly cause. Is it possible to use any other way to force this controls not to use the parent styling — user2082630, Dec 12 '16 at 15:15
why couldn't you identify it? You can use the dev tools to remove other styles until it looks the way you want. Or remove CSS references from your page until it works (just leave the CSS you gave in the example, remove everything else). If you can't understand what the dev tools are telling you, then it's just trial and error. — ADyson, Dec 12 '16 at 15:21

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

0 Answers0