Jump to content

Extra Space In Input


Recommended Posts

I have a simple box here called PanelCover. Within my box there is a form and some input areas . . . and a lot of unwanted space within the input boxes themselves. Particularly in the three date input areas. I want these to be big enough for only 2 digits for the day and the month, and only four digits for the year. I figured that maybe I needed to change my font to a fixed width, so I did. This seems to have changed only the textarea font to Courier. So I figured I'd have to tell the browser what values I wanted for the size attributes, so I did. Still too much empty space in my input box. So I tried lying to my browse, telling it I wanted to render an input box with size of 1. No change. Then I thought, 1em? no change. How about Zero! No change. Ok, so how can I

  • Change the input text area font to Courierrestrict the size to just large enough for two characters or four characters.


		#PanelCover { 			position:relative;			display:inline-block;			border:#333333 medium solid;			width:"500px";			height:"300px";			padding:"20px";			background:#CCFFFF;		}		input {				font:"Courier New", Courier, monospace;		}

And my HTML

<input type="text" value="08" maxlength="2" size="2" />⁄<input type="text" value="24" maxlength="2" size="2" />⁄<input type="text" value="1955" maxlength="4" size="4" />

Edited by george
Link to comment
Share on other sites

almost there. You have input in your CSS, but it's not defined as a class or Id, and I think it's font-family: you want, not just font....anyway, something like this:.input{font-family: Courier;width: whatever you want; //or maxlength, you can play around with this part}and then all your input boxes just need this added to them within the tagclass="input"

Link to comment
Share on other sites

input {} on its own, will! target all input tags whether of type, button, submit, hidden, image and so on.
That's what I thought. But when I tried it, as mentioned above, only the text in the textarea tag was affected with the change in font. Ok, so I will try a class associated with input, as in
		input.numbers {			font-family:"Courier New", Courier, monospace;		}

Andon the HTML side:

<input class="numbers" type="text" value="08" maxlength="2" size="2" />⁄<input class="numbers" type="text" value="24" maxlength="2" size="2" />⁄<input class="numbers" type="text" value="1955" maxlength="4" size="4" />

Oh - THAT worked. Thanks guys

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...