B4J Question [ABMaterial] how to add CSS into ABMCustomComponent

[jinyistudio]

Hi

I have create a custom component. I need put some CSS code into the <head></head> block of the abmpage. Could you tell me how to implement it !?

Original javascript code : http://workshop.rs/2012/12/animated-progress-bar-in-4-lines-of-jquery/

    #progressBar {
        width: 400px;
        height: 22px;
        border: 1px solid #111;
        background-color: #292929;
    }
    #progressBar div {
        height: 100%;
        color: #fff;
        text-align: right;
        line-height: 22px; /* same as #progressBar height if we want text middle aligned */
        width: 0;
        background-color: #0099ff;
    }

 

[alwaysbusy]

Save it in a .css file in e.g. the css/custom/ folder and then use:

page.AddExtraCSSFile("custom/myfile.css")

 

[jinyistudio]

Could i write those code in my ABMCustomComponent !? And then load it in ABMpage with AddExtraCSSFile.

 

[alwaysbusy]

No. It needs to be a seperate file to be added.

 

[alwaysbusy]

It is a bit tricky (and untested) but maybe something like this could work as I use the stylesheet jQuery plugin:

page.ws.eval("$.stylesheet('#" & yourID & " h2', {'font-size': '1.2rem','text-transform': 'uppercase','line-height': '35px'});", null)
page.ws.flush

Take note that both the key (like font-size), and the value (like 1.2rem) need to be between single quotes!
so syntax is:

"$(stylesheet('Selector', {'key1': 'value1', 'key2': 'value2',...});"

So in your case, this 'may' work:

Dim CSS As String = $"$.stylesheet('#progressBar' , {'width': '400px', 'height': '22px', 'border': '1px solid #111', 'background-color': '#292929'});
$.stylesheet('#progressBar div' , {'height': '100%', 'color': '#fff', 'text-align': 'right', 'line-height': '22px', 'width': '0', 'background-color': '#0099ff'});"$
   page.ws.Eval(CSS, Null)
   page.ws.Flush

 

[alwaysbusy]

Note that you may be needing to use !important in the value if it needs to overwrite a default one.

e.g.

'width': '400px !important'

 

[alwaysbusy]

ABMaterial 3.00 Chipmunk will have a method to inject CSS. You can use normal CSS, including things like e.g. @media. Of course you will need to be very precise with your selector and a good knowledge of CSS will be required.

Usage:

Dim CSS As String = $"@media screen and (min-width: 880px) {
              button i {
             background-color: lightgreen !important;
              }
             }"$
   page.InjectCSS(CSS)

 

[Mashiane]

Perhaps .InjectJavaScript also???