By eliza411 on

I'm wondering how to create a template for the input form I've made with cck. Specifically, I want the select lists to stretch across the page, not be rendered one per line. I would normally be able to use display: inline in the style sheet, but there doesn't seem to be a selector I can use to group them, so I figure I should add one, but I'm not exactly sure where and how to do so.
I see how to template the output easily enough, but not the input form. While I'm at it, I'd like to move the help text directly below the field lable.

I imagine there's something on the site directed at this, but I can't seem to find it. Thanks in advance for any pointers in the right direction.

⋅ Categories: Drupal 4.7.x

Comments

RobRoy’s picture

RobRoy commented

You would create a custom module and use hook_form_alter() to modify the form to your liking. See the API docs at api.drupal.org.

--
Rob
Founder and Director
Electronic Insight Corporation

Recent Drupal Projects: MP3PIG | MySpace Layouts

maastrix’s picture

maastrix commented

yeah.. and if you get it.. please let me know..

eliza411’s picture

eliza411 commented

A custom module would be one way to solve it, but I think that would be way more than what I need.

I made a little break-through. When I tried getting the three fields to display inline with just the following styles and no other style sheets, it worked:

label {
 display: inline;
}

select {
 display: inline;
}

.form-item {
 display: inline;
}

Then I applied my theme's style sheet, still it worked.

Then I applied the core drupal stylesheet (misc/drupal.css). That's when it didn't work. Then I narrowed it down:

.form-item label {
  display: block;
  font-weight: bold;
}

provided more specificity than my code and so overrode it, putting it back into a display block. There are a few more such that might wreak havoc depending on what you're trying to accomplish:


.form-item label.option {
  display: inline;
  font-weight: normal;
}
.marker, .form-required {
  color: #f00;
}
.more-link {
  text-align: right;
}
.node-form .form-text {
  display: block;
  width: 95%;
}
.node-form .standard {
  clear: both;
}
.node-form textarea {
  display: block;
  width: 95%;
}
.node-form .attachments fieldset {
  float: none;
  display: block;

Now I just need to see if I can write my stylesheet so that it only targets the fields I want, but I'm not sure when I'll get to that, so I thought I'd post my progress in case it helps.

eliza411’s picture

eliza411 commented

I was able to get the selectors specific enough not to apply to anything I don't want them to.

Anyway, to get the three items in the following code to display inline: 

<div class="form-item">
  <label for="edit-field_elementary_regions-key">1: </label>
   <select name="edit[field_elementary_regions][key]" class="form-select" id="edit-field_elementary_regions-key" >
       <option value="1">Adams</option>
   </select>
</div>

<div class="form-item">
 <label for="edit-field_elementary_regions_2-key">2: </label>
   <select name="edit[field_elementary_regions_2][key]" class="form-select" id="edit-field_elementary_regions_2-key" >
     <option value="1">Adams</option>
  </select>
</div>

<div class="form-item">
 <label for="edit-field_elementary_regions_3-key">3: </label>
   <select name="edit[field_elementary_regions_3][key]" class="form-select" id="edit-field_elementary_regions_3-key" >
      <option value="1">Adams</option>
   </select>
</div>

I used the following stylesheet commands in my theme's style.css:

 .standard .form-item,
  select#edit-field_elementary_regions-key,
  select#edit-field_elementary_regions_2-key,
  select#edit-field_elementary_regions_3-key,
  label[for=edit-field_elementary_regions-key],
  label[for=edit-field_elementary_regions_2-key],
  label[for=edit-field_elementary_regions_3-key]
{
display: inline;
}

It's a little laborious, but it works. :) Unfortunately, the attribute selector is not well supported by older browsers :(, so for the time being I changed includes/theme.inc to produce id instead of for in the label field, and updated the css selector to be:

label#edit-field_elementary_regions-key
  label#edit-field_elementary_regions_2-key,
  label#edit-field_elementary_regions_3-key.

for wider support. Also the css refers to <div class="standard"> which isn't in the snipped I posted but does seem to be produced on the cck pages, and which sufficiently narrows down the .form-item selector.