B4J Question [ABMaterial] I did something wrong, and I can't figure out what!

Cableguy

Expert
Licensed User
Longtime User
So, I'm back at breaking @alwaysbusy ABMaterial framework...

This time, going for a cleaner simpler look, I restarted a new template and all was going well... walls were being taken down, and I was progressing...
But now, I'm just stuck! I am amidst of creating my Login Modal Form, and of course, going the route less traveled...
All, is good, but I have spent hours now trying to get my ABMInput components to have round "capsule" like looks.
I have tried everything I can, but going in circles, so I ask the ABM gods... help!
Here's my current project!
 

Attachments

  • Cableguy_Test_Project.zip
    8.7 KB · Views: 43
Sort by date Sort by votes

Cableguy

Expert
Licensed User
Longtime User
here's a dropbox link (too big for the forum)

Dropbox

www.dropbox.com
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
Because of the icon in front, the input has to be wrapped in an ABMContainer by ABMaterial. So we have to sets its border-radius also (I used .roundedParent in this example)

B4X: 
    'add a class for css
    AppPage.AddExtraCSSString(".pillbutton { border-radius: 25px !important; }")
    ' extra class roundedParent
    AppPage.AddExtraCSSString(".roundedParent > .input-field {border-radius: 20px !important; } input.roundedinput {border-radius: 20px !important; padding-right: 40px; }")

And for the inputs:
B4X: 
   ' create the input fields for the content
    Dim inp1 As ABMInput
    inp1.Initialize(AppPage, "username", ABM.INPUT_TEXT, "", False, "LoginInput")
    inp1.IconName = "mdi-action-account-circle"
    inp1.RemoveBottomLine = True
    inp1.HTMLAddClass("roundedinput") ' <-----------------
    inp1.Narrow = True
    
    myLoginContainer.Cell(2,1).AddComponent(inp1)
    myLoginContainer.Cell(2,1).PaddingRight = "30px"

    myLoginContainer.Cell(2,1).SetExtraClasses(" roundedParent ") ' <-------------- spaces here are important!
    
    Dim inp2 As ABMInput
    inp2.Initialize(AppPage, "password", ABM.INPUT_PASSWORD, "", False, "LoginInput")
    inp2.IconName = "mdi-action-lock"
    inp2.RemoveBottomLine = True
    inp2.Narrow = True
    inp2.HTMLAddClass("roundedinput") ' <-----------------
    
    myLoginContainer.Cell(3,1).AddComponent(inp2)
    myLoginContainer.Cell(3,1).PaddingRight = "30px"
    
    myLoginContainer.Cell(3,1).SetExtraClasses(" roundedParent ") ' <-------------- spaces here are important!

 
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
alwaysbusy said:
Because of the icon in front, the input has to be wrapped in an ABMContainer by ABMaterial.
Click to expand...
I really thought of that, but inspecting the element didn't shine that much of a light for me... so I didn't know the div to target!
Thank you Alain!
 
Upvote 0
You must log in or register to reply here.

Similar Threads

  • Question
B4J Question Trying to figure "way" of connection?
Replies
8
Views
2K
Magma
  • Question
Other B4J - EVENTDATA - Something for the NEWBIES - like me.
Replies
2
Views
2K
AlexOfOz
  • Article
Share My Creation [Project Template] Web API Server v1
4 5 6
Replies
111
Views
54K
PABLO2013
  • Question
B4J Question GMaps error - Something went wrong
Replies
2
Views
2K
Star-Dust
Games Very very very simple Xui2d Test Project
2
Replies
35
Views
12K
sorex
S
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…