CODEWITHSUNDEEP
htmlcssasp.net-mvcrazor
Umit Kaya
Umit Kaya

Reputation: 5951

Cshtml button alignment top and bottom

I have 3 buttons in a popup form. I want to align first button at the top and other two together at the second line/row. I have implemented the below method and failed where top button is top but not wrap the content and two buttons at the bottom mesh together. How i can manipulate the buttons?

This is my html:

<div>
<table>
<tr><td colspan="2"><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn1</a></td></tr>
<tr>
<td><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn2</a></td>
<td><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn3</a></td>
</tr>
</table> 
</div>

How they look like:

enter image description here

Thank you.

Upvotes: 0

Views: 1248

Answers (1)

pjmil
pjmil

Reputation: 2097

The main problem you're having here is that you are trying to apply styles from the #acc_popup CSS selector to multiple elements on the same page.

id tags need to be unique in the DOM structure, and multiple occurrences of them will cause your styles or scripts to apply only to the first occurrence of the id.

Swap the id for a class.

In the HTML:

<td><a href="#" class="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn</a></td>

In the CSS:

.acc_popup {
   //styles go here
}

Edit:

Now since you've informed us you're not doing this with css. This should do what you want.

Wrap the first button in a <td> and add colspan=2 to that element. If it isn't blatantly clear, this makes the table cell span 2 columns instead of the default 1.

<div>
  <table>
    <tr>
      <td colspan="2"><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn1</a></td>
    </tr>
    <tr>
      <td><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn2</a></td>
      <td><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn3</a></td>
   </tr>
  </table> 
</div>

Upvotes: 1

Related Questions