Select options with backgrounds
Posted: Wed Apr 02, 2014 7:43 pm
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
Catch up wih the Appery.io community on our forum. Here you'll find information on the lastest questions and issues Appery.io developers are discussing.
https://forum.appery.io/
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
pre
/pre
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
Hi Brian - where you added this code?
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
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.
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
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?
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.
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