Option to customize the CSS

[ivmarkov]

it seems there is no easy way to override the GWTChosen CSS with a custom one. (For example, we want smaller paddings and smaller font in the GWTChosen popup list.)

Would it be possible to slightly alter the code so that the user of the control can provide its own instance of com.watopi.chosen.client.resources.Resources? That would be similar in spirit to GWT's Cell widgets (CellTable/CellTree/CellList) which all do have a constructor which takes a user-supplied Resources object.

Perhaps the following small change would work: 1) ChosenOptions is extended with setResources()/getResources(). This would be the API the user will use to supply custom Resources 2) ChosenImpl is changed to use the Resources object supplied via ChosenOptions, or if that one is null, to fall back to constructing its own Resources object via GWT.create() 3) Obviously, Resources.INSTANCE has to be moved somewhere else, as now com.watopi.chosen.client.resources.Resources (and com.watopi.chosen.client.resources.ChosenCss) become an API

Let me know if there are gaps in the above suggestion and/or if I've missed the elephant in the room and there is an easier, out-of-the box way to customize Chosen's appearance.

[jDramaix]

It's something I wanted to add before the first release but I forgot.

Try with the last snapshot : https://github.com/jDramaix/gwtchosen/raw/master/release/gwtchosen-1.0.3-snapshot.jar

ChosenOptions options = new ChosenOptions();
options.setResources(GWT.<MyResources>create(MyResources.class));
ChosenListBox box = new ChosenListBox(options);

[ivmarkov]

It is working just fine, thanks! Minor glitch: all other setXXX() methods return ChosenOptions, i.e. "return this;" while ChosenOptions.setResources() returns void. Of course this is not a showstopper at all.

[jDramaix]

you right. commit 2719745b24da74cd5385b604721ba5039efbe869 correct that

[djgouze]

Hi!

I would also like to change to font size as ivmarkov wanted to but I am finding it difficult to understand the way of customizing the css which is presented in your comment jDramaix. I hope you can help me even though I know the last message was written 9 months ago ;)

I have written this: ChosenOptions options = new ChosenOptions(); options.setResources(GWT. create(CustomChosenRecources.class)); marketSegmentListTest = new ChosenListBox(options);

and have created the CustomChosenResources like this:

import com.google.gwt.resources.client.DataResource; import com.watopi.chosen.client.resources.ChozenCss; import com.watopi.chosen.client.resources.Resources; public class CustomChosenRecources implements Resources{ @Override public ChozenCss css() { // TODO Auto-generated method stub System.out.println("Does this even show?"); return null; }

@Override
public DataResource chosenSprite() {
    // TODO Auto-generated method stub
    return null;
}

}

But the System printline is never printed and the program crashes with the following errors: 00:00:16,018 [DEBUG] Rebinding com.watopi.chosen.client.resources.CustomChosenRecources 00:00:16,018 [DEBUG] Invoking generator com.google.gwt.resources.rebind.context.InlineClientBundleGenerator 00:00:16,018 [ERROR] com.watopi.chosen.client.resources.CustomChosenRecources is not an interface. 00:00:16,018 [ERROR] Deferred binding failed for com.watopi.chosen.client.resources.CustomChosenRecources'; expect subsequent failures

What am I doing wrong? And a following question: if I got it to work, where would I call for my own css?

[jDramaix]

00:00:16,018 [ERROR] com.watopi.chosen.client.resources.CustomChosenRecources is not an interface.

Your Custom resource should be an interface. Check the gwt documentation : http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html#ClientBundleExamples

[cplaetzinger]

We use a regular CSS file to style our GWT application. Customers may define a custom CSS to apply some changes. Thus I would like to avoid to bundle any resources which can not be changed without building the code. So is there a way to override the CSS classes with an external CSS?

[jDramaix]

Try to use the @external at-rule : http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes

[cplaetzinger]

Thanks, I tried it already and it works. I have implemented a custom resource class which uses a copy of the original chosen CSS file. Compared to the original version my CSS file has one additional line to avoid CSS class name obfuscation:

@external .chzn-*;