469,360 Members | 1,774 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,360 developers. It's quick & easy.

Vertical Alignment and TextBox size

BeemerBiker


Unaccountably, I cannot set the height of the textbox when using pixels. I wanted the height to match the xx-small font, about "14px", but I found that I had to use "40%" for the height. The "14px" actually worked in the design view, but not at runtime.

So why was the "px" ignored at runtime, but the % worked fine?
Is there an equivalent float for the vertical?

I also plan to use a hovering clickable tooltip (eventually) for the sql filter selections instead of having those start/stop boxes next to the large report buttons. For now, I just want to get it to work and can add the hover stuff later.

thanks again
Mar 23 '09 #1
20 19122
Frinavale
9,735 Expert Mod 8TB
As far as I know there is no easy way to align things vertically.

You could do a cheat where you set the line-height the same as the height of the <div> (or Panel).....I don't know if this'll work with your button though.

All of your questions are better asked in the CSS forum :)

I've moved your question there.

PS. How did you set the Height and Width of the TextBoxes?
Please post your asp code for this.
Mar 23 '09 #2
drhowarddrfine
7,435 Expert 4TB
Can this be translated into English...um...I mean HTML? :)

Actually, can someone show the generated markup without the asp stuff.
Mar 23 '09 #3
Frinavale
9,735 Expert Mod 8TB
TextBox = <input type='text'>
Panel = <div>
Button = <input type='submit'> or <input type='button'>
Mar 23 '09 #4
David Laakso
397 Expert 256MB
Put it on a public server and provide a clickable link to it in your post. Hard enough to give an answer seeing an issue, much less wasting everyone's time trying to guess at it.
Mar 23 '09 #5
Frinavale
9,735 Expert Mod 8TB
Posting this publicly might be a problem for some ASP.NET web application developers. You will probably have a better chance asking for the HTML for the page.
Mar 23 '09 #6
David Laakso
397 Expert 256MB
Granted. Please provide the html file and the css file.
Mar 23 '09 #7
Frinavale
9,735 Expert Mod 8TB
David, do you know how to vertically align a button within a <div>?
Mar 23 '09 #8
David Laakso
397 Expert 256MB
Google. Subject line: vertically align a button
Mar 23 '09 #9
Frinavale
9,735 Expert Mod 8TB
Funny David, thanks a lot, but you could have just said you don't know off the top of your head.
Mar 24 '09 #10
drhowarddrfine
7,435 Expert 4TB
I know how but no one asked me.
Mar 24 '09 #11
Frinavale
9,735 Expert Mod 8TB
I've always had problems with vertical alignment.
I've done everything from set the line-height to the height of the parent element...to placing the content in a table and using the v-align property....to using JavaScript...
Actually...I don't think I've used the "vertical-align" style on an element yet (which happens to be the most recommended solution in a google search for vertically aligning ...strange)

What would you recommend Doc?
Mar 24 '09 #12
David Laakso
397 Expert 256MB
@David Laakso
You asked an opened question. I pointed you to an open ended answer. If you would like a specific answer to a specific question then you'll have to do better than write a cursory question that begged the answers: Careful my friend! Or, I beg your pardon?
Mar 24 '09 #13
Frinavale
9,735 Expert Mod 8TB
My question:
@Frinavale
Was in reference to the original question:
@BeemerBiker
I figured that was obvious since it's in the same thread...I guess that's just how my mind works. It seems pretty specific to me.

Also, you have to keep in mind that the OP is not familiar with CSS at all. In fact, the OP didn't even know that his problem was CSS related.... seeing as I'm not an expert with CSS either, you're probably going to see some "open-ended", simple questions because we don't know what we are looking for.
Mar 24 '09 #14
drhowarddrfine
7,435 Expert 4TB
A simple example:
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. div{height:200px;width:200px;outline:1px solid}
  3. input{position:relative;top:50%}
  4. </style>
  5.  
  6. <div>
  7. <input type="radio">
  8. </div>
  9.  
There are other ways if the simple example doesn't fit.
Mar 24 '09 #15
Actually, David's advice is pretty good. First hit on teh googles:
http://www.last-child.com/using-vert...s-and-buttons/

Only the page doesn't explain anything (the worst kind of example).

I don't see what vertical align has to do with not being able to set a px height on inline inputs in a form though.
Mar 24 '09 #16
Frinavale
9,735 Expert Mod 8TB
The vertical-align style may work for images; however, it does not work for buttons (in FireFox at least).

See for yourself:
Expand|Select|Wrap|Line Numbers
  1. <div id="someDiv" style="height:200px; width:200px; border:solid 1px black;">
  2.     <input type="submit" name="someButton" value="hi" id="someButton" style="vertical-align:middle" />
  3. </div>
  4.  

