I'm trying to implement Material's layout grid for web. When I put in a span size for columns, the width (in this case 33.33%) is being overwritten by the same class with width: auto;. What am I doing wrong?
I had mdc-layout-grid--inner instead of mdc-layout-grid__inner 😖
Related
I am actualy very confused about how to center an Ionic Grid. I have try to put it in a div and add these different styling properties justify-content, text-align, align-items none of the thems worked. Any Idea to how I can figure this out without changing the width of it ?
Thank you
Sure, you just need to apply the styles on the columns tags to have the desired effects. As follows an example:
<IonGrid>
<IonRow>
<IonCol className="ion-align-self-start">Content on start</IonCol>
<IonCol className="ion-align-self-center">Content centered</IonCol>
<IonCol className="ion-align-self-end">Content at the end</IonCol>
</IonRow>
</IonGrid>
I have been working on creating a similar image setup like here: https://readcereal.com/category/travel/ using CSS grid and I constantly encounter one issue - a horizontal scroll. I use Bootstrap for the navbar. It looks like in the attached image. Would anyone have idea why is that happening? I tried so many different CSS grid combinations and it never worked. Image: https://i.stack.imgur.com/7UwjN.png
Maybe you should wrap your images inside an images container and then set the container to max-width: 900px or depends on what max width you want.
I have a really simple solution for this problem
.row{
width: 100%;
}
It will work only for bootstrap ...you can try this one.
I'm using jQuery Lazyload Plugin. Before the images are loaded I use a dummy image as placeholder which is a 20x20 pixels blank PNG. Also I'm using jQuery wookMark which is a dynamic grid plugin. For this plugin to work I need the images to be in their correct aspect ratio so the plugin can calculate the suitable position of each grid element in the page.
I have width and height attributes on img tag set to the correct dimensions, but that doesn't have any effect on the dummy image and it will be shown as a square, no matter what.
I can use inline styles to set width and height for each image, but this approach will stop the image from being responsive in other dimensions.
Is there a way to give an image width and height in a way that it act like it is its real dimensions?
Here's the pen to look at:
http://codepen.io/anon/pen/iaIoJ
The only way you're going to get what you want is by using some javascript. You're already using jQuery so that will make it a bit easier.
Use the following CSS to begin with (as an example):
.myImage {
width: 300px;
height: 400px;
}
then when the images are loaded (in some sort of callback function I presume):
$('.myImage').css('width','100%');
$('.myImage').css('height','auto');
Alternatively, you can work with a placeHolder css class that has this height and widht, and then $('myImage').removeClass('placeHolder'); to clear it from the images.
I found a good way for it.It's not going to be pure css, but that's fine by me :)
My solution is to set the image height to 0 and use padding-bottom to maintain the aspect ratio:
<img src="./blank.png" style="height:0;padding-bottom:133.333%">
And also having a class for the img tag when the actual image is loaded:
img.loaded {
height:auto !important;
padding-bottom:0 !important;
}
Here's the pen for this example: http://codepen.io/nOji/pen/yoshA
Hope you find it useful.
I have a plunker to show: http://plnkr.co/edit/nGjdvrG27jNpQ3QTulMr?p=preview
I want the green area to fill the remaining available height. I can set div height:100% and get almost I want, but that is less than desirable.
Is there a way to do this with css? Do I need to do some sort of resizing via js?
I've set the following classes to height: 100% and it seems to work now:
.tabset, .tab-content, .tab-pane, .tabbable {
height:100%;
}
Updated Plunker
if you use flexbox layout you can do it this way:
override the display property of the '.tab-content>.active' class. By default it is set to 'display: block'. It has to be set to 'display: flex'. Also modify the tab template.
See my solution:
Using flexbox layout with angular-ui tabs
The easiest way that I know is to set the height with vh units. They were introduced in CSS3
height: 100vh;
Updated plunker.
vh unit is setting the viewport height. I believe it's viewed as setting it to a % of the viewport, or visible screen. So simply changing 100% to 100vh gives you the desired outcome.
It seems like it's pretty widely used: http://caniuse.com/#search=vh. Just depends on who your audience base is I suppose.
I have several divs on a page that all have the same width but different heights. They are all in one div, the #note1PreviewDiv. They all share the class .note, which has the following css code (among other):
.note{
width: 160px;
padding: 10px;
margin: 10px;
background: #e3f0ff;
float: left;
}
I thought with float: left; they would all automatically align so that they are well aligned among each other.
Here's a preview of what it looks like:
Current state http://posti.sh/img/ist.png
And here's what the positioning should be like:
Desired state http://posti.sh/img/soll.png
I think you get the idea. Somehow it seems to me the height of the leftmost div pushes the other divs in the second row to the right - but that's only guessing.
Thanks for your help!
Charles
You're not going to be able to do this easily with CSS only.
CSS3 has a new feature called column layout, but browser support is not great. IE9 and below don't support it.
See http://designshack.net/articles/css/masonry/ and the last example for CSS3 solution.
Have a look at these js / jQuery options for easier implementation and browser support:
masonry
isotope
vanilla masonry which doesn't need jQuery.
wookmark
The kind of lay out you want is really difficult (not possible?) without going for a column based approach and adding additional block elements to represent each column. This obviously won't work with a flexible number of columns if you want a dynamic layout based on screen size.
That said, you could always use JavaScript to dynamically place elements into columns, and get it to match the screen size.
Is the height of the parent container given a fixed value? If it is, try setting the height of the parent container to auto, and the overlow propery to hidden.