I'm trying to hide overflow elements in the list. Example is present below.
I'd like to hide elements that do not fit inside the red container, but i dont have any idea how to do that and how to count them.
I tried use ViewChild and ViewChildren, but it did not work.
One time I had implemented a pagination for cards, and there I need to show the number of cards which fits inside the available width for handling the responsive mode. That task was quite easy comparing this as the card width was same.
I guess you can try, registering the window:resize listener and then calculate the available width and width of cards to be shown and show only which gets fits.
Related
I am working on an interface for a Raspberry Pi based embedded device. The interface is built with Bootstrap 4 and is currently centered around a .navbar at the top and a .row > .col structure with just two columns within the row. Within each column there are multiple cards. Depending on the user actions and enabled features, there are one or two cards that won't be rendered and the others can change in height.
My current issue is that upon a specific user action, a new card will be added to the first column thus pushing the other cards down the page and some out of view. When this happens, I want one or two of those "out-of-view" cards to then instead show up in the second column.
I can't seem to figure out a good solution to this problem. I want to keep the two columns (at least in visuals) and dynamically assign the various card elements to one column or the other.
If I leave the current structure of .row > .col then each of the card elements are static within each column via the HTML thus short of putting the card in the DOM twice and hiding one or the other, I need a different solution.
If I rebuild the page to use flex-box instead and rely on wrapping, I run into issues where one card will be larger than the other within the row causing a bunch of empty space to show up. That is before I even try changing the order of each card. On to the next solution.
Trying the grid system, I can get something close to what I am looking for but it isn't perfect. The cards move from one column to the next by adjusting grid-template-areas. Since there are cards of different heights (and can change during use), I have some cards spanning multiple rows so there isn't any empty vertical space between cards in a given column or vertical growth to any cards beyond its internal content. This works fine for one given combination of card order and heights, but doesn't for others; I run into the same problem as with the flex-box with empty space within one column for a given row.
I want this to be mainly HTML and CSS driven in order to keep the javascript to a minimum. I figure that I would add some functions to call when various user actions happen (such as with changing the grid-template-areas), it is just a matter of figuring out what HTML and CSS combo to use before writing the necessary JS.
Is there something I am missing with the solutions I have tried so far? Is there other solutions I have overlooked? Do I just need to use JS to essentially "cut" the entire card HTML code block from one column and "paste" it into the other column? Any insight or direction to another solution I can look into is appreciated!
Here are some visuals:
Initial layout:
After that, the user could cause card 2 to pop up which pushes card 3 and 4 out of view:
When that happens, I want card 4 to show up in the second column:
When using the grid system, due to how the various cards can change in height, I have not been able to find a way to size the rows dynamically enough to correct these anomalies (growth if the height is not capped, or empty space if it is):
So I am trying to build a kanban like layout (with Vue and Vuetify) that has lists that grow with their content but then stop growing the moment they reach the end of their container (the container would be the remaining size of the screen) and put in an overflow-y inside the column's div.
Here is the reproduction link: https://codesandbox.io/s/dear-god-in-heavens-o55oz
I have tried to make it look as similar to what I have in my own project at the moment.
Here's what you can see in the reproduced link:
The container inside src/components/common/ListsContainer.vue is a flex-grow flex item. I need this because I want this container to automatically take the remaining height of the screen because the wToolbar will have an extension slot that will change its height. I might also introduce new changes to it therefore it would be much more simpler if the container of the columns has a dynamic height.
The columns inside ListsContainer.vue stretch the parent container when the contents are too much, the only way I can control it is by adding a calc(100vh - XXrem) value to the container and the columns to control their height. You can see that I have commented out my calc values inside src/assets/css/custom.css in lines 19 and 24 to demonstarte the overflow of the columns from the screen.
The reason I dont want to use calc is because
calc doesnt react nicely inside an iPad and I have to introduce different calc values just to contain the columns, I have checked that different devices calculate the height differently (I checked in actual iPads since Chrome's simulator works flawlessly which isnt the case in the actual device)
When the wToolbar is extended, the calc doesnt respond and it pushes it down the page, I would like to keep the overflow-y disabled in this page.
So can you guys let me know how I can set my flex-box settings so that everything is contained the way I am trying to?
I'm testing out some code for a random personal project and I'm looking to place 3 boxes side by side (I believe as divs). But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?
Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time.
Unfortunately, I need more reputation to post my code in the proper format it seems.
Not 100% sure if I get you correctly.
For "But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?", if you wanna make them horizontally centered, you can try this:
wrap them in a container node.
assign a width to this container in its style.
set both margin-left and margin-right of this container to auto
This should then make these 3 boxes (actually the container) horizontally centered.
For "_Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time. _", perhaps width: calc(100% / 3) is what you want to put in the styles of these boxes.
In modern web browsers, even if #Slash_D response is correct, you can get a more flexible alignment using flexbox (here you have a complete guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
Futhermore, if you want all the containers drop at the same time, you have to deal directly with media query based on resolutions (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) , or use a grid system, like bootstrap, that helps you with media queries based on classess (https://v4-alpha.getbootstrap.com/layout/grid/#how-it-works)
Hope it helps
I'm displaying data in divs that floats left on each other. I don't know how many divs that is displayed in one row due to screen size ( Can be one can be 10 ). Here is my scenario. Let's say my current screen size let me display 5 components in one row.
-c-c-c-c-c-
-c-c-c-c-c-
-c-c
Let's say every c is a React component. If I click first row third component I want to display more information under that row. Not next to the div. How can I find out where to paint the more information component?
This might be considered kind of "jank" but what if you had the element you clicked on expand invisibly -- by adding like an empty div or whatever on the bottom of it that has a set height but gave it a fixed width of 100% of the container -- and placed whatever information you wanted in there?
That way, the entire row that your clicked div was on would expand to accommodate that new div you placed on the bottom of it, and you could just place any pertinent information in there?
I have a design consisting of three divs ( http://jsfiddle.net/herrturtur/Mem6u/ ), put next to each other by display: inline-block, but for some reason the last div appears in the middle of the page.
If possible, I'd like to display the three divs next to each other, with the height of the switch div adjusting automatically to the height of the div containing the select element.
What is the function of the switch? you may be able to work this with the float method and strategically placed "clear"..
if you have the option to use JQuery there is a handy tool called accordion (or accordian as there are a couple) that can perform the actions you want relatively easy.. have you already developed the code to perform the actual switch?
UPDATE:
I think is is similar to what you are looking to do .. let me know
working url with this code:
http://home.comcast.net/~elkins35/test.html
Just view the source to see the edits to the code you were using