Need some help with form font-size skin styling

[mathias]

Hey guys, I have a CSS thing i can't figure out and i'd appreciate some pointers.
I can't seem to make changing font size for titles for forms work in 13...

(EDIT i had a longer post here before but figured out that it was because of what i write below)

Outside our smartgwt-skin, we have a separate css with some additional things. One section we have is

body {
     //other stuff
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 12px;
}

In our web-remake we're working on, a star was added after the body at one point... which i now understand causes other font-sizes in the stratus skin to be ignored, mostly.

However, in our forms i discovered a strange thing. Here is a title in the form:

<span $89="isc_TextAreaItem_1" $9a="$9g" id="isc_1Y" style="display:inline-block;" class="formTitle" align="right">
<label id="isc_20" for="isc_1Z">Note</label><span aria-hidden="true">&nbsp;:</span></span>
</span>

Here, changing the .formTitle skin font-size does not affect the text, but it DOES affect the colon (:). Why is that? Is it becuase the colon is inside a span? Is it supposed to behave like that?

[Blama]

Hi @mathias,

I just tested out of interest here (current 13.0d Enterprise) - I can successfully edit in Firefox F12 tools:


Best regards
Blama

[Blama]

mathias: Same in Stratus skin.

[Isomorphic]

mathias - this sounds like a missing style declaration - a couple of questions:

- What's the date on your 12.1 production build? Is it pretty old? We ask because many enhancements have been made in 13.0 skins, including new stateful styling, and some of these were ported back to 12.1. So, your original customizations might not cover all 13.0 states

- in your customized skin, have you added a new new block, or updated an existing one? If the former, be sure your custom block covers all the states you see in the 13.0 css file for .formTitle et al (.formTitleFocused, etc)

[mathias]

Hi guys, appreciate responses!

To clarify: All works as expected when i use the skin styles for forms, both in 12.1 (i'm running an august 2020 version), and 13.0.

in a global css i also use i have a "default" body section where i list, among other things, font-style.

If i suffix that style with a '*', it makes the font-sizes in the stratus skin not to be applied. From what i've learned it's because that's how the star it's supposed to behave, it's an 'override'.

However, that colon seems unaffected by the star. If i have the star there, the colon size is still changed when i change the font-size in the .formTitle style (but the title text itself remains unchanged).


The above happens to me when i run the stratus skin unchanged.

[Isomorphic]

Hi Matthias, so to sum up, no change in SmartGWT styling, but you added some CSS rules of your own that changed the rendering.

We would definitely recommend brushing up on CSS precedence rules, including the distinction between selectors for immediate children vs indirect children (which is why CSS treats that nested span differently).

If you write certain kinds of rules you can end up affecting every element on the page, which can be useful for a simple web page, but will generally break any component that features auto-sizing, clipping and similar features.

[mathias]

Yeah, pretty much. I had missed that we had added a star to one of our styles in addition to your css. I did still not get how it affected the title and colon in different ways, but you kindly explained that my suspicion about the colon being in a span was indeed the reason. Thanks!