Update Omega Core Contact and User Login Form Styling [#1481234]

Working on a couple sites I've noticed the core omega styling doesn't adapt the basic contact form for mobile styling. Adding in the following seems to keep the basic styling in place but allows it to adapt well to the mobile screen sizes.

.contact-form .form-item {
float: left;
}
.contact-form .form-text, .contact-form .form-select {
width: 100%;
}
.contact-form .form-actions {
float: left;
margin-left: 40px;
}

Himerus - what do you think about including this into omega's optional css to keep some of the base styling consistent with responsive?

Comment	File	Size	Author
#10	omega-contact_form3-1481234.patch	886 bytes	Cellar Door
#8	omega-contact_form2-1481234.patch	814 bytes	Cellar Door
#6	omega-contact_form-1481234.patch	829 bytes	Cellar Door

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

Cellar Door CreditAttribution: Cellar Door commented 14 March 2012 at 03:39

Forgot to add the clear to global.css it should go:

.contact-form .form-item {
float: left;
clear: left;
}

In default.css it should then have:

.contact-form .form-item {
clear: none;
margin-left:5%;
width: 40%;
}

IMHO this makes the contact form much more attractive as it uses up all the available space, and stays responsive on mobile.

Comment #2

Cellar Door CreditAttribution: Cellar Door commented 14 March 2012 at 03:49

And just for commonality I just found this change in the form-action to match the rest in margin.

in global.css:

.contact-form .form-actions {
float: left;
margin-left: 5%;
}

So to make it less confusing (which I'm sure it is after all this)

In global.css:

.contact-form .form-item {
float: left;
clear: left;
}
.contact-form .form-text, .contact-form .form-select {
width: 100%;
}
.contact-form .form-actions {
float: left;
margin-left: 5%;
}

in default.css

.contact-form .form-item {
clear: none;
margin-left:5%;
width: 40%;
}

Alright, after confusing even myself I'm going to stop for the night. Let me know what y'all think about the styling.

Comment #3

Cellar Door CreditAttribution: Cellar Door commented 14 March 2012 at 18:23

Title:

Update Omega Core Contact Form Styling

» Update Omega Core Contact and User Login Form Styling

And now for the User login form:

global.css

#user-login .form-text {
width: 100%;
}

default.css

#user-login .form-text {
width: auto;
}

Simple but it makes these work much better on mobile.

Comment #4

Cellar Door CreditAttribution: Cellar Door commented 13 July 2012 at 19:28

Category:	bug	» feature
Status:	Active	» Reviewed & tested by the community

Should this be in 3.2? Not sure if it will effect sites already in existence but will help fix ones that haven't addressed it.

Comment #5

markwk CreditAttribution: markwk commented 17 July 2012 at 07:47

Status:

Reviewed & tested by the community

» Active

i have the same issue and I've had it on other projects. To be honest, you should update the original issue to reflect your solution or post a patch.

Comment #6

Cellar Door CreditAttribution: Cellar Door commented 17 July 2012 at 18:53

File	Size
omega-contact_form-1481234.patch	829 bytes

Let's see if this passes testing.... I know a few haven't lately. I changed the core Omega CSS file omega-forms.css and added a media query for it to work w/ the standard formats. This should allow for most use cases and since it's in the omega-forms.css its easily disabled and/or overwritten.