CSS - Replacing selected properties

[Steve Workings]

I'm using action javascript to open a grid in a div, and specifying the master style for the opened grid.

But, I'd like to adjust a couple of the target grid's CSS properties, specifically:

.iOSGridData {
    font: 12px Verdana;
    padding: 3px;
}

But I can't find a way to do this.

There's no effect if I specify this as part of the Target DIV style in the action javascript.

Putting it in the target grid's Local CSS definitions doesn't work.

And I'm having no luck setting it with javascript either -- the $ss() function -- as a second action of the action javascript.

I cannot assign a complete new style to the target grid, so I have to try this approach, or some other method to variably control these properties.

Any ideas?

[Pat Bremkamp]

Re: CSS - Replacing selected properties

Steve,

You may know this already, but in CSS for things like you want, the CSS statement that is closest to the point of use is usually the winner. So, if you apply that statement at the div level, it will not override the statement Alpha puts at the data level. That is, in

<div style="font: 10px Verdana"> <p class=".iOSGridData">Hello world</p></div>

the class assigned at the paragraph level will override the style in the div

I have not looked at V12, but what you need to do is change the CSS at the field or cell level.

[Steve Workings]

Re: CSS - Replacing selected properties

Thanks Pat - I understand the last one in wins. The "problem" I have is this:

My application uses two styles: MoBlue and GrBlue. Sometimes, GrBlue is just appropriate for particular uses in this app.

But, I'm now building a complete new module for the app with a complete build in v12 using the mobile stuff, panels and the iOS style. And many of the grids in my existing system are needed in the new module. When I call a grid that's set for MoBlue (actually, most of these are set for "Project Style") then all is fine. But if I call a grid into the iOS module that uses GrBlue, and I want to keep using GrBlue, it just doesn't work and needs the adjustment I set out here.

I really don't want to go to all the grids that use GrBlue, all their fields/cells/controls and add in what you're suggesting. I'm looking for something that's a level or two higher so that I can, with a little less work and tedium, call my GrBlue grids into the iOS-styled module, have them look and behave as I need.

I was kinda hoping to avoid this lengthy explanation, but maybe it explains why I asked the question the way I did -- I'm pretty sure I know what I need and am looking for a broader way of implementing it.

[Clipper87]

Re: CSS - Replacing selected properties

Steve,

Have you looked at style overrides like you have in a grid ?

[Steve Workings]

Re: CSS - Replacing selected properties

Yes Frank. The little code snippet in my original message is what I need and have tried in the grids' CSS local styles. Doesn't do the job as I'd expected it would.

[Clipper87]

Re: CSS - Replacing selected properties

Steve

Are you opening the target grid from a parent grid ? If yes then that is what I mean with style overrides. Have not used that to date but seems like what you need.

so1.pngso2.png

[Pat Bremkamp]

Re: CSS - Replacing selected properties

Steve,

If you can somehow add a second stylesheet statement after the one Alpha inserts, then you can put the same style class name with a different value in it, and it will be used instead of the one in GrBlue, or add a manual stylesheet that will override one that is called from another location.

So, after the statement
?x_SIGNUP.Output.Head.CSS_Link (for a grid named "Signup")

add
<link href="css/MyOverride/style.css" rel="stylesheet" type="text/css" />
and in the MyOverride directory put a style.css sheet that only contains your overrides with the same name and the ones you want to replace,

or in the head section of the page (if the grid is in a page) put a manual stylesheet like:

<style type="text/css">
.iOSGridData {
font: 12px Verdana;
padding: 3px;
}
</style>

[Steve Workings]

Re: CSS - Replacing selected properties

Pat - parent his a UX, opening the child grid in a DIV in the UX. So Frank's idea seems on target, and while the local help seems easy to follow, I can't seem to effect any difference.

Somehow, someway, there has to me a way to assign a complete CSS, or at least some of its properties, to a child grid on the fly which is pretty much what I need.

I really really don't want to do this, but I may have to make copies of about 20 grids, just for the mobile style. There ought to be some way to avoid this.

[Clipper87]

Re: CSS - Replacing selected properties

Steve,

Have you played with the "additional component styles" property ? I can't seem to find any doc on it quickly but it may be related to your solution. Just an idea.

[Steve Workings]

Re: CSS - Replacing selected properties

No joy, after many many hours. I'm trying so hard to avoid creating duplicates of components just so I can share the same component in different places with different parent styles, but so far, I just don't see it.

I understand why the iOS parent style is over-writing some of the properties of the GrBlue style assigned to the child grid, but cannot seem to stop it, overcome it, or have much effect at all. What I'd really like to is this:

My parent style is iOS
I have a DIV in a panel.
I have components that are well- and closely-designed to work with the GrBlue style
I'd like to load components into that DIV and maintain all properties of the GrBlue style.

I've even pasted the entire contents of the style.css file for GrBlue into a grid's Local CSS definitions -- no effect.

[Steve Workings]

Re: CSS - Replacing selected properties

Solved, with a big thanks to Michael Darby for the suggestion.

The solution is to use the parent UX Additional Component Styles property.

Edit: I realized when I woke up this morning Frank had suggested the same - no slight intended Frank, and I thank you too for your help.