CSS Manipulation Not Working - Bug?
DayShallCome - November 1, 2006 - 05:33
| Project: | Active Select |
| Version: | HEAD |
| Component: | User interface |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs work |
Description
This is the code I get from viewing source of my page:
<div class="node-form">
<div class="standard">
<fieldset class=" collapsible"><legend>Categories</legend><div class="form-item">
<label for="edit-category-3">Animal: <span class="form-required" title="This field is required.">*</span></label>
<select name="edit[category][3]" class=" form-activeselect required" id="edit-category-3" ><option value="0" selected="selected"><none></option><option value="5">Cat</option><option value="4">Horse</option></select>
</div>
<input class="activeselect-path" type="hidden" id="edit-category-3-activeselect-path" value="http://localhost/?q=category/activeselect" disabled="disabled" />
<input class="activeselect-targets" type="hidden" id="edit-category-3-activeselect-targets" value="edit-category-8" disabled="disabled" />
<input class="activeselect-extra" type="hidden" id="edit-category-3-activeselect-extra" value="0" disabled="disabled" />
<div class="form-item">
<label for="edit-category-8">Breed: <span class="form-required" title="This field is required.">*</span></label>
<select name="edit[category][8]" class="form-select required" id="edit-category-8" ><option value="0" selected="selected"><none></option><option value="9">Donkey</option><option value="10">Shetland</option></select>
</div>
Now, I added this to my CSS file:
#edit-category-3 {float:left; width:30%;}
#edit-category-8 {float:left; width:30%;}But didn't do what I was hoping it would do. The title of the second drop down box moved slightly to the right, and is closer to the first box. However, when I do .form-item {float:left; width:30%;}, the boxes do what I want them to do, but so does every other form object on the page.
I'm stuck - what am I doing wrong?!
Thanks.
| Attachment | Size |
|---|---|
| category_edit.png | 4.46 KB |
#1
here's what the page looks like when I do the .form-edit thing.
#2
This patch will give the Categories fieldset a proper class name so you can target it. I chose the class name category-chooser, feel free to suggest a better name.
This can also be done outside of Category with a custom module implementing form_alter, but I think it would be a good idea to have a class for the fieldset built in, as I can imagine most users wanting to retheme it eventually...
Please review.
#3
@DayShallCome: your CSS isn't working, because activeselect form elements have their width dynamically overridden using JavaScript. Activeselect does this because the text (i.e. the options) within an activeselect element can change at any time, and whenever this happens, the width has to change as well, in order to fit the new text. I'm afraid that there's nothing you can do using CSS that will have any effect on these elements.
If you want it to work the way you desire, then you'll have to delete or comment out these lines from your
activeselect.jsfile:this.setSelectWidth(maxWidth);this.setTargetWidth(targetIndex, maxWidth);Moving this issue to the activeselect queue.
@bdragon: your patch is targeting the surrounding fieldsets. DayShallCome wants to set the width of the select boxes inside the fieldsets. Also, if you wanted to add an extra class to the surrounding fieldsets, I would recommend doing this at the theme level, as hard-coding it into the module would be inconsistent - most fieldsets in Drupal don't have their own CSS selector class.
#4
Jaza,
I'm actually trying to do both things (as select boxes that are side by side can't be of variable width).
DSC
#5
How would I go about doing this in my theme? Wouldn't I have to somehow access the category module from the theme?
#6
Jaza, any reason why commenting out "this.setSelectWidth(maxWidth);" breaks active select?