B4J Question [SOLVED] BananoVuetifyAD3 grid problem

Lello1964

Well-Known Member
Licensed User
Hi,

i've downloaded latest version :2.36 of BANanoVuetifyAD3 and tested tutorial #22

I doesn't know how change objects padding & margin, how reduce vertical space between object to 0.
I have triyed to change parameters inside layout es: Padding AXYTBLB : a=0;x=?;y=?;t=?;b=?;l=?r=?
but no changes in form layout.

Where is problem ?

Raffaele
 

Mashiane

Expert
Licensed User
Vertical Spacing:

A. Go to the vuetify documentation, select the v-textifield API, read about what the hide-details attribute / property does. This should help you achieve what you want.

Padding & Spacing

A. To fully grasp the grid in terms of how it works with Vuetify, please read about it here. https://vuetifyjs.com/en/components/grids/

Remember, you can always overwrite anything via BANano.GetElement("#r1c1").SetStyle(BANano.ToJSON("margin-top":"10px", "padding-left":"0px"))

The classes on vuetify like pa-1, px-1, ma-3, ma--3 are just shortcuts. You will need to understand how they work.

On BVAD3, the second tutorial on the grid is coming soon, that will touch slightly on margins and padding, but then again, I'll be reharshing whats on the vuetify documentation and nothing else.
 
Upvote 0

Lello1964

Well-Known Member
Licensed User
Hi,

i must set vertical and orizontal spacing to 0 , i think the classe are pa-0 and ma-0, in your tutorial 22, Text fileds page i have triyed to change spacing but doesn't work.
Can you tell me an example?

Sorry for my questions, but without reduce vertical space between text filed & buttons i cannot develope my app.

Raffaele
 
Upvote 0

Mashiane

Expert
Licensed User
Can you attach an example project?

I don't mind the questions at all, i'm happy to help, however, it is ones prerogative to also "vue-tify" themselves with the docs for understanding.

Yes I understand that some concepts I have not explained yet, thats the reason I have this "beta" library, because things change. Up until I am sure its usable for production, then it will be released, until then, its just tests and debugging.

DM me a screen dump of your screen so that I can see your problem, im sure you need to use the hide-details attribute and ma-2 at least.
 
Upvote 0

Mashiane

Expert
Licensed User
For each of these controls, on the props, we have added CreateMap(":hide-details":true) for example.

1606387861782.png


We have to also add a class of ma-2, to ensure that there are spaces inbetween, that can be done by adding "class":"ma-2" on the props also.

Ta
 
Upvote 0

Mashiane

Expert
Licensed User
You have defined your parent grid as:

1606416294675.png


Meaning, you want 3 rows, with 1 column, the size should be 12 spans for small devices, and 4 from medium to up - Noted.

You want to decrease the spacing between the entered elements, for starters, explore first without the margin indicators. We will remove the zeros, now we have..

In Padding AXYTBLR, a = apply specified value on all margins i.e margin-top, margin-bottom, margin-left, margin-right.
X = apply specified value on margin-left and margin-right

For vuetify, on your element, this adds a class like "pa-0 px-0 py-0 pt-0 pb-0 pl-0 pr-0": This is not necessary. Why?

pa-0 applies 0 to all margins, so pl-0 pb-0 was already applied by pa-0.

If we translate what you have indicated on your design to normal HTML, "a=0;x=0;y=0;t=0;b=0;l=0;r=0"

Lets interpret it...

a=0 => margin-bottom:0;margin-top:0;margin-left:0;margin-right:0
x=0 => margin-left:0;margin-right:0
y=0 => margin-top:0;margin-bottom:0
t=0 => margin-top:0
b=0 => margin-bottom:0
l=0 => margin-left:0
r=0 = > margin-right:0

So basically, you are saying to banano, apply this style

margin-bottom:0;margin-top:0;margin-left:0;margin-right:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0

when you use "a=0;x=0;y=0;t=0;b=0;l=0;r=0"


DONT

What does this mean?

If you set a=0, THERE IS NO NEED to also set b=0,t=0,l=0,r=0
if you set x=0, THERE IS NO NEED To also set a=0,l=0,r=0
if you set y=0, THERE IS NO NEED to also set a=0,b=0,t=0

You are calling the same stuff over and over again. So lets revert back to the original and set it to be NO MARGINS / NO PADDING

a=?;x=?;y=?;t=?;b=?;l=?;r=?

1606416529247.png


The ? mark just indicates "no value is provided" and will replace that with blank internally. So the initial output is..

1606416602095.png


The next thing we will do, is look at how you have defined your child layouts as indicated in:

B4X:
vclienti.Matrix(1, 1).LoadLayout("vtableclienti")
    vclienti.Matrix(2, 1).LoadLayout("vmenuclienti")
    vclienti.Matrix(3, 1).LoadLayout("vclienticontainer")

To be continued...

Update: Download the latest version of BVAD3 and set your vclient grid settings to be:

1606421236857.png
 
Last edited:
Upvote 0

Mashiane

Expert
Licensed User
vmenuclienti

The definition for this is rather confusing.

1606418003008.png


You want a single row with 6 columns.., this produces

1606418068714.png


On small devices, this looks like..

1606418160543.png


If you want 6 columns, then the size of each should be 2 at most so that its 6x2=12 as each row is recommended to span 12 spaces.
If you want 2 columns each taking 6 spans, then the columns should be 2 and sizes = 6.

As Im not clear how your design should be here, I will just fix the margins, paddings and offsets. By defaults, offsets are zero, so there is no need for s=0 etc.

Now we have..

1606418611526.png
 
Upvote 0

Mashiane

Expert
Licensed User
vclientcontainer

Your original.

1606418711843.png


5 rows, 3 columns each. 3x4=12, cool, lets clear the margins and paddings.

Updated...

1606418833863.png


So your complete grid now looks like this...

1606418889298.png


There are spaces in-between rows and columns, why?

At first glance..

B4X:
vclient = v-container
vmenuclient = v-container
vclientcontainer = v-container

So you have v-containers inside a master parent v-container as per your definition here:

B4X:
banano.LoadLayout(vuetify.PlaceHolderName, "vclienti")
    vclienti.Matrix(1, 1).LoadLayout("vtableclienti")
    vclienti.Matrix(2, 1).LoadLayout("vmenuclienti")
    vclienti.Matrix(3, 1).LoadLayout("vclienticontainer")

What is the v-container tag meaning?
 
Upvote 0

Lello1964

Well-Known Member
Licensed User
Hi, Mashy.

thank you for your help and for the time you dedicate to me.
I followed your advice and got the same result as you,
but that's what I want and can't get.

Raffaele
 

Attachments

  • risultato.png
    risultato.png
    4.1 KB · Views: 58
Upvote 0

Mashiane

Expert
Licensed User
that's what I want and can't get
I see, if that is the case, the solution is already provided above in this thread. In each of the text fields, update the properties with :)hide-details:true)

 
Upvote 0

Lello1964

Well-Known Member
Licensed User
I see, if that is the case, the solution is already provided above in this thread. In each of the text fields, update the properties with :)hide-details:true)


Hi,

this is the code:

but doesn't work

B4X:
Sub Initialize
    'establish a reference to the app
    vuetify = pgIndex.vuetify
    'initialize the component
    clienti.Initialize(Me, name)
    path = clienti.path
    'load the template
    
    banano.LoadLayout(vuetify.PlaceHolderName, "vclienti")
    vclienti.Matrix(1, 1).LoadLayout("vtableclienti")
    vclienti.Matrix(2, 1).LoadLayout("vmenuclienti")
    vclienti.Matrix(3, 1).LoadLayout("vclienticontainer")

    txtcognome = BVAD3.NewTextField(clienti, "txtcognome", "Cognome", "Cognome ", "cognome", False, "", 0, "", CreateMap( "hide-details":True,"background-color":"blue lighten-4","outlined" : True))
    vclienticontainer.Matrix(1, 1).Append(txtcognome.GetHTML)
    
    txtnome = BVAD3.NewTextField(clienti, "txtnome", "nome", "Nome ", "", False, "", 0, "Nome", CreateMap( "hide-details":True,"tile": True, "outlined" : True ))
    vclienticontainer.Matrix(1, 2).Append(txtnome.GetHTML)
    
    Dim txtindirizzo As BANanoElement = BVAD3.NewTextField(clienti, "txtindirizzo", "indirizzo", "indirizzo", "", False, "", 0, "", CreateMap( ":ide-details":True,"tile": True ,"outlined" : True ))
    vclienticontainer.Matrix(1, 3).Append(txtindirizzo.GetHTML)
    
    Dim txtcitta As BANanoElement = BVAD3.NewTextField(clienti, "txtcitta", "citta", "Città", "", False, "", 0, "", CreateMap( "hide-details":True,"outlined" : True))
    vclienticontainer.Matrix(2, 1).Append(txtcitta.GetHTML)
    
    Dim txtprovincia As BANanoElement = BVAD3.NewTextField(clienti, "txtprovincia", "pv", "Provincia ", "", False, "", 0, "Nome", CreateMap( "hide-details":True,"outlined" : True ))
    vclienticontainer.Matrix(2,2).Append(txtprovincia.GetHTML)
    
    Dim txtCap As BANanoElement = BVAD3.NewTextField(clienti, "txtcap", "cap", "Cap", "", False, "", 0, "", CreateMap( "hide-details":True,"outlined" : True))
    vclienticontainer.Matrix(2, 3).Append(txtCap.GetHTML)
    
    ''    '
    vtableclienti.AddColumn1("name", "Nominativo", vtableclienti.COLUMN_TEXT, 0, False, vtableclienti.ALIGN_LEFT)
    'ableclienti.AddChip("calories", "Calories", "item.color")
    vtableclienti.AddColumn("Indirizzo", "Indirizzo")
    vtableclienti.AddColumn("Cap", "cap")
    vtableclienti.AddColumn("Citta", "città")
    vtableclienti.AddColumn("Pv", "Pv")
