B4J Question [SOLVED] BananoVuetifyAD3 grid problem

[Lello1964]

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]

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.

 

[Lello1964]

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

 

[Mashiane]

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.

 

[Mashiane]

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

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

 

[Lello1964]

Ok,
this is my example

 

[Lello1964]

u can try text filed menu, set space betwwen text field to 0

 

[Lello1964]

This is a screenshot of my problem, in my project age Clienti

 

[Lello1964]

My projetct

 

[Mashiane]

You have defined your parent grid as:

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=?

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

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

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:

 

[Mashiane]

vmenuclienti

The definition for this is rather confusing.

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

On small devices, this looks like..

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..

 

[Mashiane]

vclientcontainer

Your original.

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

Updated...

So your complete grid now looks like this...

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

At first glance..

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:

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?

 

[Mashiane]

To eliminate the spaces in the "child" v-containers, lets change the tags for vmenuclient and vclientcontainer to be "div"

If we do this, we have

Original using v-container

Update using div

This now appears nicely as

 

[Lello1964]

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

 

[Mashiane]

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)

[SOLVED] BananoVuetifyAD3 grid problem

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...

www.b4x.com

 

[Lello1964]

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)

[SOLVED] BananoVuetifyAD3 grid problem

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...

www.b4x.com

Hi,

this is the code:

but doesn't work

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

 

[Mashiane]

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?

 

[Lello1964]

Doesn't work !!

Lib BananoVuetifyAD3 2.40, div in TagName, but no changes

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)

 

[Lello1964]

This Project, i've deleted pic's to reduce size, are yours

 

[Mashiane]

For the sake of continuity, let me finalize the videos of creating grids using simpler and recommended approaches. The approach you have followed here will create further confusion and its not helping anyone and I advise against it.

I'm parking this thread for now.