B4J Question [ABMaterial] ABMCustomCard Rounded Corners [Solved]

[Anser]

Hi,

Is there any way to give a rounded corner look to an ABMCustomCard ?
For containers and modal sheet, we have the property SetBorderEx() which can be used to make the corners rounded.
I could not find any such property for the ABMCustomCard component.

Any help will be appreciated.

 

[alwaysbusy]

Can you provide me with the code of your custom card? I'll see if I can give you some code to do it.

Alwaysbusy

 

[Anser]

public Sub ConnectPage()
  
    CreateCard

    page.Resume
  
    ' refresh the page
    page.Refresh
  
    ' Tell the browser we finished loading
    page.FinishedLoading
    ' restoring the navigation bar position
    page.RestoreNavigationBarPosition

End Sub

'This sub creates the ABMCustomCard on a page
Sub CreateCard

    Dim Card As ABMCustomCard
    Card.Initialize(page,"CardLeadConv","whitetitle")

    Dim RadioLdToWhat As ABMRadioGroup
    RadioLdToWhat.Initialize(page,"RadioLdToWhat","radiodarklabel")
    RadioLdToWhat.Title = "Convertion ratio"
    RadioLdToWhat.AddRadioButtonNoLineBreak("Leads to Cat 1", True)
    RadioLdToWhat.AddRadioButtonNoLineBreak("Leads to Cat 2", True)
    RadioLdToWhat.AddRadioButtonNoLineBreak("Leads to Cat 3", True)
    RadioLdToWhat.SetActive(0)

    ' Code to create a Table named TblLeadConv
    ...
    ...

    Card.SetFrontTopComponent(TblLeadConv)
    Card.SetFrontTitleComponent(RadioLdToWhat)
    page.Cell(3,2).AddComponent(Card)

End Sub

On the ABMCustomCard, I have placed an ABMTable and at the bottom of the AbmCustomCard I have kep an ABMRadioGroup

 

[alwaysbusy]

I'll have a look and see what I can come up with

 

[alwaysbusy]

You will have to write a new CSS rule to change the radius.

Make a new css file in e.g. /www/css/custom/mycss.css

content:

.bigradius {
    border-radius: 10px;
}

In BuildPage add:

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

In your CreateCard:

    Dim Card As ABMCustomCard
    Card.Initialize(page,"CardLeadConv","whitetitle")
    Card.HTMLAddClass("bigradius") ' attach your new class
    ...

You can use the same mycss.css file for other css changes you want to make.

Alwaysbusy

 

[Harris]

Cool.... A little css knowledge can be dangerous....

.bigradius {
    border-radius: 40px;
    border: 5px solid blue;
}

 

[Anser]

The css trick works very well with the ABMCustmCard.
Can the same css trick be used for other ABMControls ? ie ABMList. I tried ABMList unfortunately does not bring any difference in the appearance. Will it be different for each ABMControl ?

Dim StockListView As ABMList
StockListView.Initialize(page, "StockListView", ABM.COLLAPSE_ACCORDION, "list1theme")
'Unfortunately the following line does not bring any change in the appearance
StockListView.HTMLAddClass("bigradius") ' attach your new class

 

[Harris]

Seems more complicated for lists...

border-radius and -moz-border-radius < CSS | The Art of Web

One of the most keenly-anticipated CSS properties is border-radius. It's not yet available in Internet Explorer, but there is limited support in Firefox (-moz-border-radius) and Safari (WebKit). Discussion and examples.

www.the-art-of-web.com

 

[alwaysbusy]

ABM is based on Materialize CSS, so it has its own set of CSS rules which was flat and not a lot of fancy curls. You will have to be creative to overrule them. The browser dev tools are your friends. Sometime, you will have to add !important to overrule the Materialize CSS ones, and sometimes it may just not be possible.