'    vtableclienti.AddAction("mashy", "Mashy", "mdi-vuetify")
    vtableclienti.AddEdit
    vtableclienti.AddDelete
    vtableclienti.AddClone
'    vtableclienti.AddPrint
    'vtableclienti.AddSave
    'vtableclienti.AddCancel
    'vtableclienti.AddDownload
    vtableclienti.AddMenuV
    vtableclienti.SetIconDimensions("edit", "", vuetify.COLOR_GREEN)
    vtableclienti.SetIconDimensions("delete", "", vuetify.COLOR_RED)
    vtableclienti.SetIconDimensions("clone", "", vuetify.COLOR_AMBER)
    vtableclienti.SetIconDimensions("print", "", vuetify.COLOR_BLUE)
    vtableclienti.SetIconDimensions("save", "", vuetify.COLOR_BLUEGREY)
    vtableclienti.SetIconDimensions("cancel", "", vuetify.COLOR_BROWN)
    vtableclienti.SetIconDimensions("download", "", vuetify.COLOR_CYAN)
    vtableclienti.SetIconDimensions("menu", "", vuetify.COLOR_INDIGO)
    vtableclienti.SetIconDimensions("mashy", "", vuetify.COLOR_DEEPPURPLE)
    
    'add data
    vtableclienti.AddRow(CreateMap("name": "Raffaele Viglione 1", "Indirizzo": "Via Roma 8", "Cap":"86100", "Citta": "Campobasso", "Pv": "CB", "protein": 4.0, "iron": "1%"))
    vtableclienti.AddRow(CreateMap("name": "Raffaele Viglione 2", "Indirizzo": "Via Roma 8", "Cap":"86100", "Citta": "Campobasso", "Pv": "CB", "protein": 4.0, "iron": "1%"))
    vtableclienti.AddRow(CreateMap("name": "Raffaele Viglione 3", "Indirizzo": "Via Roma 8", "Cap":"86100", "Citta": "Campobasso", "Pv": "CB", "protein": 4.0, "iron": "1%"))
    vtableclienti.AddRow(CreateMap("name": "Raffaele Viglione 4", "Indirizzo": "Via Roma 8", "Cap":"86100", "Citta": "Campobasso", "Pv": "CB", "protein": 4.0, "iron": "1%"))
    vtableclienti.AddRow(CreateMap("name": "Raffaele Viglione 5" , "Indirizzo": "Via Roma 8", "Cap":"86100", "Citta": "Campobasso", "Pv": "CB", "protein": 4.0, "iron": "1%"))
    vtableclienti.AddRow(CreateMap("name": "Raffaele Viglione", "Indirizzo": "Via Roma 8", "Cap":"86100", "Citta": "Campobasso", "Pv": "CB", "protein": 4.0, "iron": "1%"))
    vtableclienti.AddRow(CreateMap("name": "Raffaele Viglione", "Indirizzo": "Via Roma 8", "Cap":"86100", "Citta": "Campobasso", "Pv": "CB", "protein": 4.0, "iron": "1%"))
    vtableclienti.AddRow(CreateMap("name": "Raffaele Viglione", "Indirizzo": "Via Roma 8", "Cap":"86100", "Citta": "Campobasso", "Pv": "CB", "protein": 4.0, "iron": "1%"))
    vtableclienti.AddRow(CreateMap("name": "Raffaele Viglione", "Indirizzo": "Via Roma 8", "Cap":"86100", "Citta": "Campobasso", "Pv": "CB", "protein": 4.0, "iron": "1%"))
    vtableclienti.AddRow(CreateMap("name": "Raffaele Viglione", "Indirizzo": "Via Roma 8", "Cap":"86100", "Citta": "Campobasso", "Pv": "CB", "protein": 4.0, "iron": "1%"))
    vtableclienti.AddRow(CreateMap("name": "Raffaele Viglione", "Indirizzo": "Via Roma 8", "Cap":"86100", "Citta": "Campobasso", "Pv": "CB", "protein": 4.0, "iron": "1%"))
    vtableclienti.AddRow(CreateMap("name": "Raffaele Viglione", "Indirizzo": "Via Roma 8", "Cap":"86100", "Citta": "Campobasso", "Pv": "CB", "protein": 4.0, "iron": "1%"))
    vtableclienti.AddRow(CreateMap("name": "Raffaele Viglione", "Indirizzo": "Via Roma 8", "Cap":"86100", "Citta": "Campobasso", "Pv": "CB", "protein": 4.0, "iron": "1%"))

    ' menu clienti
    Dim btnnuovo As BANanoElement = BVAD3.NewButtonIconRight(buttons, "btnnuovo", "Aggsssiungi", "mdi-plus", "primary", True, Null,CreateMap( "hide-details":False,"outlined" : True))  ''CreateMap("x-samll":True,"my":"2"), CreateMap("x-samll":True,"my":"2"))
    vmenuclienti.matrix(1, 1).Append(btnnuovo.GetHTML)
    
    Dim btnmodifica As BANanoElement = BVAD3.NewButtonIconRight(buttons, "btnmodifica", "Modissfica", "mdi-plus", "indigo", True, Null,CreateMap( "hide-details":True,"outlined" : True))
    vmenuclienti.matrix(1, 2).Append(btnmodifica.GetHTML)
