Using the Sky theme (7.x-3.0-rc1) I am having difficulty getting form labels (generated by the webform module) to be displayed correctly inline, rather than above the field.

Regardless of whether I set the label to be "above" or "inline" (in webform), it is always displayed above the field.

I have narrowed the problem down to the "forms.css" file in Sky, near line 64, where .form-item label has a display:block; attribute. This appears to be overriding a label definition which is introduced later by the css of the actual webform module.

If I comment out this attribute (from Sky's forms.css), then things work as expected... I am not a CSS guru but I am wondering what side effects there might be from doing this? (ie why is display:block; there in the first place? and why only in the Sky theme?)

You should be easily able to reproduce this locally with AT-core+Sky+webform, however an example can be seen at www.squirreltest.com.au/content/webform-test. This site is a fresh D7 install, containing only adaptivetheme+Sky+webform.

Comments

petey318’s picture

petey318 commented
Project: Sky » Webform
Issue summary: View changes

text edit - added more explanation

Jeff Burnz’s picture

Jeff Burnz commented
Project: Webform » Sky
Category: bug » support

Its there because the original designer wanted to use it (which was not me), if I change this now I risk breaking a lot of sites that rely on it, so that's not really an option.

What I suggest is adding some CSS that only applies to the web form, e.g.

.webform-container-inline label {display: inline;}

Something like that.

PS you get mega kudos for setting up a test site for me to view this, strait to the top of the class for you!

petey318’s picture

petey318 commented

Thanks Jeff -

Yes, I ended up doing exactly that (the additional CSS) for the production site. It all works fine.

Cheers, Pete.

PS (for the benefit of others reading this in future) - the test site will probably vaporise in a couple of weeks time.

Jeff Burnz’s picture

Jeff Burnz commented
Status: Active » Fixed

Good stuff.

Status: Fixed » Closed (fixed)

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

new123456789’s picture

new123456789 commented

I have a webform.css file in my site and it consists of the followin: 

/**
 * @file
 * Front-end styling for the display of webforms.
 */
input.webform-calendar {
  display: none;
  padding: 3px;
  vertical-align: top;
}
html.js input.webform-calendar {
  display: inline;
}
.webform-container-inline label {
  display: inline;
  margin-right: 1em;
}
.webform-container-inline div,
.webform-container-inline div.form-item {
  display: inline;
}
.webform-container-inline div.description {
  display: block;
}
.webform-container-inline div.messages {
  display: block;
  float: left;
}
.webform-container-inline div.ajax-progress-bar div {
  display: inherit;
}

However, the inline labels are not displayed inline. Why might this be?

new123456789’s picture

new123456789 commented
Status: Closed (fixed) » Active
new123456789’s picture

new123456789 commented
Project: Sky » Webform
Version: 7.x-3.0-rc1 » 7.x-4.x-dev
quicksketch’s picture

quicksketch
he/him
commented
Status: Active » Closed (won't fix)

@new123456789: We don't answer custom coding questions in the Webform queue.

quicksketch’s picture

quicksketch
he/him
commented
Issue summary: View changes

changed the example to my test server

Basavaraj PK’s picture

Basavaraj PK commented
Issue summary: View changes 
<?php
<ol>
  <li><ol>
  <li><ol>
  <li><ol>
  <li><ol>
  <li><ol>
  <li><strong></strong></li>
</ol></li>
</ol></li>
</ol></li>
</ol></li>
</ol></li>
</ol>
?>