B4J Question [ABMaterial] How can I set the height of a row?

Dianzoa

Active Member
Licensed User
Regards,
I put a ABMInput in the last 2 columns, but the height of the row got bigger. How can I change that?
Awesome framework so far I have tested!
Thanks, Diego.
PS:I attached and image of the table when running the app with the input, and a "normal" table with just labels, note that the second table has a smaller row height
 

Attachments

  • tabla_con_inputtext.png
    tabla_con_inputtext.png
    11.6 KB · Views: 205
  • tabla_normal.png
    tabla_normal.png
    12.2 KB · Views: 196

alwaysbusy

Expert
Licensed User
Longtime User
For the moment, you can set the input.Narrow to true.

this is because Materialize CSS follows the Material Design guidelines. However, I had the question before to make it more narrow so v4.30 (released next week) will have some extra theme properties where you can really regulate some css properties:

Before 4.30, without narrow
B4X:
Dim inp0 As ABMInput
inp0.Initialize(page, "inp0", ABM.INPUT_TEXT, "", False, "")
inp0.PlaceHolderText = "inp 0, default"
page.Cell(2,1).AddComponent(inp0)

Before 4.30, with narrow
B4X:
Dim inp1 As ABMInput
inp1.Initialize(page, "inp1", ABM.INPUT_TEXT, "", False, "")
inp1.PlaceHolderText = "inp1 with narrow"
inp1.Narrow = True ' using narrow
page.Cell(3,1).AddComponent(inp1)

4.30+ (the 2rem in the second line for the height really makes it a lot tighter)
B4X:
theme.AddInputTheme("mini")
theme.Input("mini").ExtraStyle = $"padding-top: 0px !important;padding-bottom: 0px !important;margin-bottom: 5px;margin-top: 0px;"$
theme.Input("mini").ExtraStyleInput = $"padding-top: 0px !important;padding-bottom: 0px !important;margin-bottom: 0px;margin-top: 0px;height: 2rem !important"$

...

Dim inp2 As ABMInput
inp2.Initialize(page, "inp2", ABM.INPUT_TEXT, "", False, "mini")
inp2.PlaceHolderText = "inp2 using the new theme style properties"
'inp2.RemoveBottomLine = True ' optional, doesn't have any effect on the height
page.Cell(4,1).AddComponent(inp2)

upload_2018-5-19_10-14-54.png
 
Upvote 0

Dianzoa

Active Member
Licensed User
For the moment, you can set the input.Narrow to true.

this is because Materialize CSS follows the Material Design guidelines. However, I had the question before to make it more narrow so v4.30 (released next week) will have some extra theme properties where you can really regulate some css properties:

Before 4.30, without narrow
B4X:
Dim inp0 As ABMInput
inp0.Initialize(page, "inp0", ABM.INPUT_TEXT, "", False, "")
inp0.PlaceHolderText = "inp 0, default"
page.Cell(2,1).AddComponent(inp0)

Before 4.30, with narrow
B4X:
Dim inp1 As ABMInput
inp1.Initialize(page, "inp1", ABM.INPUT_TEXT, "", False, "")
inp1.PlaceHolderText = "inp1 with narrow"
inp1.Narrow = True ' using narrow
page.Cell(3,1).AddComponent(inp1)

4.30+ (the 2rem in the second line for the height really makes it a lot tighter)
B4X:
theme.AddInputTheme("mini")
theme.Input("mini").ExtraStyle = $"padding-top: 0px !important;padding-bottom: 0px !important;margin-bottom: 5px;margin-top: 0px;"$
theme.Input("mini").ExtraStyleInput = $"padding-top: 0px !important;padding-bottom: 0px !important;margin-bottom: 0px;margin-top: 0px;height: 2rem !important"$

...

Dim inp2 As ABMInput
inp2.Initialize(page, "inp2", ABM.INPUT_TEXT, "", False, "mini")
inp2.PlaceHolderText = "inp2 using the new theme style properties"
'inp2.RemoveBottomLine = True ' optional, doesn't have any effect on the height
page.Cell(4,1).AddComponent(inp2)

View attachment 68071

Wow! Amazing!!! The narrow property will help. But that "mini" option will be glorious :)
Thanks!
 
Upvote 0
Top