Setting CSS class property on Controls

I’m trying to create a single set of controls in the IDE and then use the CSS styles created (in the index.html file, <style> token) and assign the CSS styles to other controls I create at runtime.

What I’m trying to avoid is manually typing in the CSS style info in the IDE. As I decide to make changes to the UI, it would be a clumsy step to update the CSS manually.

I see if I create a control with the class property blank, the ID is used to reference the CSS info stored as #ID. If I create a control and add the class property with the name of an existing control’s ID, it adds the class attribute to the HTML. But the class style is not applied. The style is in the index.html…

Put the CSS styling into Project CSS. It will get picked up properly at runtime.

I setup a specific test that has two labels (common controls).

I then run that form on desktop in chrome. Using the inspector I did the following:

I inspected both Image1 and Image2. They had those IDs and just the attribute class without any assignment. In the styles, it shows #Image1 and #Image2 CSS definitions as expected.

On Image2 I changed in chrome class to class = "Image1"

then I refreshed the styles panel for Image2 and nothing changed. It still pointed to #Image2

I then change Image2 class to class = "#Image1"

Still no change.

I tried making the same changes in the IDE in the class property and the resultant HTML was identical to what I edited in chrome. And still no change. It always pointed to #Image2. I of course could not change the ID in the IDE :wink:

Next I changed in chrome the ID to Image (not defined).

This gave, no matter what was in class, the default user agent style sheet.

I must be missing something.

.

The # is used to refer to the id of an element. I’m not sure what will happen if you create a class which starts a # - it’s certain to confuse somebody or someone.

Use a period (.) in your css expression to refer to a class, and # to refer to an id.

In other words, I can not point a control to use another controls CSS definition.

I see that I can create .class styles in the project and refer to them on the control. However, they are in the hierarchy at a higher level than the #ID styles, eg, the #ID style will modify the .Class style. This was a bit unexpected, but it can work.

If I don’t have a #ID entry for a control, then the .class will be the “winning” style, other than any styles applied to the element itself in the style property.

With this, I can create unique ids, but not setup the # styles for these new controls, but set them all to .class styles that are replicants of the #ID styles.

After some experimenting, I found that it is rather easy to add the CSS class, as George states. Simply create a unique name for the class and type it in the property class and add a .class name to the CSS of the project with a period in front of the class name. The original CSS of the control, which was defined in by app studio in another style tag, is ignored if the class property is specified. Note, the ID of the original CSS mappings use a # in front of the control ID.

That all works just fine. Now lets say you have a base CSS Class and specific control CSS Classes you want to apply to different controls. You want the base class to be processed first, so that any overrides of the base class in the control class will override the style. To specify more than one class, you just add them with a space between the names.

However, there’s a gotcha in this. One would think the styles would be applied in the order you specified them in the class property of each control. Sorry - doesn’t work that way.

The hierarchy of the CSS class is the order they are specified in the CSS section of the project (or, in HTML, the order they are specified in the STYLE tag). I don’t think this really creates any oddities, as usually base classes are always a base class. EG, the ordering would never change.

The joy of “Cascading” and learning that what comes after overrides what came before.

Just so you know you can also limit classes to elements. In your .css file if you create the following style:


div.goofy {...}

This will only be applied to divs with the class of goofy and should bypass other elements with the class of goofy. This is useful for modifying someone else’s .css (like bootstrap) as it applies to very specific controls without changing the .css for other controls.

So instead of specifying the class on the element, use a naming convention to specify a group of elements. This would work particularly well in my CSSGrid where there will be a set of controls repeated multiple times. And I like that it allows changing of externally created control CSS - very effective. I hadn’t gotten to that issue yet. :slight_smile: