I'm trying to create a 100% wide grid layout with materialize css. However, the .row class doesn't have a negative margin when it's not inside a .container class. This makes nesting very ugly because it creates new padding for every child .col.
Is there an equivalent for Bootstrap's .container-fluid in Materialize CSS?
I have seen an answered post regarding this issue, but it doesn't actually answer the question in a simple nested cols layout.
There isn't any special class like container-fluid in Materializecss.
Responsive grid system in Materializecss has width: 100% by default and if you add container class to your <div>, the width will be 70%.
More info : https://materializecss.com/grid.html
Related
Where To Find Me?
Lorem ipsum..
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<p>Lorem ipsum..</p>
</div>
Bootstrap 3 reads:
Use .container-fluid for a full width container, spanning the entire
width of your viewport.
The other counterpart of .container-fluid is .container. Bootstrap 3 doc says:
Use .container for a responsive fixed width container.
Means .container is responsive but has intervals. Bootstrap applies fixed CSS width style for each media breakpoint (xs, sm, md, lg). .container-fluid expands to fill the available width (using % width).
So for example, say your browser window is 1000px wide. As it's greater than the min-width of 992px, your .container element will have a width of 970px. You then slowly widen your browser window. The width of your .container won't change until you get to 1200px, at which it will jump to 1170px wide and stay that way for any larger browser widths.
Your .container-fluid element, on the other hand, will constantly resize as you make even the smallest changes to your browser width.
Consult here for more details.
you can define this code under the HTML element "col-lg-3" for bg-3 bootstrap this code work also with bootstrap 4 and bootstrap3.
I'm using Isotope to present a grid of images within a Bootstrap 3 framework.
I've got a sticky footer (using recommended absolute positioning with bottom set to 0).
When the browser window is reduced in height, the div containing the isotope-d images doesn't stop where the sticky footer begins - so the bottom-most 60px of the div (actual amount depends on height set for footer) is hidden by the footer OR extends below the footer. The difference is determined on whether I set a height for the container divs.
Here's the html from https://codepen.io/marklsanders/pen/KrRVaK:
the codepen contains an example
I'm guessing the problem is caused by the fact that all the images positioned by Isotope are absolutely positioned.
Any suggestions as to how to work with this correctly?
thanks
Try changing your footer from position: absolute; to position: fixed;, and add padding-bottom: 75px; to your <body>.
Bear in mind that when you position absolute or fixed, that element is removed from the regular flow of the document. When you position it, it will most likely conflict with another statically positioned element.
In this case, adding padding to the body 'simulates' in the regular document the space that is actually occupied by the footer.
Additional note: The sticky footer approach generally means you'll need to set a fixed height for your footer. I've used 75px for the padding on the body, but you can fiddle with this for best results.
The container class is used to restrict content to 70% of screen width. Works wonderfully for our app on medium and larger containers.
Unfortunately, we then want 100% spacing on small. Anyone have ideas?
In my code I just do something like this
#media screen and (max-width: the size you need)
.container
width: 98%
I just call this after importing the materializecss sass and override the default behavior
Here is the code they use and which you have to override: link
I have a dgrid within a BorderContainer with "liveSplitters" enabled (using Dojo 1.8). The dgrid comes up nicely, but when I move the splitter between the left column and the "leading" column (that the dgrid is within), the dgrid does not properly resize. However, if I resize the window a tad, then the dgrid snaps back into a proper size (i.e. filling 100% of the "leading" pane of the BorderContainer).
I have dgrid set to 100% width in CSS. Is there some way I need to tell dgrid to refresh its size after the splitter moves?
Look at this example I wrote answering another dgrid related question: http://jsfiddle.net/phusick/VjJBT/
The CSS rule you are looking for is:
#grid {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
}
EDIT: I thought it might have been a problem of dgrid version, so I updated my dgrid to the latest version 0.3.3 and created a test for the issue of yours: http://jsfiddle.net/phusick/5mHTS/.
Well, it was not the issue of versions and both 0.3.1 and 0.3.3 works fine when resizing BorderContainer, but only in Chrome and Firefox. I reproduced the issue in IE9 and Opera 12.10:
The grid needs to invoke grid.resize() to resize properly, which does not happen in IE9/Opera, when resizing BorderContainer, but happens always when you resize the window.
DijitRegistry fixes the issue, because layout components, like BorderContainer and ContentPane, call resize() on all their dijit children when resized.
So either subclass DijitRegistry or dojo/aspect listen for resize on parent ContentPane of the grid and invoke grid::resize():
aspect.after(contentPane, "resize", function() {
grid.resize();
});
As noted in the comments to #phusick's answer, Dgrid resizes properly if I use the DijitRegistry mixin. I had some other resizing problems too, but they had to do with having a set relative width on the element in my css (e.g. 100%). If I remove the size, which wasn't required by ContentPanel anyway, all elements resize OK. The CSS had been carried over from Dojo 1.5, which apparently did not react the same way to a ContentPanel having a size set in the CSS.
I am having trouble trying to get a jquery ui tab panel's height to grow with floating divs within the panel.
the divs have specific data returning to these divs and I need them to float left and right to save ui real estate.
Does anyone know how i can fix this?
Actually, this is a well-known css issue. A discussion is here:
http://www.quirksmode.org/css/clearing.html
To summarize the article, any <divs> that you wish to function as both a tab pane and a float container should have these styles added to them either in your <style> or css <link> files:
overflow: auto;
width: 100%
This isn't a bug. It's intentional. The floating div literally lifts out of the container, and the container will not be aware of the floating div. At least, that was the goal.
You should do a search on here for "clearing floats" or other related css rules, because using the above will cause issues with certain browsers (in short: 'take care to test this, all the same').