I am working on a document editor application using Angular 6. It has a paper element which looks like a paper of fixed size.
The user can add multiple child elements(Angular components) to this paper element.
When the user adds children that occupy more space than the parent could afford, the div needs to be added automatically to the next div and if any of the child Divs are deleted, then the overflowing div needs to be added back to the 1st paper.
Is there a way to achieve this?
I have made a simplified stackblitz here.
I think you can use https://angular.io/api/common/SlicePipe. You can show only max count of child elements on page. But i think you must calculate count of pages and display it by ngFor. Good luck!
Related
I have a mat-dialog which contains a mat-stepper. Inside this stepper, I have a step which contains a form. In this form I have multiple elements (list, mat-card and table) which I want to always fill the height of the dialog. Basically, I want the height of the table and also the height of the list on the left side of the table to adjust to the dialog height. The mat-card, which is shown when selecting an item in the list, should always be at the bottom left of the dialog and the list above it should either show all elements (if possible) or display a scroll bar if there is not enough space left to show all elements. The table should also either show all elements if there is enough space or display a scroll bar if there isn't enough space. I do not want any of the elements in this dialog to cause an overflow which would require me to scroll in the actual dialog.
A colleague attempted to solve this by using max-height: calc(90vh - <x>px) before but this really does not work very well at all. How can I do this properly?
Here is a stackblitz which shows the problem:
Stackblitz
Hopefully, my question is clear. If not, please let me know and I will try my best to explain it in more detail.
Your problem is quite simple, the content of the dialog does not fit the height of your dialog.
Every child of the dialog mat-dialog-content, mat-stepper etc, should be maximizing their height (either with height:100% or flex:1 in a flex container).
Here is a quick example of this.
Imagine this layout:
[BOX] [BOX] [BOX]
[ BOX ]
Which is a flexbox design, and – if the screen shrinks – will look like this:
[ BOX ] [ BOX ]
[ BOX ]
[ BOX ]
And would become a set of 4 rows if the screen is too narrow to display even two boxes next to one another.
So far so good.
I am looking for a way to target the last element in the upper row, no matter how the flexbox has currently adjusted to its environment.
Naturally i thought of CSS pseudo-classes, but i was unable to find anything other than the typical ones, such as :last-child and :last-of-type or :nth-child, which would not help in this situation.
QUESTION
Is there a way to do this purely in CSS? If yes, how?
You could conceivably use a media query to target the second item after the subsequent items have wrapped. Barring that option, it's not possible with CSS.
Wrapping is not a behavior that is tracked by CSS. For example, a container has no idea when its children wrap. Therefore, there is no way to target items with CSS based on wrapping scenarios (except with media queries, as mentioned above).
More details here: Make container shrink-to-fit child elements as they wrap
You can't detect and target a flex item but you can add a :pseudo to the flex container and position it at upper right.
Which will probably not help: what do you want to do with that end of upper row?
Other ways of doing things there:
flex-direction: row-reverse will display flex items from right to left. You now have to target the first item. It'll mess the tab order of links and form fields for people using a keyboard which causes accessibility problems. But tabbing blocks from right to left may be acceptable if there aren't forms and/or dozens of links.
flex-wrap: wrap-reverse will wrap from bottom to top. Upper right is now your last flex item but the first row is at the bottom with 2-4 items and the top one will probably have only one item. Probably not the layout you expect. Also it'll mess the tab order of links and form fields for people using a keyboard which causes huge accessibility problems in this case (focus will jump 2 screens below and will go back before a new 2 screens-high jump… Ouch).
Grid layout and auto-fill/auto-fit and constraints on widths could allow you to guess which grid item is last in the first row, but you lose flex: grow shrink basis% provided by Flexbox.
you can use nth-of-type() pseudo-selector, combining with media-queries.
Check out: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
I'm having some trouble with the current layout of my polymer site, specifically with regards to nested components and their associated scrollbars. I'll preface this by stating that by absolutely no means am I a CSS guru. I wish I was because I probably wouldn't be struggling with this as much as I am. Also feel free to jump straight to the jsbin URL as my issue may become apparent.
The situation:
I currently have a nested core-scaffold element, whose main content often requires vertical scrolling and thus it's vertical scrollbar becomes active as required. However, as it is nested, it's container(s) can also have scrollbars enabled. Ideally, I'd like a single scrollbar on the highest level element which can scroll the scaffold's content to it's full vertical extents, yet also cause the topbar to slide away as it does now when scrolling down. I've also noticed that the height of the scaffold's main content is determined by the first page that is loaded into it. Subsequent page loads with different heights does not cause the scrollbar height extents to change accordingly.
Please note that I've simply inserted an iframe loading external content into the scaffold's content section for the purpose of this jsbin demo. My actual site loads a bunch of data driven collapsible height containers within the content pages, wrapping horizontally as needed. Due to their collapsibility, their containing page therefore has a dynamic height. That height can vary from page to page as container heights within them vary.
Here is the jsbin. Whoever can remove me from this css hell will be considered my hero...
http://jsbin.com/muniqi/1/
In my initial jsbin sample code, you'll notice I have specified core-pages height as '100vh' the top level polymer element (i.e. my-app-element). The second level polymer element (i.e. my-scaffold-page-element), loads within the aforementioned core-pages. Therefore, the nested scaffold element's maximum height is 100vh. Further down the chain, when the scaffold-element's main content area's height flows past its host's height limitation, it caused a secondary 'inner' scrollbar to appear, which has a different vertical extent than the original outer scrollbar...so trying to use the outer scrollbar alone doesn't effectively scroll the inner content to its entire vertical extent, forcing you to use the inner scrollbar as well to get the job done. Ugly to say the least.
Now that I know that is the case, one way to reduce the likelihood of an inner scrollbar appearing for the nested scaffold element's main content area is to change it's parent element's core-pages height to something much greater than 100vh (400vh?). Doing so solves the problem in a roundabout way. The outer scrollbar can now be used to scroll the entire vertical extent of the nested scaffold's contents without an inner scrollbar occurring.
In the new jsbin example (below), you can witness the 'fix', which also happens to remove the reliance on core-scaffold, instead preferring to utilize its individual components in a more configurable fashion.
http://jsbin.com/muniqi/3/
While using Twitter Bootstrap, should I nest a row div within a container div and put all my span divs within the nested row? Is that the best practice?
What if I put span divs directly within my row div and do not enclose the row div within a container div?
What if I put span divs directly within my container div, without using the row div at all?
All I know is that a container is 940px and a row is 960px. However, I have seen examples where a row div has been put within a container div. Is that going to help or will it make the display messy?
Please explain me the best methods to follow and under what circumstances.
In general you would use container > row > span
I can't think of an example where the the other 2 options you ask about would break anything, but they may not give you the results you want.
Wrapping everything in the conatiner div will manage the width of the page and side padding. Using the row div will ensure that your spans are layed out the way you want. For example imagine 2 rows that each have just have a single span4. If you don't use the row div the 2 span4s will float one next to the other instead of being stacked vertically.
There are many cases where you will have nested containers in a Bootstrap layout, the first one you will likely come across is in the nav bar, and once you start using fluid Bootstrap layouts you will see that container divs are not always 940px, but if you stick to the container > row > span arrangement it will save you some grief, especially if you are just starting.
Good luck!
You should have row inside a container, since using the container will ensure that the container is evenly centered across the entire page with even margins since container has margin-left:auto;margin-right:auto; in the CSS.
Use row when you want spanX's to appear on the same line.
spanX's that are not inside row will wrap.
Here's a demo that will show you the differences
A row is designed to go inside of a container.
A span is designed to go inside of a row.
Rendering could get unpredictable if you go with any other combination besides container > row > span .
Ultimately if your code works, then you're doing okay. There is no reason to get locked into what other people have done. BUT if you change it up, make sure it's for a good reason, and that you comment the code everywhere to explain your thought process.
I'm working on making a redesign of my college newspaper's website and got the design to fit nicely on an iPad. I'm now trying to switch it to a one column layout (for smart-phones).
The problem is that, in a single-column layout, the the right column must go above the left column. I would know how to do this if the code for the right column was written before the left column, but unfortunately it isn't.
How can I move the left column under the right column? Do I need to use Javascript to switch the column orders in the HTML code? Thanks!
EDIT: I realize that I can have a DIV that is invisible when the width > someNumber. I'd prefer not to have to be redundant though...
The CSS only solution is to start with the smallest screen as your default design then enhance as the screen size increases using media queries. Starting with the smallest screen first puts your markup in the correct order - for the image above Banner, Primary Navigation, Main Content (right-hand column), Aside (left-hand column) and (presumably), Footer. As the media queries apply additional CSS you can then float Main Content right and Aside left - the elements are positioned correctly for smaller or larger screens.
The easiest way I can think to do this is with jQuery (a javascript library) to remove the right column content from one div to another in the DOM. This allows you to create and remove the div's on the fly so there is not redundancy in the end.
If this is too vague, comment and I'll add an example.
CSS can take elements out of the document flow and put them anywhere, in any manner you want. But it cannot create a new document flow (ie it can't reorder elements). You need to position one element relative to the other or position them both absolutely.
If you have access to Javascript and are not concerned about graceful degredation you could also swap the .innerHTML of the two divs.