In GWT, how can I override DisclosurePanel's CSS using or ClientBundle


Tags: java,css,gwt

Problem :

I have a class that extends Composite and contains a DisclosurePanel at the top-level of the associated UiBinder file.

In DisclosurePanel, the HTML looks like this:

<table class="gwt-DisclosurePanel gwt-DisclosurePanel-closed>
  <tr>
    <td>
      <a href="javascript:void(0);" style="display: block;" class="header">
        <div class=""> <!-- an HTMLPanel I've shoved in to a <gwt:customHeader> block -->
           ...
        </div>
      </a>
...

In my UiBinder file I can use addStyleNames="{style.???}" and style some things, like I can style the DisclosurePanel itself and I can style my HTMLPanel inside the , but I can't style the

<a>

except by doing this:

disclosurePanel.getHeader().getParent().getElement().getStyle().setTextDecoration(TextDecoration.NONE);
disclosurePanel.getHeader().getParent().getElement().getStyle().setColor("black");

in the code, but that's ugly and the style is now in two places, the code and the UiBinder file.

The reason I'm doing that is to get rid of the underlining and blue color that the has by default. Another alternative is to do something like this:

.gwt-DisclosurePanel a {
    text-decoration: none;
    text: black;
}

but then I would need to reference that CSS file from my home page (Client.html) or reference from the gwt.xml file, but both of those ways of doing things are deprecated.

How do I do this in a better way, or is it not possible?



Solution :

Hmmm...will ensureInjected() do what I want? Can I just define a CssResource and a ClientBundle that references that CssResource and then call ensureInjected on the CssResource and it will inject all the CSS, even if I haven't referenced all the methods on my CssResource sub-interface?

Yes and no - you'd have to disable CSS obfuscation (<set-configuration-property name="CssResource.style" value="pretty" /> - warning, that's global, so probably not what you want) in order for it to work. But if you reference those class names only from your UiBinder templates as such you should be fine:

<!-- Insert usual UiBinder stuff here -->
<ui:with field='res' type='com.example.client.resource.SomeCoolBundle'/>
<!-- SomeCoolBundle has a CssResource defined and available via style() -->

<div class='{res.style.lbox}'></div>

Just remember to mark the GWT classes as @external in your CSS file or else you won't be able to override them (since they'll get obfuscated):

@external .gwt-TextBox, .gwt-PasswordTextBox, .gwt-Button, .gwt-CheckBox;

If this doesn't suit your needs (or is to cumbersome), by all means do use one of those "deprecated" (not really) methods.


    CSS Howto..

    How to include Material Design libraries without npm

    How to avoid CSS conflict using jquery?

    How do I prevent sliced images in the CSS background from sitting on each other?

    how to set the child-class height as per the parent div using css

    How to use sprite images in html/css and toggle change with jQuery

    Sublime - CSS - how to auto add .class for each section in the whole code?

    How to overflow in CSS/HTML? [closed]

    How can one select a parent element several levels above the child element utilizing the 'hover' selector and ':has()'?

    How to make div access the remaining space without using fixed height values?

    How to make css style on Google custom search engine

    How to get a small div bar to slide down a menu on mouseover

    How do I make a line not return?

    how to write this code in right way in javascript

    How to disable CSS in Browser for testing purposes

    How to shift divs “up” in an order after deleting hiding a div with jquery/css

    How to insert a div below dynamic divs row after onclick

    How to Use IF Statement in Play Framework to Use CSS for Only 1 Page

    How to show/hide delete button with CSS?

    How to write Text in css like show in images?

    How to link CSS file from css folder in wordpress

    How to make my buttons responsive?

    Yahoo.widget.Editor - How to configure font size of text

    JavaScript- How to change “message” div to yellow

    CSS - how to display submenu options horizontally while maintaining spacing of horizontal main menu options

    How can I resize my iframe keeping the ratio?

    How can I target only visible objects with nth-child?

    how to put img inside circle in html and css?

    how to search with GET method in MVC

    CSS (Fixed width right, fluid left, left is first in html) How do I keep left div from collapsing?

    css how to make this checkbox smaller