After creating a search panel for my application using UI binder, I noticed that the desired behavior is not being achieved.
Ui.xml
<g:HTMLPanel>
<c:SimpleContainer>
<c:InfoContainerHeader text="{labels.searchFilter}" />
<g:FlowPanel ui:field="searchPanel" styleName="{res.style.searchPanel}">
<g:FlowPanel ui:field="searchLabelPanel" styleName="{res.style.searchLabelPanel}">
<g:InlineLabel ui:field="searchLabel" styleName="{res.style.searchLabel}" text="{labels.searchFor}"/>
<g:InlineLabel ui:field="searchRedStarLabel" styleName="{res.style.searchRedStarLabel}">*</g:InlineLabel>
</g:FlowPanel>
<chzn:ChosenListBox ui:field="searchListBox" styleName="{res.style.searchListBox}" width="35%"/>
</g:FlowPanel>
<g:SimplePanel addStyleNames="{rscb.style.textAlignCenter}">
<g:Button ui:field="searchButton" text="{clabels.search}"/>
</g:SimplePanel>
</c:SimpleContainer>
</g:HTMLPanel>
my css
.search-panel {
border-radius: 2px 2px 2px 2px;
border: 1px solid #F2AF00;
color: #000F16;
margin: 2% 0;
}
.search-label-panel {
margin: 0 15px 0 0;
width: 40%;
text-align: right;
float: left;
font-weight: bold;
}
.search-red-star-label {
color: #790000;
margin-left: 4px;
display: inline;
}
.search-label {
display: inline;
}
.search-list-box {
width: 35%;
margin-bottom: 4px;
font-size: 13px;
display: inline-block;
position: relative;
}
my ui binder
public class SearchFilterViewImpl implements SearchFilterView
{
HTMLPanel rootElement;
SearchFilterViewPresenter presenter;
@Override
public void setPresenter(SearchFilterViewPresenter presenter)
{
this.presenter = presenter;
}
@Override
public void refresh()
{
}
@Override
public Widget asWidget()
{
return rootElement;
}
interface FilterViewImplUiBinder extends UiBinder<HTMLPanel, SearchFilterViewImpl>
{
}
private static FilterViewImplUiBinder ourUiBinder = GWT.create(FilterViewImplUiBinder.class);
public SearchFilterViewImpl()
{
rootElement = ourUiBinder.createAndBindUi(this);
}
@UiField
ChosenListBox searchListBox;
@UiField
FlowPanel searchPanel;
@UiField
FlowPanel searchLabelPanel;
@UiField
Label searchLabel;
@UiField
Label searchRedStarLabel;
@Override
public void setSearchListElements(List<AdminSearchType> searchElements)
{
for (AdminSearchType searchElement : searchElements)
{
searchListBox.addItem(searchElement.getSearchType(), searchElement.name());
}
searchListBox.setPlaceholderTextSingle("What would you like to search for?");
}
@Override
public void setStyles(SearchListBoxCss cssStyle)
{
searchPanel.setStylePrimaryName(cssStyle.searchPanel());
searchLabel.setStylePrimaryName(cssStyle.searchLabelPanel());
searchLabel.setStylePrimaryName(cssStyle.searchLabel());
searchRedStarLabel.setStylePrimaryName(cssStyle.searchRedStarLabel());
searchListBox.setStylePrimaryName(cssStyle.searchListBox());
}
}
It seems that GWT is not picking up any of the CSS changes I have made.
I had expected:
However, what is currently appearing is different.