I have recently worked on two new themes using blueprint and I have noticed that form checkboxes and radio buttons fall out of alignment with text on the same line. The form elements fall below the text.

I was able to override some styles to get alignment to work using the code below. I also included two screenshots to help visualize the issue.

The problem is that I believe I am overriding styles in screen.css and blueprint.css. I figure this isn't ideal. Has anyone else seen this? Thanks much!

input[type=checkbox], input[type=radio], input.checkbox, input.radio {
position: relative;
top: 0;
}

textarea, input {
vertical-align: inherit;
}

Comments

designerbrent’s picture

Version: 6.x-1.5 » 6.x-2.x-dev
Status: Active » Fixed

Thanks for submitting this and you are not the first. I have gone ahead and fixed this in the 2.x version, even though this really is an upstream problem in Blueprint. Hopefully it can be removed eventually.

#491052: Radio's & checkbox baseline alignment

designerbrent’s picture

Version: 6.x-2.x-dev » 6.x-1.6

I have just committed a temporary fix for this to the 1.x and the 1.6 versions as well.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

designerbrent’s picture

Version: 6.x-1.6 » 6.x-2.x-dev

This is now fixed permanently with the Blueprint Framework 1.0 version and changes just committed to the 6.x-2.x-dev branch.