Implementing varying font sizes for a mobile device in GWT utilizing CssResource and @if condition

When working with GWT using CssResource and ClientBundle, you can create conditional statements like:

@if <deferred-binding-property> <space-separated list of values> {
  ... css rules ...
}

In a recent project of mine, I wanted to adjust the font size for mobile devices. I attempted to do this with the following code:

@def fontSize 1.1875em;
@if formfactor mobile {
  @def fontSize 2.375em;
}
.my_font{
    font-family: Arial;
    font-weight: normal;
    font-size: fontSize;
    cursor: default;
}

However, I encountered an issue where it always used the font size specified within the @if statement, regardless of the "formfactor" (a gwt property based on the device) value. Can anyone provide insight into this problem or suggest an alternative approach to achieving my goal?

cssgwt

Answer №1

Have you attempted to define the font size within an if/else statement?

@if deviceType equals "mobile" {
  @define fontSize as 2.375em;
} @else{
  @define fontSize as 1.1875em;
}

.my_font{
    font-family: Helvetica;
    font-weight: normal;
    font-size: fontSize;
    cursor: pointer;
}

Answer №2

It appears that the issue described here is related to GWT Issue 4697. When CSS variables are used, conditional processing does not seem to take effect. However, a solution could be to create a fontSize() function in your interface extending CssResource, which would then apply conditional processing. For example, in the 'mobile' formFactor permutation, the function result would override the standard substitution in the CSS.

A workaround for this issue is to define a specific variable for the 'mobile' formFactor and utilize conditional processing to modify the CSS properties where the fontSize variable is called upon:

@def fontSizeMobile 2.375em;
@if formfactor mobile {
    @def fontSize fontSizeMobile;
} @else {
    @def fontSize 1.1875em;
}
.my_font{
    font-family: Arial;
    font-weight: normal;
    font-size: fontSize;
    cursor: default;
}
@if formfactor mobile {
    .my_font{
        font-size: fontSizeMobile;
    }
}

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

When the type attribute is set to "password" in Textbox, the CSS

I am new to CSS and I'm currently working on styling my Login page. Everything works fine when I keep the code as it is, but I want to change the password input field type to "password" for security reasons. However, when I do this, the CSS styles are ...

htmlcss

Tailwind and React offer a powerful combination for optimizing HTML structure based on different screen sizes

Is there an optimal method for managing an element's position on a webpage based on screen width? For instance, how can one keep an element in a specific location if the screen width is greater than X and move it to another location if the screen wid ...

htmlcssreactjstailwind-css

Enclosing text with border-wrapped image shadows

Before: After: Using the following pair of images: My HTML: <table class=full> <tr> <td class=showTemp2> THE CONTENT GOES HERE<br><br> SURROUNDED BY THE TWO SHADOW IMAGES<br><br> AND THAT'S IT </td> ...

htmlcss

What are some strategies to stop a jQuery UI button created with a link from inheriting the link's text color?

I recently came across a recommendation to create a jQuery button on top of a link for redirect purposes: <a href="/search" class="button">My link</> $(".button").button(); However, I noticed that if the button class has a red foreground colo ...

jquerycssjquery-ui

The options in the drop-down menu appear to be stuck and remain in place

Can someone with expertise lend me a hand? I've been racking my brain over this issue, and while I feel like I'm on the right track, I just can't seem to make my sub-sub menu items drop down to the right on hover. I suspect there might be c ...

htmlcssdrop-down-menu

How can the horizontal scroll bar width be adjusted? Is it possible to create a custom

Within my div, I have implemented multiple cards that scroll horizontally using the CSS property: overflow-x: scroll; This setup results in a horizontal scrollbar appearing under the div, which serves its purpose. However, I would prefer a customized scr ...

javascriptcssreactjs

Tips for embedding a hyperlink in your HTML website

While I've mastered adding images to my HTML website, there's one thing that still eludes me despite scouring numerous online resources. I recently created a small animation using JavaScript on a different IDE, and I have the link to my output: ...

javascripthtmlcss

