2

I need a dropdown menu to appear rotated 90 deg anticlockwise - so that the dropdown select "button" text appears vertically, and then the options slide out likewise in a rotated, sideways way, with vertical text. (Context: The user needs to select a title from a number of options for the Y axis of a graph - and the dropdown needs to exist where the title will finally go, likewise rotated.)

html currently simply as follows:

<select id="title"  >
<option value="title-0">Choose a chart title</option>
<option value="title-1">title 1</option>
<option value="title-2">title 2</option>
<option value="title-3">title 3</option>
</select>

I know there is CSS3 stuff for this. I've referred already to: Need Jquery code for rotate a whole div So I've tried CSS like so, or similar:

.box_rotate {
-webkit-transform: rotate(90deg);  /* Saf3.1+, Chrome */
-moz-transform: rotate(90deg);  /* FF3.5+ */
-ms-transform: rotate(90deg);  /* IE9 */
-o-transform: rotate(90deg);  /* Opera 10.5 */
transform: rotate(90deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17, sizingMethod='auto expand');
zoom: 1;
}

What happens is - at least in Firefox 15 - the select "button" gets rotated, but the dropdown options, when the menu is activated, remain in the horizontal position they would otherwise be - (and the dropdown links don't work).

I have tried applying the rotate class separately to the option tags, or to the select tag, or to an all-enclosing div. None of that seems to fix things.

There are, apparently, "a lot of plugins that are able to add rotate support to jQuery." (according to previously mentioned SO question). The one's I've seen just seem to apply to images or simple div elements - nothing that actually works for a whole dropdown menu.

Any ideas? .. A Javascript/jquery solution would be prefered.

Thanks

Community
  • 1
  • 1
Andrew Vw
  • 43
  • 1
  • 1
  • 7
  • Additional comment: I'm using a JS framework for the graph itself - Highcharts JS. So if you want to tell me to go trawl the Highcharts API - fair enough - I will do that anyway, but, you know, any help welcome. Ta – Andrew Vw Sep 28 '12 at 14:07

2 Answers2

1

It is a browser bug: https://bugzilla.mozilla.org/show_bug.cgi?id=455164

epascarello
  • 204,599
  • 20
  • 195
  • 236
  • As below - It may well be a browser-specific problem, (although it seems to occur in Safari as well) - however, Firefox is my main targeted audience browser, so that doesn't help me. – Andrew Vw Oct 02 '12 at 01:21
  • 1
    Well if it is a bug, there is really nothing you can do about it other than make your own select like element out of divs and an unordered list. – epascarello Oct 02 '12 at 12:30
0

it seems it works on FX15 when the rotation effect is applied to an optgroup element,

http://jsbin.com/ifatiy/1/edit

<select>
    <optgroup>
       <option value="title-0">Choose a chart title</option>
       <option value="title-1">title 1</option>
       <option value="title-2">title 2</option>
       <option value="title-3">title 3</option>
    </optgroup>
</select>

but you may need to also specify an height (and reset the style introduced with optgroup)

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • Thanks Fabrizio, I'll give it a go. (Need to go to bed right now - but will look at it in the morning) – Andrew Vw Sep 28 '12 at 14:12
  • Thanks very much .. but not quite working. As demonstrated by your jsbin link, the optgroup is not positioned under the select button.. Not quite sure what you mean by reset the style of the optgroup. I can add padding or margins to the optgroup, but that just affects the options text within the optgroup box, not the optgroup box positioning itself. – Andrew Vw Oct 02 '12 at 01:18
  • Also, clicking the options seems to be not entirely reliable: Sometimes it works, sometimes not. It may well be a browser-specific problem, (although it seems to occur in Safari as well) - however, Firefox is my main targeted audience browser, so that doesn't help me.. – Andrew Vw Oct 02 '12 at 01:21
  • Any other JS options/ frameworks? Raphael perhaps? .. I'll have a scout around .. – Andrew Vw Oct 02 '12 at 01:23