'    '
    clienti.BindVueTable(vtableclienti)

    'add the placeholder content to the template
    clienti.AppendPlaceHolder
    
    'add the component as a router
    vuetify.AddRoute(clienti)
End Sub
 
Upvote 0

Mashiane

Expert
Licensed User
It should be ":hide-details"

Try also adding ":dense":true for some luck. I'm just guessing here.

Remember also you have divs inside divs. Tricky. Personally this is not how I would design this as it needs a lot of work.

I need to work on part 2 of the grid creation tutorial.

Are you using the latest version of the BETA library?
 
Last edited:
Upvote 0

Lello1964

Well-Known Member
Licensed User
Doesn't work !!

Lib BananoVuetifyAD3 2.40, div in TagName, but no changes

B4X:
txtcognome = BVAD3.NewTextField(clienti, "txtcognome", "Cognome", "Cognome ", "cognome", False, "", 0, "", CreateMap( ":dense":True,":hide-details":True,"background-color":"blue lighten-4","outlined" : True))
    vclienticontainer.Matrix(1, 1).Append(txtcognome.GetHTML)
    
    txtnome = BVAD3.NewTextField(clienti, "txtnome", "nome", "Nome ", "", False, "", 0, "Nome", CreateMap( ":dense":True,":hide-details":True,"tile": True, "outlined" : True ))
    vclienticontainer.Matrix(1, 2).Append(txtnome.GetHTML)
    
    Dim txtindirizzo As BANanoElement = BVAD3.NewTextField(clienti, "txtindirizzo", "indirizzo", "indirizzo", "", False, "", 0, "", CreateMap( ":dense":True,":hide-details":True,"tile": True ,"outlined" : True ))
    vclienticontainer.Matrix(1, 3).Append(txtindirizzo.GetHTML)
    
    Dim txtcitta As BANanoElement = BVAD3.NewTextField(clienti, "txtcitta", "citta", "Città", "", False, "", 0, "", CreateMap(":dense":True, ":hide-details":True,"outlined" : True))
    vclienticontainer.Matrix(2, 1).Append(txtcitta.GetHTML)
    
    Dim txtprovincia As BANanoElement = BVAD3.NewTextField(clienti, "txtprovincia", "pv", "Provincia ", "", False, "", 0, "Nome", CreateMap( ":dense":True,":hide-details":True,"outlined" : True ))
    vclienticontainer.Matrix(2,2).Append(txtprovincia.GetHTML)
    
    Dim txtCap As BANanoElement = BVAD3.NewTextField(clienti, "txtcap", "cap", "Cap", "", False, "", 0, "", CreateMap( ":dense":True,":hide-details":True,"outlined" : True))
    vclienticontainer.Matrix(2, 3).Append(txtCap.GetHTML)
 
Upvote 0
Top