The Doc's suggestion works nicely (in both FireFox and IE8 RC1):
Expand|Select|Wrap|Line Numbers
  1. <div id="someDiv" style="border: 1px solid black; height: 200px; width: 200px;">
  2.     <input id="someButton" type="submit" style="position: relative; top: 50%;" value="hi" name="someButton"/>
  3. </div>

Thanks Doc, I think I'll apply this to my solutions instead of using my current mess of attempts.
Mar 24 '09 #17
drhowarddrfine
7,435 Expert 4TB
@Frinavale
vertical-align works fine in Firefox so it may be the implementation of the button. vertical-align is an inline style only.
Mar 24 '09 #18
Thanks for reposting this to the proper forum. As far as my original post (the one at the top) I was mistaken about the %40 working but the 14px not working. They both work in the design page but neither size to 14px (or 40%) at runtime and I do not know how to fix it. It does look good enough to be used.

Thanks for the tip about the vertical-aline, but it didnt make any difference as shown here (the textbox/s are at top left, should be at middle left)



Irregardless of the height setting, the textbox seems to be fixed at "small" font size and the xx-small has too much space above and below where it resides at runtime.

Code follows. Note that the textbox height is set to 12px but any other setting makes no difference. I have put smaller, even really tiny, textboxes in an ItemTemplate so I am unsure why these textboxes that are in a panel are not the correct size. Since it shows up small enough at design time, maybe there is something in my report.aspx page that is overriding the size of the user control slqfltr.ascx page.
Expand|Select|Wrap|Line Numbers
  1. <%@ Control Language="C#" AutoEventWireup="true" CodeFile="sqlfltr.ascx.cs" Inherits="Training.sqlfltr" %>
  2. <script language="javascript" type="text/javascript" src="js/datetimepicker.js"></script>
  3. <script language="javascript" type="text/javascript">
  4. // <!CDATA[
  5.     function CallNewCal(strControl)
  6.     {   pCtrl = document.getElementById(strControl);
  7.         NewCal(pCtrl, 'mmddyyyy', false, 24);
  8.         return false;    }
  9. // ]]>
  10. </script>
  11.  
  12. <asp:Panel id="pnl4filter" runat="server" Height="45px" Width="193px" z-index="1"  
  13.         position="absolute" BackColor="#FFFFCC" Font-Names="Verdana" Font-Size="XX-Small" >
  14. <asp:Panel id="DateSelectionSection" runat="server" style="float:left;" Height="100%" Width="51%" > 
  15. <asp:Panel id="FirstGrouping" runat="server" Height="50%" Width="100%">   
  16.         <asp:TextBox id="txtDateStart" runat="server" Font-Names="Verdana" Font-Size="XX-Small"
  17.             style="width: 64px; height:12px; float:left; vertical-align:middle;" />
  18.         <asp:ImageButton ID="idCalendarS" runat="server" Font-Names="Verdana" Font-Size="XX-Small"
  19.             style="float:right; height:14px; vertical-align:middle; width: 14px; " 
  20.             ImageUrl="~/images/SmallCalendar.png" CausesValidation="False"  />
  21. </asp:Panel>
  22. <asp:Panel id="SecondGrouping" runat="server" style="float:left" Height="51%" Width="100%"> 
  23.         <asp:TextBox ID="txtDateStop" runat="server" Font-Names="Verdana" Font-Size="XX-Small"              
  24.             style="float:left; vertical-align:middle; height: 12px; width: 64px;" />
  25.         <asp:ImageButton ID="idCalendarE" runat="server" CausesValidation="False" 
  26.             Font-Names="Verdana" Font-Size="XX-Small" ImageUrl="~/images/SmallCalendar.png" 
  27.             style="float:right; height:14px; vertical-align:middle; width: 14px; " />
  28. </asp:Panel>
  29. </asp:Panel>
  30.  <asp:TextBox ID="CourseID" runat="server" Font-Names="Verdana" Font-Size="XX-Small" ToolTip="Course ID or blank for all"                   
  31.         style="z-index: 3; overflow:hidden;  top: 1px; float:right; position:relative; height: 14px; width: 45%;"  />            
  32. </asp:Panel>
  33.  
As far was why the <P> was in the original code, VS2008 constructed a blank user control for me when i added "new" and it put a <P> into the page and I thought I had to use that.

best regards.
Mar 25 '09 #19
drhowarddrfine
7,435 Expert 4TB
@wastedguitarist,
Don't hijack threads. Start your own.

@beemer,
Most people don't use .NET stuff so you need to provide the generated markup or you won't get much help.
Mar 25 '09 #20
sorry my bad, started my own
Mar 25 '09 #21

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

10 posts views Thread by Markus Ernst | last post: by
1 post views Thread by Kenneth | last post: by
1 post views Thread by gibsonsgman | last post: by
11 posts views Thread by C.W.Holeman II | last post: by
13 posts views Thread by Bill | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.