B4J Question [ABMaterial] how to add CSS into ABMCustomComponent

jinyistudio

Well-Known Member
Licensed User
Longtime User
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/

B4X:
    #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;
    }
 

jinyistudio

Well-Known Member
Licensed User
Longtime User
Could i write those code in my ABMCustomComponent !? And then load it in ABMpage with AddExtraCSSFile.
 
Upvote 0

alwaysbusy

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

B4X:
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:

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

So in your case, this 'may' work:

B4X:
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
 
Last edited:
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
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:
B4X:
Dim CSS As String = $"@media screen and (min-width: 880px) {
              button i {
             background-color: lightgreen !important;
              }
             }"$
   page.InjectCSS(CSS)
 
Upvote 0
Top