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.
Related
Today I've realized something about flexbox that I didn't know before.
I'm writing this because i want to verify it.
so from what I knew, when we do display:flex now we created a flex container and its children will be the "flex items".
the flex container has a main axis and cross axis, and that's it.
now i see that the flex container has rows and that made me realized that the rows have their own main axis and cross axis
so when we do align-items we are aligning the flex items that are in the row
and when we do align-content we are aligning the rows !
here is a picture that demonstrate what I'm trying to say.
so if we had another row(only possible with flex-wrap:wrap) and we do align-content:space-between;
that will create a space between the rows
am I right ?
Yes, you are right. I would like to give you a tricky tip for making flexbox the easiest way you can ever use. Make a flexbox div as a parent and put inside it multiple items, and they will act as child divs(s).. and then, without giving the parent any alignment CSS codes, just run your code on your browser and use the DevTool and inspect your parent div and then you will see an icon next to the code display: flex; press on it and you will find all alignments options you can use for your flexbox. Feel free to try all options until you reach your final required result.
Also, I advise you to play the "Flexbox Froggy" game from this link. If you reach a high level of this game, that means that you understand the flexbox.
I am trying to create a newspaper-like look through pure CSS where everything flows through columns and onto new pages when it needs more space.
I have tried flexbox and grid, but it does not work the way I need it to. The content inside can be images, divs, etc. I found it best to illustrate what I am looking to achieve through a picture:
I also created a code pen to try and demonstrate my current attempt:
https://codepen.io/knickfocks/pen/qBZBLqq
As you can see from the above sample code, the items align in columns left to right. The items are assigned various heights just to demonstrate that I wouldn't always know the height, and the content of these items can vary in size. But I am looking to have it move onto the next column row after it runs out of width space. Sorta like how a newspaper reads.
Thanks in advance!
I have this ui-grid containing a random number of rows, but sure thing, it contains a great number of columns.
That said, I have a someway responsive-related problem: I want the grid to fill the remaining space of the page, in both width and height.
Apart from look-and-feel reasoning, the logic behind this is, on large screen devices, to allow the user to look at as much columns as possible and to extend the ui-grid height to the bottom, even if there are few rows displayed (btw, the page has no footer).
So, using a media query, I set width: 100% to the grid and manage to do the first part of the trick, but I'm struggling for the second part: the height.
I can't really make the gridWrapper height to expand the grid to the bottom, even if his width behaves correctly, without using Bootstrap but... the css struggle is real.
So I managed to have something near to what I want, but:
it's a ridicoulusly complicated, weak and un-reusable solution;
the row selection icon layout (the one on the left side of the rows) messes up as the row number grows, and i can't get rid of the selection feature by now;
the height of the grid is greater than the height of the page. I could set it to 90% instead of 100% to make it work... close, but not responsive, still.
Even if this scenario is the subject of many issues on the GitHub of the project, I'm asking you:
Is there a way to obtain what I want in a responsive, maybe bootstrap-inclusive way before I delve in a swamp made of display: table;, display: flex; & Co.?
give grid height: auto either in css or once grid is ready i mean once you have assigned array to gridOptions.data after that
$(".ui-grid").css("height", "auto");
I am affraid that only way how to achieve this is use of JS and setting css height and width programatically.
You have to set it when:
grid is created
window size changes
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/
I have a design I'm working on that is almost complete, but I'm having trouble getting the CSS to do what I want. What I am trying to do is something like this:
However, when the page is generated, this is what the output looks like:
How can I get the third box to float up under the first and next to the second? I have tried every trick I know, but can't get it to work. I should also mention that each block is added to the page by a loop in PHP pulling from a database, so I'm kinda limited by not having static content, and have no way of knowing ahead of time how tall a particular block is going to be.
If the number of columns is variable, CSS can't really do it (if you want it to work in all common browsers), so instead use jQuery Masonry which is designed to solve exactly this problem.
Here's me saying the same thing, but with more words: CSS two columns with known children width
Per the second layout, a good option is using three primary columns. There are several grid systems available including Twitter Bootstrap and 960 Grid that will help you get the basic framework laid out quickly and sans quirks. When divs (block elements) fall within any of the three columns, they'll stack up, top-to-bottom, naturally.
Regarding the bottom of the divs lining up perfectly, you'll be able to use JavaScript to calculate the overall height of the parent of the columns (which will naturally inherit the height of the tallest column), calculate the total height of the block elements within each column, and use javascript to add the difference in height to the lowest block element for each.
Be sure to account for padding and margin in the JS height calculations.
Try putting the divs into 3 columns instead of stacking them in the order they appear.
That behaviour is because of the float rules. The top of a floating element cannot be over the top of another element that came before it in the normal flow of the page. I don't know exactly how you position your elements but you might want to look into that.
Here is the Css Specs for float: http://www.w3.org/TR/CSS2/visuren.html#float-rules (It's css2 but the rules still apply)
Look at rules 5 and 6