Any issues with hiding a select list behind a div and selecting it with JavaScript?

Question

I need to horizontally center text in a select list, specifically for android and iphones. It seems this cant be done with CSS so im looking for a workaround.

I was thinking about hiding the input behind a div with centered text, and using JavaScript to select the input when you click on the div. I would then need to change the text in the div to equal that of the selected option. If the div was created with JavaScript then the page would will be usable with JavaScript disabled.

I had another idea but this seems trickier to me. I could use JavaScript to get the screen width, apply a calculation, and then apply the right amount of text indentation to the input.

Im interested in best practice but this is a demo project not a live one. Im using jQuery. Thanks

UPDATE - Ive tried the following, where the div#cover covers a select input. It works fine in my iPad. However my old Android wont always focus on the input. Firefox does focus on the input but the options dont fly you, you have to scroll them with arrow keys. So it seems this solution is not as simple as id hoped.

$('div#cover').click(function(){
  $('#select').focus();
});

I use the "trickier" idea of getting screen width & calculating from there. It's not that much of a hassle. I'd post some code, except my wife'll get cross :) — Nick, May 10 '12 at 11:56
Come to think of it its actually going to be more complicated that I though. Different selected options have different widths so will need different calculations. One of my inputs has over 100 options to choose from. — Evanss, May 10 '12 at 12:06
I don't think a large number of different widths derails the possibility. You calc screen width (sw) at unload & any resize. You calc option width (ow) dynamically as each option is chosen. Then set option left = (sw-ow)/2. There may be a better way, but it's do-able. — Nick, May 10 '12 at 12:31
Ive opened a new question here trying to do it your way. Getting the string length of text is easy but getting the pixel width when its an option in a select list seems tricker: http://stackoverflow.com/questions/10585014/jquery-get-pixel-width-of-option-in-a-select-list — Evanss, May 14 '12 at 14:44

score 0 · Answer 1 · answered May 10 '12 at 11:57

0

Your idea on hiding the select behind the div looks OK I did a more complex thing - completely hiding the select, replacing it with HTML, doing all interaction from JS and all styling in CSS and reflecting the changes to the underlying select (which can for instance be submitted as a form element in a normal way)

The jQuery plugin I wrote was very tiny anyway, as I put all styles and positions in CSS which gave me the full control over the appearance and big flexibility

answered May 10 '12 at 11:57

Guard

6,816
4
38
58

Is your plugin released for public licence? Thanks – Evanss May 14 '12 at 14:47
well, not released anywhere though I think I can easily share it somewhere on jsfiddle – Guard May 15 '12 at 08:30

score 0 · Accepted Answer · edited May 23 '17 at 11:50

Code is from here: jQuery - function runs fine when fired on div click, but not on page load

 function textIndentFunc () {

    textString = $('#from-1 :selected').text();

     $('#hidden').text(textString);

     textWidth = $('#hidden').width();

     inputWidth = $('#from-1 select').width();

     indentMy = (inputWidth / 2) - (textWidth / 2);

    $('#from-1').css('text-indent',indentMy);

}

 $('#from-1 select').change(function() {
    textIndentFunc();
 });

 textIndentFunc();

Any issues with hiding a select list behind a div and selecting it with JavaScript?

2 Answers2