0

I'm trying to add the treetag functionality to my JSP using com.jgeppert.struts2.jquery's tree plugin.

The problem is that, when I add the tag, all the css styles of the rest of the page changes to the plugin's own css.

Any ideas of how to solve this issue ?

I just tried to add this div to my page, but it affects everything in the JSP :

<sj:div>

<sj:head locale="fr" jqueryui="true" jquerytheme="redmond" />

<sjt:tree id="treeStatic" jstreetheme="default"
    openAllOnLoad="false" id="treeDynamicCheckboxes"
    jstreetheme="apple" rootNode="nodes"
    childCollectionProperty="children" nodeTitleProperty="title"
    nodeIdProperty="id" openAllOnLoad="true" checkbox="true"
    checkboxCheckAllTopics="checkAllNodesTopic"
    checkboxUncheckAllTopics="uncheckAllNodesTopic"
    checkboxShowTopics="showCheckboxesTopic"
    checkboxHideTopics="hideCheckboxesTopic"
    onClickTopics="treeClicked">
    <sjt:treeItem title="Struts2">
        <sjt:treeItem title="General">
            <sjt:treeItem title="Struts2"
                href="http://struts.apache.org/2.x/index.html" />
            <sjt:treeItem title="Struts2 @ Facebook"
                href="http://www.facebook.com/pages/Struts2-Users/103890046351798" />
        </sjt:treeItem>
        <sjt:treeItem title="Plugins">
            <sjt:treeItem title="Struts2 Plugins"
                href="https://cwiki.apache.org/S2PLUGINS/home.html" />
            <sjt:treeItem title="Struts2 jQuery Plugin"
                href="http://code.google.com/p/struts2-jquery/" />
            <sjt:treeItem title="Struts2 Full Hibernate Plugin"
                href="http://code.google.com/p/full-hibernate-plugin-for-struts2/" />
        </sjt:treeItem>
        <sjt:treeItem title="Blogs">
            <sjt:treeItem title="Struts2 jQuery News"
                href="http://www.jgeppert.com/category/java/struts2-jquery/" />
        </sjt:treeItem>
        <sjt:treeItem title="AJAX Links">
            <s:url id="ajax1" value="/ajax1.action" />
            <sjt:treeItem title="Ajax 1" href="%{ajax1}" targets="result" />
            <s:url id="ajax2" value="/ajax2.action" />
            <sjt:treeItem title="Ajax 2" href="%{ajax2}" targets="result"
                effect="highlight" effectDuration="2500" />
            <s:url id="ajax3" value="/ajax3.action" />
            <sjt:treeItem title="Ajax 3" href="%{ajax3}" targets="result"
                onBeforeTopics="beforeLink" onCompleteTopics="completeLink" />
            <s:url id="ajax4" value="/ajax4.action" />
            <sjt:treeItem title="Ajax 4" href="%{ajax4}" targets="result"
                effect="bounce" effectDuration="1000" />
        </sjt:treeItem>
    </sjt:treeItem>
</sjt:tree>

<sj:submit formIds="treeForm" targets="result3" button="true" />
<sj:submit onClickTopics="checkAllNodesTopic"
    value="Check all Nodes" button="true" />
<sj:submit onClickTopics="uncheckAllNodesTopic"
    value="Uncheck all Nodes" button="true" />
<sj:submit onClickTopics="showCheckboxesTopic"
    value="Show Checkboxes" button="true" />
<sj:submit onClickTopics="hideCheckboxesTopic"
    value="Hide Checkboxes" button="true" />
<strong>Result Div :</strong>
<div id="result" class="result ui-widget-content ui-corner-all">Click
    on the AJAX Links above.</div>

</sj:div>
Umesh Awasthi
  • 23,407
  • 37
  • 132
  • 204
Edu Castrillon
  • 527
  • 1
  • 12
  • 28
  • I don't understand what you mean. In any case, are you actually putting the head tag somewhere else besides in the head? – Dave Newton Sep 28 '12 at 13:24
  • Thanks for your quick response Dave. What I mean is that all the other elements of the page (not just the tree) use the (embedded?) css of this plugin, and my css is overriden. If I use FireBug to see the styles used, I see that for example list elements outside the tree, use the .ui-tabs and .ui-tab-nav li styles from the plugin AND THEN my css. I believe this must be because the tag adds local css styles to the page and they get all the priority. Am I right? How can I tell the plugin to format ONLY the tree and not all the JSP? Thanks again! – Edu Castrillon Sep 28 '12 at 13:39
  • 1
    CSS is CSS: if you put the sj:head tag after other css, it will override previously-set properties. That's just how css works. The head tag needs to be in the head section, imo, although I've never tried just dropping it into the middle of the dom. – Dave Newton Sep 28 '12 at 16:19
  • It's better to disable plugin built in CSS and apply your customized CSS. – MohanaRao SV Sep 29 '12 at 07:45
  • Thanks! @MohanaRaoSV, how can I disable this built-in CSS? – Edu Castrillon Oct 01 '12 at 13:38
  • OK, I found that last thing myself : – Edu Castrillon Oct 02 '12 at 07:41
  • @EduCastrillon Good, and answer yourself and it would be helpful for future reference. – MohanaRao SV Oct 02 '12 at 14:31
  • @MohanaRaoSV , the problem I have is still there. I can deactivate this css, but then the tree has no format. If I activate it, it changes the tree format and the rest of the page. My css gets no priority here – Edu Castrillon Oct 03 '12 at 09:23

0 Answers0