CODEWITHSUNDEEP
htmlcssasp.net
President Camacho
President Camacho

Reputation: 1910

Change position of a control in <tr> relative to other controls

I got this gui:

enter image description here

but I want this:

enter image description here

Code for picture nr1:

<tr>
    <td colspan ="3">
        <asp:ListBox ID="tr_process_list" runat="server" Rows="10" style="width:180px;" OnInit="tr_process_list_Init" SelectionMode="Multiple">
        </asp:ListBox>
        <asp:Button runat="server" ID="addProcess" Text="Add" OnClick="addProcess_Click"/>
        <asp:Button runat="server" ID="removeProcess" Text="Remove" OnClick="removeProcess_Click" />
        <asp:ListBox ID="tr_process_selectedlist" runat="server" Rows="10" style="width:180px;" OnInit="tr_process_selectedlist_Init" OnSelectedIndexChanged="tr_process_selectedlist_SelectedIndexChanged" AutoPostBack="true">
        </asp:ListBox>
     </td>
</tr>

How is this possible?

Upvotes: 0

Views: 57

Answers (2)

Marc Audet
Marc Audet

Reputation: 46795

If you can modify the HTML, add a wrapping element around the buttons and try the following CSS.

The trick is to add a wrapping element that is an inline-block. Within the inline-block, you can use display: block on the buttons with margin left/right auto to center them.

You can specify a width or padding to style the white space as needed.

If your textarea elements are tall enough, you can vertically center the labels by specifying vertical-align: middle to the two textarea elements and the .inline-panel element.

/* Example for large text area panels */
td { 
  border: 1px dotted gray;
}
td textarea {
  height: 200px; /* for example */
  vertical-align: middle;
}

.inline-panel {
  border: 1px dotted blue;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 8em; /* optional */
  padding-bottom: 0em; /* optional */
}
.inline-panel button {
  display: block;
  margin: 10px auto; /*left right values of auto for centering */
}
<table>
  <tr>
    <td>
      <textarea></textarea>
      <div class="inline-panel">
        <button>View</button>
        <button>Reset</button>
      </div>
      <textarea></textarea>
    </td>
  </tr>
</table>

Upvotes: 1

Emre
Emre

Reputation: 573

why dont you divide your row into 3?

<tr>
    <td>
        <asp:ListBox ID="tr_process_list" runat="server" Rows="10" style="width:180px;" OnInit="tr_process_list_Init" SelectionMode="Multiple">
        </asp:ListBox>
    </td>
    <td>
        <asp:Button runat="server" ID="addProcess" Text="Add" OnClick="addProcess_Click"/>
        <asp:Button runat="server" ID="removeProcess" Text="Remove" OnClick="removeProcess_Click" style="clear:both;" />
    </td>
    <td>
        <asp:ListBox ID="tr_process_selectedlist" runat="server" Rows="10" style="width:180px;" OnInit="tr_process_selectedlist_Init" OnSelectedIndexChanged="tr_process_selectedlist_SelectedIndexChanged" AutoPostBack="true">
        </asp:ListBox>
     </td>
</tr>

Upvotes: 1

Related Questions