I can't seem to make dropdown menus show backgrounds. What am I doing wrong here? It's practically the same code we use on our website that works fine.
pre
/pre
-
Brian Evans
- Posts: 0
- Joined: Mon Feb 03, 2014 9:28 pm
-
Brian Evans
- Posts: 0
- Joined: Mon Feb 03, 2014 9:28 pm
Select options with backgrounds
pre
/pre
-
Brian Evans
- Posts: 0
- Joined: Mon Feb 03, 2014 9:28 pm
Select options with backgrounds
tags didn't work.
code
<option value="99" selected="selected" style="background-image: url(http://sandbox.acavano.com/api/commons/dropdownPreview/99/223/);"></option>
/code
-
Illya Stepanov
- Posts: 0
- Joined: Mon Mar 18, 2013 8:48 am
Select options with backgrounds
Hi Brian - where you added this code?
-
Brian Evans
- Posts: 0
- Joined: Mon Feb 03, 2014 9:28 pm
Select options with backgrounds
Dynamic from REST call
code
var fonts = $('[name=font]');
fonts.html('');
$.each(vars.Fonts, function(i, item) {
fonts.append('<option value=' + vars.Fonts.Font.id + '></option>');
Code: Select all
var option = $('#Settings_font option[value="' + vars.Fonts[i].Font.id + '"]'); var imageUrl = 'http://sandbox.acavano.com/api/commons/dropdownPreview/'+vars.Fonts.Font.id+'/'+user_id+'/';
option.css('background-image', 'url("' + imageUrl + '")');
});
fonts.selectmenu('refresh');
/code
-
Illya Stepanov
- Posts: 0
- Joined: Mon Mar 18, 2013 8:48 am
Select options with backgrounds
At first you need to use native menu. So select should have data-native-menu attribute:
precode
<select data-native-menu="true">/code/pre
See more about jqm select: http://demos.jquerymobile.com/1.2.1/d...
Also you should know that's 'backgound-image' property for the select option is not working on all browsers.
See details here: http://stackoverflow.com/questions/73...
Regards.
-
Brian Evans
- Posts: 0
- Joined: Mon Feb 03, 2014 9:28 pm
Select options with backgrounds
It does, I just showed how the options are built. Here is the entire menu after it's built.
code
<select name="font" id="Settings_font" dsid="font" data-theme="d" data-inline="false" data-mini="true" data-icon="arrow-d" data-iconpos="right" data-native-menu="false" tabindex="-1" appery-class="Settings_font"><option value="100" data-placeholder="true" style="background-image: url(http://sandbox.acavano.com/api/commons/dropdownPreview/100/223/);"></option><option value="99" selected="selected" style="background-image: url(http://sandbox.acavano.com/api/commons/dropdownPreview/99/223/);"></option><option value="134" style="background-image: url(http://sandbox.acavano.com/api/commons/dropdownPreview/134/223/);"></option><option value="114" style="background-image: url(http://sandbox.acavano.com/api/commons/dropdownPreview/114/223/);"></option><option value="115" style="background-image: url(http://sandbox.acavano.com/api/commons/dropdownPreview/115/223/);"></option><option value="121" style="background-image: url(http://sandbox.acavano.com/api/commons/dropdownPreview/121/223/);"></option><option value="133" style="background-image: url(http://sandbox.acavano.com/api/commons/dropdownPreview/133/223/);"></option><option value="128" style="background-image: url(http://sandbox.acavano.com/api/commons/dropdownPreview/128/223/);"></option><option value="131" style="background-image: url(http://sandbox.acavano.com/api/commons/dropdownPreview/131/223/);"></option><option value="130" style="background-image: url(http://sandbox.acavano.com/api/commons/dropdownPreview/130/223/);"></option><option value="132" style="background-image: url(http://sandbox.acavano.com/api/commons/dropdownPreview/132/223/);"></option></select>
/code
-
Brian Evans
- Posts: 0
- Joined: Mon Feb 03, 2014 9:28 pm
Select options with backgrounds
Ok, set native to true and see it works in FF. When run on my Android through the IO tester the menu background is all black and CSS for the select menu isn't changing this.
Is this just not going to work within the App?
-
Kateryna Grynko
- Posts: 0
- Joined: Thu Nov 15, 2012 9:13 am
Select options with backgrounds
Hi Brian,
Try this CSS:precode#screenName_mobileselectmenu-menu .ui-btn-active{
background-image:url(http://example.com/bg.png);
}/code/preWhere 'screenName' is a page name,
'mobileselectmenu' is a select component name.
-
Brian Evans
- Posts: 0
- Joined: Mon Feb 03, 2014 9:28 pm
Select options with backgrounds
Problem is I need the styling done dynamically.
code
var fonts = $('[name=font]');
fonts.html('');
$.each(vars.Fonts, function(i, item) {
fonts.append('<option value=' + vars.Fonts.Font.id + '></option>');
Code: Select all
var option = $('#Settings_font option[value="' + vars.Fonts[i].Font.id + '"]'); var imageUrl = 'http://sandbox.acavano.com/api/commons/dropdownPreview/'+vars.Fonts.Font.id+'/'+user_id+'/';
option.css('background-image', 'url("' + imageUrl + '")');
});
fonts.selectmenu('refresh');
/code