Utilizing external stylesheets with CSS selector inheritance in GWT UiBinder

Using GWT 2.4.0 + UiBinder has been a great experience for me.

In the ui.xml file, I made a reference to an external style sheet with the following line.

<ui:style
    type="com.codelaboration.twykin.frontend.widgets.qa.client.view.QABox.QAStyle"
    src="QABox.css" />

Following that, there is some code in the same ui.xml file.

<div class="{style.imagePanel}">
      <div ui:field="lblUser"/>
</div>

I defined the "imagePanel" in QABox.css and utilized CSS inheritance to apply the CSS to all divs within the imagePanel class:

.imagePanel {float: left; width: 100px; text-align: center;}
.imagePanel div {float: right; width: 530px;}

The issue arises when GWT obfuscates the style name, resulting in a change from 'imagePanel' to a strange name, rendering ".imagePanel div" ineffective. So my question is how to effectively use CSS selectors in UiBinder when an external stylesheet has been declared in ui.xml only.

Thank you.

gwtuibindercss

Answer №1

If you want to include external CSS in your GWT application, you need to provide the relative path to your style resource.

Here is a snippet of code:

In your UiBinder XML:

<ui:style src="QAStyle/QABox.css" />

    <div class="{style.imagePanel}">
          <div ui:field="lblUser"/>
    </div>

This will locate the CSS file in the QAStyle package.

Alternatively, you can also utilize ClientBundle to avoid any path issues. Check out Using an external resource for more information.

Hopefully, this will be helpful to 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

How to eliminate the border/margin on the ::after CSS pseudo element

Is there a way to remove the orange border around the ::after CSS pseudo-element, similar to what I have demonstrated in my fiddle linked below? http://jsfiddle.net/53ekh8ps/ #login_table tr:nth-child(n+2):nth-child(-n+4) td:first-child, #login_table tr: ...

htmlcss

Utilizing CSS to Rearrange Columns Depending on Screen Size

Check out the progress on this page: If you scroll to the bottom, you'll find a list of links - displayed in 4 columns in the regular view. When you resize the screen, they shift into a single column. I want them to show as a single column on an iPh ...

htmlcss

How can I ensure the carousel stays centered on a webpage even after resizing the browser window?

Currently in the process of developing a website, I have implemented a jquery-based carousel on the homepage sourced from here. However, substantial modifications were made to tailor its appearance specifically for the site. The issue at hand is that I hav ...

javascriptjqueryhtmlcsscarousel

What is the best way to make sure that the parent div of an svg shows its shadow on top of the svg itself?

I am in the process of creating an interactive world map using an SVG map. The SVG format is necessary because I have implemented functionality to zoom in and move the map around. However, a challenge has arisen: the SVG element is obstructing the shadow o ...

htmlcsssvg

When selecting a new tab in HTML, the current page position remains unchanged. However, I would like the page to automatically scroll to the

In the design of my website, I have incorporated buttons that are linked to various pages using navigation tabs. However, when these buttons are clicked, the view maintains its position on the new page (e.g., halfway scrolled through the page). Instead o ...

htmlcss

Can you create an HTML page that does not include any images, screenshots, or descriptions?

I need to design an HTML page that resembles the image linked below, but without relying on any images. https://i.sstatic.net/PwioF.png ...

javascripthtmlcss

Placing a table inside a div container to ensure compatibility on all browsers

Although I typically avoid using tables, I am struggling to find a better solution for setting up a page layout with a search bar, three buttons, and two hyperlinks stacked on top of each other. The challenge is to have this control centered on the webpage ...

htmlcss

I need help getting rid of the unwanted text and objects that are appearing on my website

I recently designed a basic website and everything was running smoothly until I decided to insert a new ul division in the HTML page as a spacer between two elements: <div> <ul> <li><a></a></li> </u ...

htmlcss

What is the best way to switch back and forth between two div elements?

I've been attempting to switch between displaying div .cam1 and div .cam2, however, I can't seem to get it to work. Here's the code snippet in question: HTML: <div class="cam1"></div> <div class="cam2"></div> CS ...

javascriptjqueryhtmlcss

Tips for vertically aligning values in a Bootstrap table

Currently, I am working on generating reports for an NGO that conducts surveys in schools. Once the reports are created, they need to be sent out in a specific format. While a simple table structure would suffice, I have decided to use Bootstrap classes to ...

htmlcsstwitter-bootstraphtml-table

"Learn the steps to toggle a sub menu using an onclick event and how to hide it using another

I created a sidebar navigation that displays submenus on mouseover, but I want them to open on click and close when clicking on the same tab. Please take a look at my code on this CodePen link. Thank you. <nav class="navigation"> <ul class="mai ...

javascripthtmlcss

Creating functional dropdown menus with popperjs in the latest Bootstrap version 5

Currently, I am attempting to implement dropdown menus in Bootstrap 5. According to my research, this feature requires Popper.js integration, but I am uncertain of the correct way to include it in my Laravel project that utilizes Laravel Mix. I have made ...

javascriptcsslaravelpopper.jsbootstrap-5

There seems to be an issue with the functionality of the selection and multiple

I have been utilizing Materialize to design my website. However, I am encountering issues with the following code: <div class="input-field col s12"> <select> <option value="" disabled selected>Choose your option</option> <o ...

htmlcssmaterial-design

JQuery - Triggering mouseenter/hover event only on top-level menu items, excluding the nested submenu items (list items that are not within nested lists)

I have a complex navigation menu structure with nested lists, and I'm struggling to trigger an event only on the top-level items when hovered. Despite trying different jQuery selectors and methods, such as using the NOT selector or targeting direct ch ...

javascripthtmljquerycss

Engaging JavaScript Navigation

I am looking to create an interactive JavaScript menu or image map where users can press down, highlight, and hit enter on four different items to reveal hidden messages. However, I struggle with JavaScript and could really use some assistance. I have alr ...

javascripthtmlcss

Styling the <sup> and <sub> tags from the start

Recently, I've come to the realization that most HTML tags within the body act as text tags with added styling features: For example: a { color: blue; text-decoration: underline; } b { font-weight: 700; } I began to wonder about the < ...

htmlcss

Functionality of inline forms on medium-sized screens

My inline form is not aligning elements correctly on medium screens. When the screen size reaches 666px, the form splits into 4 rows as shown in this bootply. The problem arises with the second row when the screen size is less than 660px. It only display ...

htmlcsstwitter-bootstrap-3

Adjusting the transparency levels of all div backgrounds simultaneously

Is there a way to uniformly add an alpha value to all the divs on my web page without specifying the exact color code in 'rgba'? I have divs with different background colors and I want to easily revert the changes if needed. Perhaps something al ...

htmlcss

The button's background color fails to update promptly in React, despite other CSS properties functioning properly

Utilizing React and Material-UI, I've implemented data filtering using filter and map methods. However, I noticed that when I click on a button, all CSS properties update correctly except for the background color, which only updates after clicking out ...

cssreactjsbutton

Challenges arise when trying to coordinate scrolling movements between a canvas element and the remaining content on the webpage

I'm currently stuck on a project involving a Three.js canvas with OrbitControls for interactive 3D visualization. The main issue I'm facing is the lack of synchronization between scrolling within the canvas and the rest of the page content. Whil ...

javascripthtmlcssthree.js