Jquery CSS Scope Doesn't Work Properly on selectmenu

Question

My page:JSP+Struts2 tags+JQuery Library+JqueryUI

I have a JQuery selectmenu and two JQuery UI themes, i want to style the selectmenu with the second JQuery UI theme(css scope), but the content area(background of option tags) of my selectmenu is styled with the first theme!

What should I do?

here are some of my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<sj:head jqueryui="true" jquerytheme="orange" customBasepath="css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
    /* selectmenu css */
        fieldset { border:0;  margin-bottom: 40px;} 
        label,select,.ui-select-menu { float: right; }
        select { }
        /*select with custom icons*/
        body a.customicons { height: 2.8em;}
        body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
        body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
    /* /selectmenu css */
</style>

        <!-- JQuery --><link type="text/css" href="css/orange/jquery-ui.custom.css" rel="stylesheet"/>
        <!-- JQuery --><script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>

        <!-- interiorTheme --><link type="text/css" rel="Stylesheet" href="css/interior_uilightness/jquery-ui-1.8.13.custom.css">

        <!-- selectMenu --><link type="text/css" rel="Stylesheet" href="css/element/jquery.ui.selectmenu.css">
        <!-- selectMenu --><script type="text/javascript" src="js/element/jquery.ui.selectmenu.js"></script>

<script type="text/javascript">
    //--selectmenu
        $(function(){
            $('select#buy_groupBy').selectmenu({
                width: 220,
                maxHeight: 400,
                style:'popup',
                format: addressFormatting
            });
        });
    //a custom format option callback
        var addressFormatting = function(text){
            var newText = text;
            //array of find replaces
            var findreps = [
                {find:/^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>'},
                {find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
                {find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2'},
                {find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
                {find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'}
            ];

            for(var i in findreps){
                newText = newText.replace(findreps[i].find, findreps[i].rep);
            }
            return newText;
        }
    //--/selectmenu
</script>

</head>
<body>


                                        <div class="interior_UILightness">
                                        <s:form action="buy.action" method="post" onsubmit="return validateBuy()" cssStyle="margin-top:-5px;">
                                            <tr><td></td><td><s:hidden name="selectedGame"/></td></tr>
                                            <s:select name="groupBy" label="xxxx" list="#{'1':'1','2':'2','3':'3'}" cssStyle="width:220px;"/>
                                            <s:textfield name="symbol" label="xxxx" readonly="true" cssClass="strutsBuyTextField"/>
                                            <s:textfield id="price" name="price" maxlength="16" label="xxxx" readonly="true" cssClass="strutsBuyTextField"/>
                                            <s:textfield name="shares" maxlength="7" label="xxxx" cssClass="strutsBuyTextField" onkeyup="showDetails();" onkeydown="hideMessage();"/>
                                            <s:submit value="xxxx" name="buySubmit" cssClass="submit" cssStyle="margin-right:80px"/>
                                        </s:form>
                                        </div>

</body>
</html>

@Ibu : i just wanted to show the struts theme tag, maybe has a conflict with somthing! — Amin Sh
– Amin Sh, Commented May 30, 2011 at 8:59

andyb · Accepted Answer · 2011-05-30 11:05:07Z

1

I think you need to add the CSS scope before you download a custom theme. The struts jQuery plugin custom base path is used to specify the path to the theme if it is not in the default directory.

So, I think you need to download the custom theme and supply a CSS scope and also a theme folder name and then change the customBasepath to the directory with the theme folder name.

answered May 30, 2011 at 11:05

andyb

43.9k12 gold badges126 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amin Sh Over a year ago

I think it's not strut's problem (or my problem with Struts)! I tried the code without struts theme definition, but I got nothing! thank you buddy.

Nav · Accepted Answer · 2014-08-07 11:11:34Z

I know the question was asked over 3 years ago but I will answer it for those ( like me ) who found this topic while looking for the exact same problem.

I assume that your select box is placed in some div with the CSS scope of the second theme, e.g:

<div class="scope2" id="select-div">
    <select id="select"></select>
</div>

In such case, if you take a look at the API of the selectmenu, you can find the information about appendTo property of the menu. If no value is passed, the div containing the expandable menu will be placed somewhere in the body of the page, probably at the bottom. In such case, the div with '' and all the <li> elements will not be placed in scope of the scope2 class and that is why the menu is styled with first theme.

$('#select').selectmenu( { appendTo : '#select-div' } ); will do the trick

Collectives™ on Stack Overflow

Jquery CSS Scope Doesn't Work Properly on selectmenu

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related