current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

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>
share|improve this question
    
too much code, show only the relevant part –  Ibu May 30 '11 at 8:52
    
@Ibu : i just wanted to show the struts theme tag, maybe has a conflict with somthing! –  Amin Sh May 30 '11 at 8:59
    
call required theme first, or change the style names –  Max May 30 '11 at 9:25
    
@Max: I've done that before :( , its not working, thank you –  Amin Sh May 30 '11 at 11:05

2 Answers 2

up vote 1 down vote

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.

share|improve this answer
    
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. –  Amin Sh May 30 '11 at 12:39
up vote 0 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.