• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 329
  • Last Modified:

How to adjust UI postion

I added two controls in a table:

                         <td align="center" class="style2">
                            <asp:Label ID="lblVarianceNo" runat="server" Text="Not Available"></asp:Label>
                            <asp:ImageButton ID="ImageBtnVarianceNo" OnClick="ImageBtnVarianceNo_Click" ImageUrl="~/Images/delete.jpg" AlternateText="delete" ImageAlign="Right" runat="server" />
                        </td>


        .style2
        {
            width: 150px;
            height:30px;
           
        }


But these two controls postions are not on the same level. I tried align and valign. It does not work. result like:

VarianceNo
                         X

Thanks!!!

0
jssong2000
Asked:
jssong2000
  • 2
  • 2
1 Solution
 
Saqib KhanSenior DeveloperCommented:
You need to put them in two different TD's.

                       <td valign="top">
 align="center" class="style2">
                            <asp:Label ID="lblVarianceNo" runat="server" Text="Not Available"></asp:Label>
                      </td><td valign="top">
                            <asp:ImageButton ID="ImageBtnVarianceNo" OnClick="ImageBtnVarianceNo_Click" ImageUrl="~/Images/delete.jpg" AlternateText="delete" ImageAlign="Right" runat="server" />
                        </td>

0
 
remorinaCommented:
Hi jssong2000,
The ASP label renders as a span while the imagebutton renders as an image input
There are two ways to align the image input with the span, either using floats and margins or line-height.
I'd go for the line height when it's not a complicated structure and multiple lines.

Try using the below CSS which would make them line up nicely, I'm assuming that your image's height is 30px.

.style2
      {
          width: 150px;
          height:30px;
      }
.style2 span 
      {
          line-height:30px;
      }

Open in new window

0
 
jssong2000Author Commented:
Hi remorina,
Thank you for your code. But span does not work. I tried float and margin. I really don't know how to make it work.
0
 
remorinaCommented:
That's odd, Well it's always best if you can provide a link so we can see the rendered code and be able to help further.
You may try assigning the line height to the style2 class instead, might do the job but depends on the rendered code and structure as sometime ASP.NET renders a different HTML element depending on data etc..

.style2
      {
          width: 150px;
          height:30px;
          line-height:30px;
      }

Open in new window


Cheers
0
 
jssong2000Author Commented:
that's helpful. Thanks!!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now