Using Angularjs Material framework, I aligned the content (containing cards) to the center, the problem is when I increase the height of one card, the height of the adjacent card also increases. Example code http://embed.plnkr.co/eaLjJDbjL1KnOI4jLYyO/preview
The cards will have dynamic height, and should align one after another both horizontally as well as vertically.
I am trying to achieve some thing like this:
https://lh3.googleusercontent.com/-6ocJpsXmVLU/VTgSj9wd_CI/AAAAAAAAACs/PavEWs9wiGM/s1600/cardLayout.png
I don't think this has anything to do with Angular. It looks like your example is using flexbox CSS, which is the cause of your columns having equal height. Remove all the flex attributes and your cards will take take the height of the contained content. If you are looking for a masonry tile layout you'll likely need JavaScript to help with that since elements float left and clear one another. Take a look at this and see if this helps http://masonry.desandro.com/
Related
I have barely used anything other than vanilla CSS but would really like to do a couple things that aren't working well now:
I have an inner border inside a div, which I want to actually border the inside of the encapsulating div's border (double border). However with window resizing, the inner border will sometimes have too large/small width/height, even when using a measurement like % or vh/vw. I need the inner border (just a div with a border right now) to always stretch/shrink to fit snug right next to the parent border.
Similarly (notoriously) with centering, I imagine there must be a library with the ability to easily center elements vertically and horizontally. Generally I use flex box but would love something that works more consistently, elegantly and intuitively.
What say ye?
I think you're talking about a CSS framework, they help out a lot, especially when working on a major project. I would check out Twitter Bootstrap or Google's Material Design, I personally use mdbootstrap, which is a 3rd party hybrid of the two.
You could give Tacit a try for this particular need.
Tacit is a class-less CSS framework were all you need is just a single <link> statement in your HTML and the web page will have a complete and finished look.
The centering of elements vertically and horizontally come out of the box, and you can skip the usage of <div> elements or the work of defining classes for your elements.
As a side note, here are a few examples of pages that use Tacit, and the only work put into was including the CSS file: http://filfreire.com/, http://www.jare.io/, https://socatar.com/
I'm looking at creating a grid for a day view of a calendar, where the items are vertically positioned and sized according to their start and end times. If an agenda item doesn't overlap with anything else, its width will span the full width of the column; however, if items overlap, they split the width between them. Example images below:
Full-width items, no overlap
Overlapping items
Clearly, this can all be calculated using Javascript with full knowledge of all the meetings at once. However, I'm wondering if there's an elegant CSS solution to handle this, where the code needs to only provide the vertical position and height?
I ask because I'm hoping to organize my React code such that each grid box only needs to know the data for its own agenda item, keeping good encapsulation; rather than needing to pass in a bunch of data (pre-processed or not) about other items.
This sounds like a perfect use case for flexbox. Which also plays nicely with React.
Bootstrap V4 can be used with flexbox. Another good option if you are using PostCSS is lost grid.
Was answering another question about centering a div that had the bootstrap's span12 class applied to it, and part of the solution was to reset the float as the span12, as well as the other span* classes, are floated.
Since span12 width is 100% when combined with row-fluid and 1170px when not (and other sizes that I suspect are meant to fill most of the area on different screen sizes)
This to me suggests that it is mostly a standalone grid item: not meant to have other grid elements floating along side it.
I could see if they wanted to allow for having other grid elements along side it for really huge sites (screen widths of like 2560px etc), except this would not work at all when using row-fluid as the first one in the row would take up all the space as it uses 100% width.
But I personally have not seen many, if any, sites that would use such a huge width that would allow for using a span12 grid element along side other grid elements.
So does bootstrap implement other styling methods that make it necessary to float the span12 class? Or are they just anticipating future use for huge sites?
As I use bootstrap myself, if it is necessary for other styling techniques I do not want to end up one day having removed the float when it is needed and also do not want to mislead others when answering questions if the resetting the float would end up messing up their layout when using bootstrap.
Edit
As DontFeedTheCode points out this has been addressed in Bootstrap 3, all the other grid classes get floated while the 12th one does not.
in the 2.3.2 version looks like they were using [class*="span"] as the selector for setting styles so span12 gets selected by accident
As bootstrap is written in LESS, and in 2.3.2 all span classes were generated using .gridColumn() mixin - all span classes had the float:left;. This is not for any large layout like 2500 or such.
I am looking for a way (jQuery plugin perhaps) to create a grid of variable height, fixed width divs. Something used in Pintrest.com for those of you familiar. Using inline elements or inline-block would cause gaps. It appears pintrest.com uses absolute positioning, put I'm lokking for a way to detect size and align elements accordingly.
http://pinterest.com
jQuery Masonry is a good place to look for something more off the shelf - http://masonry.desandro.com/. There's also a quora thread on the topic - http://b.qr.ae/wcGASb
I am creating templates using grids and object oriented css. The goal is to separate components from containers. The challenge i run into is that in header and footer container i would like that components are stacked from bottom up instead of top down.
For example
<div class="gridX gridY" id ="Footer container">
<div id = "links component"></div>
<div id="copyright component"></div>
<div>
In the example the requirement is that 'copyright component' has to be at the bottom of the footer container(which is the page) following other components stacked on top. Right now the only way i know how to do is by keep components height fixed which enables me to calculate the position of each component that way positing as needed making it work from top to bottom, however. This way it goes against the goal of oocss - being able to swap components in the layout while having height flexible
display:table -> display:table-cell with vertical-align:bottom is not working in IE, so this solutions is not applicable in our case.
I am new to grids and oocss, perhaps, i am missing some understanding.
how to stack components from bottom up instead of top down in defined grid container?
Thank you,
Margots
HTML is a top-down technology.
The height can be flexible. Use min-height: and let content grow naturally.
Don't resort to using tables for layout. CSS can do everything you need.