How to apply a complete css file to an element in Ui-Binder?

34 views
Skip to first unread message

membersound

unread,
Mar 10, 2013, 11:21:52 AM3/10/13
to google-we...@googlegroups.com
How can I apply a complete css file to a specific element using UI Binder?

I know the following does not work, as it is missing css.property statement. But you get the idea of what I'm trying: replacing all SuggestBox styles only for this specific suggestbox with the ones in my CSS file.

<ui:style field="css" src="MySuggestBox.css" />
<gwt:FlowPanel>
 <gwt:HTMLPanel>
  //some other stuff
  <gwt:SuggestBox styleName="{css}" /> //Error: incomplete field reference

karim duran

unread,
Mar 11, 2013, 4:32:22 AM3/11/13
to google-we...@googlegroups.com
Hi membersound,

1) I think your SuggestBox should have a ui:field attribute

2) then, add a stylename attribute like this -> styleName="{css.mySuggestBox}". Where mySuggestBox is your css style directives name for your gwt:SuggestBox.

Also, In UI Visual Designer, just can click on your suggestbox, you have a little button on properties panel (advanced properties) where you can type an ui:field name and css properties too.

I hope it help you.

Regards.

Karim Duran



2013/3/10 membersound <kodyr...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Kody

unread,
Mar 11, 2013, 6:03:12 AM3/11/13
to google-we...@googlegroups.com
No this would be suitable if I only want to apply a specific property class of my css file. But I want to create a css file which contains all relevant css classes for styling a SuggestBox, and then just apply everything that's insndie it. Like:

.gwt-SuggestBox {}
.gwt-SuggestBoxPopup {}
.gwt-SuggestBoxPopup .item {}
.gwt-SuggestBoxPopup .item-selected {}
.gwt-SuggestBoxPopup .suggestPopupContent {}
.gwt-SuggestBoxPopup .suggestPopupTopCenter {}
.gwt-SuggestBoxPopup .suggestPopupBottomCenter {}
html>body .gwt-SuggestBoxPopup {}
* html .gwt-SuggestBoxPopup .suggestPopupTopLeftInner {



2013/3/11 karim duran <karim...@gmail.com>

--
You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/LwNph5_merE/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages