CODEWITHSUNDEEP
htmlcsswebforms
Michael
Michael

Reputation: 13636

How to move button left inside table

I have this ASP code:

 <asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
        <ItemTemplate>
            <div class="row1">
                <table style="cursor: pointer; width: 100%">
                    <tr>
                        <td rowspan="4">
                            <asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
                                Height="32" /></td>
                    </tr>
                    <td rowspan="10">
                        <input type="button" id="ddd" value="B" style="height:30px" />
                    </td>
                    </tr>
                    <tr>
                        <td>text:</td>
                        <td rowspan="4">
                            <h1 style="color: gray"><%# Eval("Text") %></h1>
                        </td>
                    </tr>
                    <tr class="hidden">
                        <td>text:</td>
                        <td><%# Eval("Text") %></td>
                    </tr>
                    <tr class="hidden">
                        <td>X:</td>
                        <td><%# Eval("Lon") %></td>
                    </tr>
                    <tr class="hidden">
                        <td>Y:</td>
                        <td><%# Eval("Lat") %></td>
                    </tr>
                    <tr>
                </table>
            </div>
        </ItemTemplate>
        </asp:Repeater>

I bind a repeater in server side to the data source:

PervousResultsList.DataSource = _marker.GetPervousResults();
PervousResultsList.DataBind();

Here is how it looks in view:

enter image description here

How can I move button B to the left that it will looks like this: enter image description here

Upvotes: 0

Views: 88

Answers (2)

Felipe Correa
Felipe Correa

Reputation: 693

I Think what you could do is take the table definition outside of the repeater and define your table rows right.

Try this and let me know if it helps (I didn't test the code):

<table style="cursor: pointer; width: 100%">
    <tr>
        <td>Header</td>
        <td>Header</td>
        <td>Header</td>
        <td>Header</td>
        <td>Header</td>
        <td>Header</td>
    </tr>
    <asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
        <ItemTemplate>
            <tr>
                <td>
                    <input type="button" id="ddd" value="B" style="height:30px" />
                </td>
                <td>
                    <asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32" Height="32" />
                </td>
                <td>
                    <h1 style="color: gray"><%# Eval("Text") %></h1>
                </td>
                <td>
                    <%# Eval("Text") %>
                </td>
                <td>
                    <%# Eval("Lon") %>
                </td>
                <td>
                    <%# Eval("Lat") %>
                </td>
            </tr>
        </ItemTemplate>
    </asp:Repeater>
</table>

In the code the repeater will create only the table rows in each iteration. You define the table and header outside of the repeater because otherwise you would be creating a new table for each iteration. Aditionally, a <tr> defines a row.

Upvotes: 0

Mucahid Uslu
Mucahid Uslu

Reputation: 417

<table style="cursor: pointer; width: 100%">
    <asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
        <itemtemplate>
            <div class="row1">
                <tr>

                    <td rowspan="10">
                        <input type="button" id="ddd" value="B" style="height:30px" />
                    </td>

                    <td rowspan="4">
                        <h1 style="color: gray"><%# Eval("Text") %></h1>
                    </td>

                    <td>text:</td>

                    <td rowspan="4">
                        <asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
                                   Height="32" />
                    </td>


                </tr>

                <tr class="hidden">
                    <td>text:</td>
                    <td><%# Eval("Text") %></td>
                </tr>
                <tr class="hidden">
                    <td>X:</td>
                    <td><%# Eval("Lon") %></td>
                </tr>
                <tr class="hidden">
                    <td>Y:</td>
                    <td><%# Eval("Lat") %></td>
                </tr>

            </div>
        </itemtemplate>
    </asp:Repeater>
</table>

Upvotes: 1

Related Questions