I'm new to flexbox and it seems really complex compared to bootstrap. I have a splash screen where I am required to vertically and horizontally center a content:
<div layout="row" layout-align="center center">
<div layout="row" layout-wrap>
<div flex="30">
<img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
</div>
<div flex="45">
<h2 class="title">example.com</h2>
</div>
<div flex="25">
<h1 class="bang">Bang!</h1>
</div>
</div>
</div>
however it doesn't center till I add a height to it:
style="height:500px"
Why does it behave this way? Is my code wrong? This doesn't seem like the right way of doing it.
Also with the items in my second row with the layout-wrap the last div with flex=25 overlaps the second div with flex=45.
Basically what I want to do this vertically and horizontally center a div and be able to split that div into as many columns as I like while maintaining a responsive width that adjusts depending on screen size.
Maybe this can point you in the right direction - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="row" layout-xs="column" layout-align="center center">
<div flex="30">
<img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
</div>
<div flex="45">
<h2 class="title">example.com</h2>
</div>
<div flex="25">
<h1 class="bang">Bang!</h1>
</div>
</div>
Related
I have this
<div class="flex flex-col">
<main class="max-w-screen-lg mx-auto">...</main>
...
</div>
I use mx-auto to center main
I also want main to have some maximal width on large screen that's why I use max-w-screen-lg!
But in result margin left and right takes all space around and shrinks main to its minimal possible width on large screen
I just want main to have max width centered inside container
Some possible solution might be this, but it requires extra div
<div class="flex flex-col">
<div>
<main class="max-w-screen-lg mx-auto">...</main>
</div>
...
</div>
I have a layout container that shows items like this:
My code:
<div fxLayout="column" fxFlex="50">
<div fxLayout="row wrap" fxLayout.xs="column wrap" fxLayoutAlign="center center">
<button mat-stroked-button color="primary" fxFlex="1 3 30" *ngFor="let category of categories">{{category.DISPLAY | translate}}</button>
</div>
</div>
I would like the row to wrap the items based off the space available. In this case, I would like the "Email" category to take up the entire space of the newly wrapped row. Any help would be appreciated.
simple example
<div fxLayout="row wrap" fxLayoutAlign="center center" >
<button mat-stroked-button color="primary" fxFlex="3 0 33.3" *ngFor="let i of [1,2,3,4]">aaaaaaaaa</button>
</div>
I would like to edit a header type so that it would have 4 static sections in which the editor can drag and drop new fields.
The template has only the following at the moment;
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
Is there any way for me to multipy the main container like this way?
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
<div class="main-wrap2">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
<div class="main-wrap3">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
<div class="main-wrap4">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
I am just not sure what I should give instead of {content} for the extra ones. Because as long as they have {content} tag, it is replicating the content of the first section.
Any idea how I can make it work?
My purpose is to give specific styles to each section indvidually.
First, let me point out that {{#sections}} allows you the ability to create multiple sections, by dragging the section element into the content area. Each section can have its own 'style' or background. With that there isn't really any need for separate content areas, that is unless they are not uniform areas stacked on top each other.
So, all you really need is..
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
That being said, if you would still like to continue with your plan, you would use unique content tags for the additional content areas including global="false". global="false" means that the content will not appear on other pages using the page type.
example {content2:content global="false"}
<div class="main-wrap">
<div class="container">{content}</div>
</div>
<div class="main-wrap2">
<div class="container">{content2:content global="false"}</div>
</div>
<div class="main-wrap3">
<div class="container">{content3:content global="false"}</div>
</div>
<div class="main-wrap4">
<div class="container">{content4:content global="false"}</div>
</div>
Note that I removed the 'sections' because I wasn't sure if you really wanted that for each area.
I am trying to have text on both edges (right and left) of the slider. It's very clear why this makes sense from a UX perspective. Obviously that's not working for me:
<div class="row">
<div class="small-10 small-centered columns">
<fieldset class="fieldset ">
<legend style="background:0;">bla bla</legend>
<div style="color:#1583cc">left extreme name</div>
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<div style="color:#1583cc">right extreme name</div>
<div class="row">
<div class="small-1 small-centered columns">
<input type="number" id="sliderOutput2" style="text-align:center; color: #1583cc;">
</div>
</div>
</fieldset>
</div>
</div>
The texts become their own row while the slider takes up the entire width of the container as a third row in between them.
I'd like them to be one row, where the slider occupies the space left after the texts have been positioned at the (left and right) edges of the container's width. How should that be accomplished in a nice way?
As a newb to the Zurb Foundation, you should look into the grid system which allows you to do just what you are asking. It is also the basis for the responsive design.
Your code:
<div style="color:#1583cc">left extreme name</div>
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<div style="color:#1583cc">right extreme name</div>
... should utilize the grid. Here is an example but there are many ways you could go about it.
<div class="row">
<div class="small-3 columns" style="color:#1583cc">left extreme name</div>
<div class="small-6 columns">
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-3 columns" style="color:#1583cc">right extreme name</div>
</div>
http://foundation.zurb.com/sites/docs/slider.html#data-binding
Here is the info on grids (and more basics) you should study:
http://foundation.zurb.com/sites/docs/grid.html#basics
I have following nested tabs that I want to show in
<div id="1">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div id="a">
<div id="aa1h">
Sub Tab AA1 Header
</div>
<div id="aa1c">
Sub Tab AA1 Content
</div>
<div id="aa2h">
Sub Tab AA2 Header
</div>
<div id="aa2c">
Sub Tab AA2 Content
</div>
</div>
</div>
$('#1').tabs();
Now I want to display three tabs using jQuery tabs or YUI tabview as following:
First tab displays #a (the whole thing)
Second tab displays #aa1c (only content for aa1)
Third tab displays #aa2c (only content for aa2)
I am having some problems with this method, any help is appreciated.
http://jsfiddle.net/RQcwE/1/
See above example for my problem.
UPDATE:
With help from Hanlet Escaño I have achieved what I wanted with couple of blank divs and some jQuery Code..
http://jsfiddle.net/RQcwE/3/
This is an example with sub-tabs that might work for you:
<div id="1">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div id="a">
<ul>
<li>Sub A 1</li>
<li>Sub A 2</li>
</ul>
<div id="aa1">
Sub Tab A content 1
</div>
<div id="aa2">
Sub Tab A content 2
</div>
</div>
<div id="b">
<ul>
<li>Sub B 1</li>
<li>Sub B 2</li>
</ul>
<div id="bb1">
Sub Tab B content 1
</div>
<div id="bb2">
Sub Tab B content 2
</div>
</div>
<div id="c">
<ul>
<li>Sub C 1</li>
<li>Sub C 2</li>
</ul>
<div id="cc1">
Sub Tab C content 1
</div>
<div id="cc2">
Sub Tab C content 2
</div>
</div>
</div>
you just build them like this:
$("#1" ).tabs();
$("#a" ).tabs();
$("#b" ).tabs();
$("#c" ).tabs();
JSFiddle: http://jsfiddle.net/p84kC/