UI binder is having difficulty resolving CSS

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.

Answer №1

When using each CssResource, it is important to remember to call ensureInjected(). This function will add a reference to the CSS in your DOM (in the HTML page).

If SearchListBoxCss extends CssResource in your case, simply use cssStyle.ensureInjected(). This only needs to be executed once, so you can even make the call static (although it doesn't matter if you call it multiple times).

(Please note: If the styles are included directly in the ui.xml file, GWT will automatically trigger ensureInjected() for you.)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm looking to adjust the padding on the left and right sides of the v-select menu checkbox in Vuetify 3. How

While trying to reduce the left padding of the v-select menu checkbox using the F12 debugger, I encountered an issue where the menu suddenly disappears when clicked. This makes it difficult to see the active menu. Attached is a screenshot of the select me ...

Steps to resolve transition zoom issues with images

I'm having trouble showcasing blog posts with an image. Currently, I am utilizing card-columns from Bootstrap 4, and when the user hovers over the image, it scales up. The issue arises when the transition occurs, as my border radius resets to defaul ...

How to implement a Django block for loading CSS files

I have multiple pages and I need to load unique CSS for each page. I am using this method for all static files. In the head of my index.html file, I have the following code: {% block css %} {% endblock %} However, in my contact.html file, I have the fol ...

The landscape orientation media query does not adhere to the specified maximum width

I am currently working on creating a mobile landscape design for a website specifically tailored for iPhone SE and iPhone 12. In the process, I encountered an issue that caught my attention: Within two different breakpoints, I made adjustments to the top ...

Spring Data MongoDB encounters issues when accessing a private field from a parent class

@Getter @Setter @Wither class A { protected final List<String> list; //constructors } @Document @Getter @Setter @Wither class B extends A{ } When attempting to retrieve the document for class B from the Mongo database, an exception is thrown sta ...

PHP A more organized method for passing button values when the value is specifically 0

Hey there, I've come across a situation where I had to make some tweaks to my code to get it working. I'm curious if there is a cleaner solution out there that I might be missing, or if my workaround is actually the best approach for solving this ...

LabeFor does not automatically create the display-lable class attribute

When setting up a new MVC project, the default Site.css file typically includes the following styles: /* Styles for editor and display helpers ----------------------------------------------------------*/ .display-label, .editor-label { font-weight: ...

Guide on creating HTML content within a ToolTip function for a table row

I'm working on implementing a tooltip feature that will appear when hovering over a row with extensive HTML content. This feature is intended to be used alongside Foundation framework. However, I am encountering issues getting the tooltip to work prop ...

Discover the secrets to showcasing just the vivid hues of red and green based on a specific threshold with the HTML Meter component

Hello Team, I am trying to use a Meter Element in HTML and I want to display either Red or Green color depending on the value change. When the Value is less than 20, I want the Meter color to be RED, and if the Value is greater than 20, then the Meter col ...

Element that emulates a different element in HTML

Is it possible to have one element that can control and change multiple clone elements, mimicking every change made to the original? While JavaScript & jQuery can easily achieve this, most solutions involve separate variables or instances for each element ...

When dealing with lengthy product names, Python Selenium may encounter difficulty retrieving the product's name

I need to extract information about all products (such as name, image, price, and link) from . However, I encountered a problem where the product card cannot display the full name of the product if it is too long, resulting in the name and price being retu ...

Data to object transformation in design patterns

If I have data stored in a file or database, it could be in various formats like JSON, XML, YAML, CSV, String[], and more. I am interested in creating model objects based on this data. For instance: Data: { "name": "John Doe", "age": "30" } Mo ...

Jenkins launches Chrome with a restricted viewing size

My Selenium script (in Java) with Jenkins is using the Chrome browser. However, I am facing an issue where Jenkins opens the browser with dimensions 1040x784, despite my attempts to increase it to desktop browser size. The code I used to increase the dimen ...

What is the best way to utilize jQuery to expand an HTML form?

For my new web application project, I am working on a feature that allows users to create messages with attached files. Check out this image for multiple HTML file inputs using jQuery: http://img39.imageshack.us/img39/4474/attachments.gif One of the func ...

What is the method for showcasing an image stored in a Mysql database as a Medium Blob on my webpage?

After following instructions from the internet, I have implemented the following code in my HTML: <img src="imagescript.php?id=1"> Additionally, the imagescript.php file contains the following PHP code: <?php $servername="loc ...

Using DIV to "enclose" all the elements inside

I need assistance with my HTML code. Here is what I have: <div id="cover" on-tap="_overlayTapped" class$="{{status}}"> <form method="POST" action="/some/action"> <input required id="name" name="name" label="Your name"></input> ...

"Utilizing the power of AWS Lambda and API Gateway in conjunction with a

I'm diving into the world of AWS Lambda for the first time, and I'm exploring the possibilities of utilizing AWS web services to achieve my goals. Here's the scenario: a SaaS website will be sending JSON data whenever an event occurs on the ...

A Java-based digital cash register model designed to replicate the functions of a traditional physical cash register

I am in the process of developing a cash register system to handle transactions. Here are the steps involved in a transaction: (1) The customer initiates a purchase by selecting an item and its price. (2) The customer then provides the cashier with the ...

I am encountering difficulties in initializing the browser with Selenium

Here is my code : import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class FirstAutomation { public static void main(String[] args) { System.setProperty("webdriver.chrome.driver", "C:\\Use ...

Is it recommended to include the size of the box-shadow in the overall dimensions of the element?

I'm aware that by default it doesn't behave this way, but I'm attempting to make it do so. I'm in the process of constructing a button-shaped anchor with a solid box-shadow (no blur) to give the appearance of depth, and upon hovering, ...