Simplify theming of specific HS instances: transliterate the form element name and the HS config id into a CSS class
| Project: | Hierarchical Select |
| Version: | 6.x-3.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | minor |
| Assigned: | Wim Leers |
| Status: | closed |
Jump to:
I was having issues trying to theme the div which contained the Hierarchical Select elements. Each reload of the page incremented the DOM ID, eg
div#hierarchical-select-0-wrapper-wrapper
then
div#hierarchical-select-1-wrapper-wrapper
then
div#hierarchical-select-2-wrapper-wrapper
etc.
Rather than adding a large number of CSS definitions to my site CSS, I worked around this by using hook_form_alter() and applying a prefix and suffix to the form entry for the form component.
<?php
function mymodule_form_alter(&$form, &$form_state, $form_id) {
switch ( $form_id ) {
case 'review_node_form' :
// on this site, only content type 'review' has this element applied
$form['taxonomy'][7]['#prefix'] = '<div id="taxonomy-7-hiersel">' ;
$form['taxonomy'][7]['#suffix'] = '</div>' ;
break ;
}
}
?>From there, I can just theme div#taxonomy-7-hiersel and ignore the incrementing DOM ids which I was seeing come out of hierarchical_select.
Figured I'd note this here in case it threw someone else! Would appreciate thoughts on other methods to work around it (and if the incrementing DOM IDs aren't intentional, maybe this should be turned into a bug report).
#1
#564248: Simplify theming of specific HS instances: transliterate the form element name and the HS config id into a CSS class is a duplicate of this issue.
The reason for the increment is that I must allow for multiple Hierarchical Select form items on the same page, even for the same data source (which is a vocabulary most of the time).
You can target Hierarchical Select by targetting the
.hierarchical-select-wrapperclass. However, maybe you want to target HS for a specific vocabulary? That is indeed not yet clearly supported. If that's what you want, please turn this into a feature request :)#2
Closing due to lack of response. Feel free to reopen.
#3
Thanks for the prod. I hadn't returned to this issue as I'd found a workaround which resolved the issue in my case, as above. As you deduced from the form_alter() code I posted, I was hoping to target a specific vocabulary only. I've updated this to feature request; I'm afraid I can't remember the exact CSS issue I faced, but I do recall not being able to achieve the result via
.hierarchical-select-wrapper.You mention a duplicate, but the link posted points to this issue? I searched for "DOM", "increments", "changes" etc but couldn't find a similar ticket.
#4
Indeed, I pointed to this same issue. I must've been confused :P
I will add another CSS class — one that contains the HS config id. That allows you to properly target unique instances of HS.
#5
Better title.
#6
Implemented!
- D6: http://drupal.org/cvs?commit=281726
- D5: http://drupal.org/cvs?commit=281728
#7
Automatically closed -- issue fixed for 2 weeks with no activity.