I've been googling around for hours now trying to look for a way to make a column be full browser width like the top bar is. Is there a way to do this or is the only solution to just make a custom div without the div row class?
Thanks for any help!
Yes, it sounds like making a div that is not a row is the best solution.
Rows will be sized by Foundation's grid. The size of the grid can be changed (see "Grid Variables" on this page) — but if you just want to make something fill the window, it sounds like you don't want to use the grid for this element.
<div class="row collapse">
...
</div>
Related
I have a dynamic generated Table that I want to show in a Ionic 2 Page.
The problem is that when the table is wider than the screen the table just gets cut what makes it impossible to read it entirely.
So a horizontal scroll would solve this problem and I already found a similar question but the answer of that question does not work with tables. Has anyone a suggestion?
I solved it by wrapping the table with a div and adding "overflow-x:auto" to the div.
<div style="overflow-x:auto">
<table></table>
</div>
I have starting to play with Foundation and I realised there was a possibility to support larger screens but I don't know how to enable.
What I basically would like to do is being able to address larger screens (up to 1920px) and use those additional breakpoints in various ways like for example the ability to specify how many elements of a block grid have to be displayed on xxlarge, xlarge, large,...
I have checked the settings file and there are a couple of things there that seem to indicate it's possible.
I have first uncommented:
//$row-width: rem-calc(1000);
and set it to:
$row-width: rem-calc(1920);
With this I see that my addressable screen is bigger but breakpoints are still the same.
I also have uncommented this:
$large-breakpoint: em-calc(1440);
$xlarge-breakpoint: em-calc(1920);
...etc..
(and almost everything in the d.Media query ranges section)
$include-xl-html-grid-classes: true;
$include-xl-html-block-grid-classes: true;
But even with all this enabled, breakpoints still doesn't work with a simple thing like this:
<div class="row">
<div class="xlarge-12 columns">content</div>
</div>
This displays a div of exactly the same size as for large-12
Any idea?
Thanks
Laurent
$row-width refers to the maximum width of content. The foundation grid is 12 columns, so any div with {size}-12 will be 100% wide. This is why large-12 and xlarge-12 divs will be the same width.
To make the content smaller on large screens and larger on xlarge screens, try this:
<div class="row">
<div class="large-10 xlarge-12 columns">content</div>
</div>
Let me explain a little bit what I'm working on :
I am an intern and I have to create a friendly website back-office for people who are not really used to computer.
Thus, the back office management has to be as simple as possible ! I already put a lot of drag & drop in my plugins, the front-end is cool etc.
But a problem subsist :
the templates and placeholders.
I managed to create a demonstration template page with multiple placeholder, some in full width and some in 6 columns, 4 columns etc.
So I have something like that :
<div fullwidth>
{% placeholder "title1" %}
</div>
<div 6 columns>
{% placeholder "text1" %}
</div>
<div 6 columns>
{% placeholder "Picture1" %}
</div>
<div fullwidth>
{% placeholder "text2" %}
</div>
Each place holder has default plugin, in order to helps users.
Ok it works great.
But what happen now if we want, in the website back-office, move the placeholder "text2" before the 2 six columns ?
It seems to be impossible to manage it dynamically.
If you have used wordpress, you must have experienced how easy is it to manipulate content, if you want to move a Title to an other location juste drag and drop it etc.
Then I was thinking about the multiple column, by default you would have a multiple column with one 100% width column. Up to you to reduce it.
But the problem is that it is complicate to integrate and modify.
And it is absolutely not friendly-user !
Well, in case I am not very clear, I need to manage placehoder positions dynamically or have something to manage multi columns in an easy way for the user !
I am totally lost and without idea about it.
Have you already experienced it ? What kind of option did you choose ?
It would be really great if you could share some point of view with me :)
By the way,
thank you in advance for reading my post.
EDIT :
Have you seen this : http://www.mir.de/django-cms-demo ? This is perfectly what I want to have. But I don't know how they are doing it... And it is in German language...
Have you tried djangocms-cascade? I allows one to create placeholders on the fly and it should allow to order thus created placeholders.
According to its github page:
DjangoCMS-Cascade allows web editors to layout their pages, without having to edit Django templates. In most cases, one template with one single placeholder is enough. The editor then can subdivide that placeholder into rows and columns, and add additional elements such as buttons, rulers, or even the Bootstrap Carousel.
I would like to recommend:
https://github.com/divio/djangocms-column
or
https://github.com/divio/djangocms-grid
Its a lot simpler compared to djangocms-cascade.
Morning,
I wanted to find out if its possible to make a change to the current foundation 5 navbar without breaking it for mobile and desktop views.
basically the current one sits the left text/image to the far left and the nav menu to the far right, which is great when the design is across the entire page, but if the content is centralized in the middle sort of like the normal 960 web layouts, it looks a bit weird at times.
is it possible to have the left image/text and nav menu links centralized in the center like it would be seen if it was in a 960px wrapper.
this all ofc without stopping the responsiveness of it.
Thanks
It sounds like what your are trying to accomplish is to center a top-bar navigation within a row.
If that's the case then you can use <div class="contain-to-grid"> to keep your top-bar within your grid layout and something like <div class="small-9 small-centered columns"> to center the row that the top-bar is in. I created a codepen example for you to look at here: http://cdpn.io/jJhyn.
The classes mentioned above are all part of Foundation so you will not be affecting the responsiveness of your design.
For a complete list of the options available to customize the top-bar see the Zurb Foundation Top Bar documentation.
If I have misunderstood your question let me know, and code is always appreciated.
I hope that helps.
EDIT: 02/13/2014
I was looking into another issue when I stumbled upon this, How to center top-bar nav?. It center's the buttons/links within the top-bar, not the top bar itself. They page they used as an example is Mister Dutch. I updated the codepen above to reflect what I found on the Foundation Forum.
Again, if I have misunderstood your question let me know.
I have a set of two tabs. Each tab has a Google chart inside it. Both these charts should be identical in terms of size and position.
When the page is loaded, the position of the chart is how I want it (regardless of which tab you are initially on). When you then move to the other tab (initially hidden) the chart's position and sizing changes.
You can see this in the example here: http://cb.tortoise-dev.co.uk/
To simplify things I've added fixed widths and heights to the chart container, but this hasn't helped. I'm pretty sure that the problem is to do with the hidden container having no dimensions when the page is loaded and the chart being drawn to a sort of default size rather than filling the container (like it does in the initially visible tab). I'm not sure what the solution is though.
Any help would be greatly appreciated. Thanks in advance.
Your suspicion is correct: if the chart's container div (or a parent element) is hidden when the draw call is made, the Visualization API's dimensional measurements get messed up, and effects like the one you've noticed show up. There are a few different solutions you can go with:
draw the charts before you initialize your tabs, so all divs are visible at draw time
set up event handlers on your tabs to draw all charts within a tab when it is first opened
unhide all divs immediately prior to drawing the charts, then re-hide divs as necessary in "ready" event handlers for the charts
For Twitter Bootstrap users, I've found the following js snippet to be pretty useful. It's a way of using the second solution as provided by #asgallant and takes advantage of the built in Bootstrap Tab events documented at http://getbootstrap.com/javascript/#tabs-events.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
if($(e.target).attr('id') == 'first-tab-trigger')
{
drawFirstChart();
}
if($(e.target).attr('id') == 'second-tab-trigger')
{
drawSecondChart();
}
})
The snippet requires that you add a unique class or id selector to your tab like so (e.g., class="first-tab-trigger" etc):
<ul class="nav nav-tabs">
<li class="active">
<a href="#section-one" id="first-tab-trigger" data-toggle="tab">
FIRST TAB
</a>
</li>
<li class="col-sm-3">
<a href="#section-two" id="second-tab-trigger" data-toggle="tab">
SECOND TAB
</a>
</li>
...
</ul>
Now, when a tab is clicked and the the tab's content is made visible, a drawing (or re-drawing) of the chart takes place. That solves the sizing problems you get when you have charts in hidden tabs.
You can also "re-size" your window whenever the content is visible again and it makes the trick of the chart redrawing :
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
window.dispatchEvent(new Event('resize'));
});