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

[Frinavale]

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.

[drhowarddrfine]

Can this be translated into English...um...I mean HTML? :)

Actually, can someone show the generated markup without the asp stuff.

[Frinavale]

TextBox = <input type='text'>
Panel = <div>
Button = <input type='submit'> or <input type='button'>

[David Laakso]

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.

[Frinavale]

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.

[David Laakso]

Granted. Please provide the html file and the css file.

[Frinavale]

David, do you know how to vertically align a button within a <div>?

[David Laakso]

Google. Subject line: vertically align a button

[Frinavale]

Funny David, thanks a lot, but you could have just said you don't know off the top of your head.

[drhowarddrfine]

I know how but no one asked me.

[Frinavale]

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?

[David Laakso]

@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?

[Frinavale]

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.

[drhowarddrfine]

A simple example:

<style type="text/css">
div{height:200px;width:200px;outline:1px solid}
input{position:relative;top:50%}
</style>
 
<div>
<input type="radio">
</div>
 

There are other ways if the simple example doesn't fit.

[Stomme poes]

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.

[Frinavale]

The vertical-align style may work for images; however, it does not work for buttons (in FireFox at least).

See for yourself:

<div id="someDiv" style="height:200px; width:200px; border:solid 1px black;">
    <input type="submit" name="someButton" value="hi" id="someButton" style="vertical-align:middle" />
</div>
 

The Doc's suggestion works nicely (in both FireFox and IE8 RC1):

<div id="someDiv" style="border: 1px solid black; height: 200px; width: 200px;">
    <input id="someButton" type="submit" style="position: relative; top: 50%;" value="hi" name="someButton"/>
</div>

Thanks Doc, I think I'll apply this to my solutions instead of using my current mess of attempts.

[drhowarddrfine]

@Frinavale
vertical-align works fine in Firefox so it may be the implementation of the button. vertical-align is an inline style only.

[BeemerBiker]

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.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="sqlfltr.ascx.cs" Inherits="Training.sqlfltr" %>
<script language="javascript" type="text/javascript" src="js/datetimepicker.js"></script>
<script language="javascript" type="text/javascript">
// <!CDATA[
    function CallNewCal(strControl)
    {   pCtrl = document.getElementById(strControl);
        NewCal(pCtrl, 'mmddyyyy', false, 24);
        return false;    }
// ]]>
</script>
 
<asp:Panel id="pnl4filter" runat="server" Height="45px" Width="193px" z-index="1"  
        position="absolute" BackColor="#FFFFCC" Font-Names="Verdana" Font-Size="XX-Small" >
<asp:Panel id="DateSelectionSection" runat="server" style="float:left;" Height="100%" Width="51%" > 
<asp:Panel id="FirstGrouping" runat="server" Height="50%" Width="100%">   
        <asp:TextBox id="txtDateStart" runat="server" Font-Names="Verdana" Font-Size="XX-Small"
            style="width: 64px; height:12px; float:left; vertical-align:middle;" />
        <asp:ImageButton ID="idCalendarS" runat="server" Font-Names="Verdana" Font-Size="XX-Small"
            style="float:right; height:14px; vertical-align:middle; width: 14px; " 
            ImageUrl="~/images/SmallCalendar.png" CausesValidation="False"  />
</asp:Panel>
<asp:Panel id="SecondGrouping" runat="server" style="float:left" Height="51%" Width="100%"> 
        <asp:TextBox ID="txtDateStop" runat="server" Font-Names="Verdana" Font-Size="XX-Small"              
            style="float:left; vertical-align:middle; height: 12px; width: 64px;" />
        <asp:ImageButton ID="idCalendarE" runat="server" CausesValidation="False" 
            Font-Names="Verdana" Font-Size="XX-Small" ImageUrl="~/images/SmallCalendar.png" 
            style="float:right; height:14px; vertical-align:middle; width: 14px; " />
</asp:Panel>
</asp:Panel>
 <asp:TextBox ID="CourseID" runat="server" Font-Names="Verdana" Font-Size="XX-Small" ToolTip="Course ID or blank for all"                   
        style="z-index: 3; overflow:hidden;  top: 1px; float:right; position:relative; height: 14px; width: 45%;"  />            
</asp:Panel>
 

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.

[drhowarddrfine]

@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.

[wastedguitarist]

sorry my bad, started my own