Stylename property not overriding styles

Support
#1

So I have a label on the bottom of the menu pane of my main screen. I’ve set the StyleName property to “tiny” but it does not override the default normal text size as it should.

Very simple test project attached. Just build/run it, log in as the default admin user, see label at bottom of menu pane. It should be tiny, but instead it’s the normal default text size.

styletest.zip (80.8 KB)

#2

Anyone? :slight_smile:

#3

Hi, Jon

I think the reason is that the styles ‘tiny’, ‘small’, ‘large’, ‘huge’ were predefined in the ‘halo’ theme. The documentation mentions it exactly like this: Style name
And your test application with a helium theme.
There doesn’t seem to be that style there.
For example, helium has a stylm bold for label.
And it works.
image

#4

That is not quite the case. If I use the F12 developer tool in Chrome and inspect that element, I see that, among numerous others, the element has the styles .v-label and .v-label-tiny - .v-label assigns size 14px and .v-label-tiny assigns 12px. The tiny style simply does not override the regular label as it should. If I uncheck label in the inspector, the size does change to small as it should.

So there’s some hierarchy/priority issue.

1 Like
#5

Would like some guidance/help here.

#6

Interestingly, bold, h1, and light work fine. It’s just the size based ones like tiny and small etc that do not override the default size for the component.

Very odd.

#7

I temporarily got around this by doing the following in onAfterShow:

        Page.Styles styles = Page.getCurrent().getStyles();
        styles.add(".medflex-small { font-size: 10px !important; }");

        versionInfoLabel.setStyleName("medflex-small");

But obviously, use of !important is a kludge, and the built-in tiny, etc should override the default size for the components.

#9

@krivopustov since you’re on a roll answering threads today… ? :slight_smile:

#10

Hello, Jon!

Thank you for reporting the problem! I’ve created an issue to support tiny style name for Label in Helium theme.

See Label in Helium theme does not support tiny and huge style names · Issue #1515 · jmix-framework/jmix · GitHub

You can avoid using important by increasing the priority of your selector. For instance:

.v-label.medflex-small {
  font-size: 10px;
}

If your project contains extended theme, you can move your style there.

#12

It seems a bit silly to have styles supported or not by component. If a style is there, it should be supported on ANY component one wishes to apply it to. O_O

#13

Not actually all components have these styles. Vaadin Valo theme provides tiny, huge, etc selectors for certain set of components. It seems that Jmix Helium theme just has selectors with greater priority for the Label and “override” some CSS attributes.