What is the reason for this only functioning with the "!important" declaration?

Can anyone help me troubleshoot this code? It seems to only work with the !important rule, which I prefer not to use. I believe there must be a way to achieve the desired outcome without relying on it. What's intriguing is that the CSS line in questi ...

htmlcss

Using jQuery, selectively reveal and conceal multiple tbody groups by first concealing them, then revealing them based on

My goal is to initially display only the first tbody on page load, followed by showing the remaining tbody sections based on a selection in a dropdown using jQuery. Please see below for a snippet of the code. //custom JS to add $("#choice").change(func ...

javascriptjqueryhtmlcss

To enhance the user experience and improve performance, I will be implementing pagination on this page to efficiently display a dynamically generated set of elements

Currently working with CodeIgniter, where I am uploading a file into the database. Now, upon clicking a button, I wish for that file to be downloadable on the front end. ...

phpjqueryhtmlcsscodeigniter

Achieving uniform width among flex items

How can I make blocks with the class name .b have equal width? .parent { display: flex; } .parent>div { flex: 1 1 auto; } .parent .b { display: flex; } <div class="parent"> <div class="cell"> <div class="b"></div> ...

cssflexbox

Designing a navigation bar with CSS

I created a CSS menu using ul li elements with the goal of making them cover the entire width of the div when placed next to each other. Currently, it appears like this: https://i.sstatic.net/uKbzs.png My aim is to have the green area touch the borders. B ...

htmlcss

What is the resulting height when both a <p> and <span> tag are styled with em font sizes?

When working on designing in the browser with CSS, it is important to note that the font-size set on a <span> tag is relative and based on the <p> tag. Exploration After conducting some research, I came across a recent question related to nes ...

htmlcssfont-size

What is the best way to position a row of divs above their parent div?

Need guidance on placing a row of divs (each with 3 columns of images) on top of a parent div (image) using Bootstrap 5. Previously used position: absolute, but encountering overflow issues. Attempted overflow: visible as well. Provided below is the code s ...

htmlcsstwitter-bootstrapbootstrap-5

What is the best way to halt my jQuery animation?

(function ($) { $(document).ready(function () { $('#road').pan({ fps: 30, speed: 9 }); $('#city2').pan({ fps: 30, speed: 2 }); $('#city3').pan({ fps: 30, speed: 5 }); $('#sky') ...

jqueryhtmlcssanimation

Modifying the appearance of a marquee tag with JavaScript: A step-by-step guide

I am trying to change the height of a marquee tag depending on a calculation using javascript. I have tried this: /*jslint devel: true */ function maths() { "use strict"; var x = Math.floor((Math.random() * 1080) + 1); document.getElement ...

javascripthtmlcss

What is the method for displaying the delete icon, a child component located within the Menu Item, upon hovering over it using Material UI CSS syntax?

My goal is to display the delete icon when hovering over a specific menu item that is being mapped using the map function. The desired functionality is for the delete icon to appear on the corresponding menu item when it is hovered over. I attempted to i ...

javascriptcssreactjsreact-nativematerial-ui

Adjust the span's width to make it shift position

Currently, I am in the process of learning HTML and there is a specific question that has come up for me. Within my <div class="input-group">, there are three elements: one span, one input field, and another span: <span class="input-group-addon q ...

htmlcsstwitter-bootstrap

Design a customized menu using a JavaScript JSON array

Looking to generate a menu using JSON Array data Here is the JSON Array: [{ "page_id":"102608802958096849","title":"Submenu 1 1","page_order":1,"parent_id":"305280635460611248","layout":"header","page_url":"submenu-1-1.html" },{ "page_id":"207782 ...

javascripthtmlcssarraysjson

Generate a menu submenu allowing for interactive toggling and dynamic visualization of expandable/collapsible sections upon clicking, featuring visually

Looking for assistance in creating a dynamic menu with sub-menus that can expand upon clicking. The goal is to have an expandable menu structure where the user can click to expand or collapse certain sections. However, my current code is not functioning co ...

javascriptjqueryhtmlcss