Fixing Short Select Box with CSS3

Posted on:

Problem

Select boxes don't line up with other inputsI've set all of my inputs, textareas and select boxes to 230px and yet…

So lets say you wanna hook up a form with consistent input sizes and you'd like for them all to match. You would likely write something similar to the following css to achieve the goal. One would think that by assigning identical width values to both inputs and selects that they would be the same size when rendered in the browser. However this proves to not always be the case.

#MyForm input,
#MyForm select,
#MyForm textarea{
    width:230px;
    /* my awesome style */
}

Resolution

So, how do we fix it? Well there are a number of options that I don't like, and one that I do. If you wanna know what the other options are look-em up. However I warn you they suck and may leave you sucking too, so without further ado.

input, select, textarea{
	width:230px;
	-moz-box-sizing:border-box; /* FireFox */
	-webkit-box-sizing:border-box; /* Safari & Chrome */
	-ms-box-sizing:border-box;/* IE 8 */
	box-sizing:border-box; /* opera, IE 9 and other css3 standard compliant browsers */
}

Why?

The Box Model

I'm not the kind'a guy that can simply copy and paste code. I need to know why it was necessary in the first place. So if you're like me and enjoy honing your ninja skills, lets find out why these selects are so un-ninjaly. The truth is select boxes are made of leftover lasagna and week old cheese… Well ok, it's not quite that gross, but almost. When browsers render elements they uses the box model to determine how to display the element in relation to other elements. So apparently the select (and the textarea) use a different methods for interpreting the box model than inputs making them appear shorter. This is where our friendly new CSS3 propery box-sizing saves the day as it allows us to force the (compliant) browser to use what portion of the box-model we want it to use.

Final Remarks

Check out the fairly drastic difference a little box sizing will makeThe Boss Ninja and The Box Model

Now there is a ton more going on here than I've gone into for the sake of this little post. If you want to know more about the box-model and what exactly is going on behind the scenes when you muck around with the box-sizing property check out the articles in the links below. I did make a little box-sizing comparison graphic that almost does the madness justice, you'll find it to the right. I hope this was helpful and I look forward to your comments.

Links

zp8497586rq

Enable the Beta Facebook Timeline

Posted on:

Facebook's new timeline profile is simply gorgeous. Being a google fanboy myself this is a hard thing to admit as I think it's going to give Facebook a leg up on them in the social network race. Anyway a lot of folks are still waiting on Facebook to take it out of beta. I was under the impression it was supposed to happen this week. appearently there's a delay ao here's a quick tutorial on how to get a sneak peak into the future of Facebook before it's a global reality.

adobe reader software

Verify your Account

Facebook mobile settings tab

install the Facebook Apps appOpen the mobile tab in your Facebook settings

Now you'll need to verify your Facebook account. This is accomplished by verifying a mobile phone in your Facebook account settings mobile tab. If you don't have a phone already attached to your account and want to add one you can simply follow the instructions after clicking the “Add a Phone” button under the mobile settings tab. However I'm not going into that in this tutorial.

add a phone

install the Facebook Apps appOpen the mobile tab in your Facebook settings

After you've verified that you are in fact yourself by inserting your password in the indicated field, you'll see a new dialog box “(Step 1 of 2)”. Since we only want to verify our account click the link at the bottom of the box under the “Mobile Carrier” drop down and begin the verification process. Don't worry if you want to add the number to your account you can do it at the end of this process.

send verification code sms

put a phone number in that you have access to immediately

Put your phone number in the dialog and verify that “send me a text” is checked then click continue.

Enter the confirmation code into the Facebook dialog

Facebook will at this point send your mobile a text message containing a confirmation code and open a new dialog box. Simply enter the confirmation code in the dialog box, click continue. If you didn't get a code click the link titled “I didn't get my code” under the input field and follow the instructions again.

Become a Facebook Developer

install the Facebook Apps app

install the Facebook Apps appFirst You need to install the Facebook Apps app

You need to turn your Facebook account into a Facebook developer account. You do this by pointing your browser to the Facebook Developer website and clicking the “Apps” link in the top right. Now simply allow the Facebook Apps app access to your soul and all of your private thoughts.

create a Facebook app

click the create new app and give your creation a name

Now we need to create a Facebook app. Don't worry, we're not going to write any code, this is just a required step. start by clicking the “+ Create New App” button in the top right. Then give your new application a snazzy name as all things that will never be seen need good names. Once you've been redirected to the applications dashboard, click on the “Open Graph” and give your application an action and thats it. You are now a Facebook developer.

Enter The Timeline!

click the create new app and give your creation a name

So your a Facebook developer now and your account is verified so we're ready to enable the timeline! Simply point your browser back to your profile and you'll see a large notification at the top. Click “Get it Now” and enjoy…

Publish It!

To make your timeline stick you have to publish it. You do this by pressing the button in a notification block (similar to the “Get it Now” notification) at the top of your timeline (above your cover image).

If someone would send me a screen-cap of this notification I'd put it up and give you a shout out.

zp8497586rq

Hello world!

Posted on:

Welcome to BOSSNINJA.com. This will be a place to showcase all my funky works and some of my private thoughts. So you’ve been warned.

I will also showcase websites and mobile applications I build. I’m busy and have a Playstation problem so don’t be surprised if this place goes weeks with no updates.

narrative essays

I’m also keeping the “Hello World” post as a tribute to WordPress and it’s community.