Layout grid kolommen

Dit forum is bedoeld voor vragen met betrekking tot WYSIWYG Web Builder.
Post Reply
RemPro
 
 
Posts: 10
Joined: Sat May 06, 2017 12:38 pm
Location: Aalsmeer - Nederland

Layout grid kolommen

Post by RemPro » Mon Aug 28, 2017 1:32 am

Zou het niet fantastisch zijn als er een mogelijkheid bestaat om de kolommen in de layoutgrid een eigen percentage in de css mee te geven.

Een eenvoudige 5 kolommen (elk 20% zou dan mogelijk zijn) 5 kolommen over volle breedte moet nu worden onderverdeeld in 3-2-2-2-3

Ik los het nu op door de bewuste CSS (steeds) aan te passen in 5 x 20% wat gewoon goed werkt.

En het plaatsen van een layer in de layoutgrid zou ook een welkome optie zijn. via het <html> gereedschap werkt e.e.a prima - mits we rekening houden met de mogelijkheden van Responsive.

Cheerzzzz

-Rem

User avatar
Pablo
 
Posts: 18824
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Layout grid kolommen

Post by Pablo » Mon Aug 28, 2017 5:45 am

Dat is niet mogelijk. Het grid system is gebasseerd op BootStrap. Deze kan uit maximaal 12 kolommen bestaan. Dit zijn voorgedefinieerde classes.
Maar je kunt wel grids nesten.

Ook is het niet mogelijk om een layer in een grid te gebruiken want een layer is een fixed (niet flexible) container. Dus dan zou de content overlappen.

RemPro
 
 
Posts: 10
Joined: Sat May 06, 2017 12:38 pm
Location: Aalsmeer - Nederland

Re: Layout grid kolommen

Post by RemPro » Mon Aug 28, 2017 10:53 am

Oh ... de 12 kolommen barriere snap ik ... maar t gaat me om veelvoud van 8.333 % die de kolommen breed kunnen zijn.
gelijke kolommen probleem treed dan op bij 5 en 7-11 gelijke kolommen.
In andere programma's kunnen de kolommen nl. in de breedte in % worden aangepast.

ik wijzig in deze CSS nu steeds handmatig de automatisch gegenereerde width: aan in gelijke percentages:

VAN:

#detailsLayoutGrid5 .row .col-1 {
background-color: transparent;
background-image: none;
text-align: left;
width: 25%;
}
#detailsLayoutGrid5 .row .col-2 {
background-color: transparent;
background-image: none;
text-align: left;
width: 16.66666667%;
}
#detailsLayoutGrid5 .row .col-3 {
background-color: transparent;
background-image: none;
text-align: left;
width: 16.66666667%;
}
#detailsLayoutGrid5 .row .col-4 {
background-color: transparent;
background-image: none;
text-align: left;
width: 16.66666667%;
}
#detailsLayoutGrid5 .row .col-5 {
background-color: transparent;
background-image: none;
text-align: left;
width: 25%;
}

IN:


#detailsLayoutGrid5 .row .col-1 {
background-color: transparent;
background-image: none;
text-align: left;
width: 20%;
#detailsLayoutGrid5 .row .col-2 {
background-color: transparent;
background-image: none;
text-align: left;
width: 20%;
}
#detailsLayoutGrid5 .row .col-3 {
background-color: transparent;
background-image: none;
text-align: left;
width: 20%;
}
#detailsLayoutGrid5 .row .col-4 {
background-color: transparent;
background-image: none;
text-align: left;
width: 20%;
}
#detailsLayoutGrid5 .row .col-5 {
background-color: transparent;
background-image: none;
text-align: left;
width: 20%;
}

De fixed layer in de layoutgrid los dan maar ik op met een <html> layer : die kan nl wel in de layoutgrid met zelfgeschreven inhoud .


P.S. een optie om (net zoals de font-awesome-icons standaard hebben) een object een 'display:inline-block mee te kunnen geven in de layoutgid zou ook welkom zijn.

Kunnen we in de toekomst ook gebruik maken van de label functie bij de optie en check boxen. de tag staat er nl al in zien we.
<input type="checkbox" id="detailsCheckbox1" name="" value="on" style="position:absolute;left:0;top:0;"><label for="detailsCheckbox1"></label>

En ........

het BootStrap Menu werkt niet met overige / Google Fonts


groeten

-Rem

User avatar
Pablo
 
Posts: 18824
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Layout grid kolommen

Post by Pablo » Mon Aug 28, 2017 11:12 am

Ik snap dat je in dit geval de code handmatig kan aanpassen maar om dit te automatiseren daar gaat wel even wat meer werk inzitten...

Er is al een 'label' object in de formulier tools.

Het (gratis) bootstrap menu werkt niet met Google fonts, maar de uitgebreidere versie wel:
http://www.wysiwygwebbuilder.com/bootst ... onbar.html

RemPro
 
 
Posts: 10
Joined: Sat May 06, 2017 12:38 pm
Location: Aalsmeer - Nederland

Re: Layout grid kolommen

Post by RemPro » Tue Aug 29, 2017 10:23 pm

Dan gaan we die Bootstrap maar eens aanschaffen toch !

John Schouten
 
 
Posts: 29
Joined: Wed Dec 02, 2015 5:29 pm

Re: Layout grid kolommen

Post by John Schouten » Thu Sep 07, 2017 2:49 pm

probeer flexbox werkt perfect :D

Post Reply

Who is online

Users browsing this forum: Google [Bot] and 1 guest