B4J Question [ABMaterial] ABMCustomCard Rounded Corners [Solved]

A

Anser

Well-Known Member
Licensed User
Longtime User
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.
 
Sort by date Sort by votes
A

Anser

Well-Known Member
Licensed User
Longtime User
B4X: 
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
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
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:
B4X: 
.bigradius {
    border-radius: 10px;
}

In BuildPage add:
B4X: 
page.AddExtraCSSFile("custom/mycss.css")

In your CreateCard:
B4X: 
    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
 
Upvote 0
A

Anser

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

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

alwaysbusy

Expert
Licensed User
Longtime User
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.
 
Upvote 0
You must log in or register to reply here.
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…