I am trying to style a NAV menu that is created and fed in dynamically by a SAAS CMS. I want the menu to auto resize into any given number of Columns.
For example:
If the NAV overall width is 960px. I want the menu items to resize in to say 5 equal columns.
Secondly the menu goes two children deep.
So if the top level is parant. this is seen by default on the page. When you hover the Children appear Similar to this site. http://www.laylagrayce.com/ (Ignoring the images in the menu.) I just want it to resize into equal columns.
How can I do this?
You have heard about responsive websdesign? In this case I think its the onlyest solusion.
Related
This page uses two navbar items, one for the top bar, and a separate one for the sidebar. How can I make it so the width of the sidebar is consistent with the end of the logo in the top right?
Using variations of col-xxl-1 etc. results in sizes that are too small or too large at various screensizes.
Thank you.
Instead of using one of the column sizes have you tried using a style attribute or css class to pass in the exact width?
Goal:
Vertically Scroll multiple tables (AG-Grid) with a "global" scroll-bar on the main window.
Problem:
I have 4 child elements (AG-Grid Tables) within a Window, these children can be up to 3 times the with of the main Window.
Now the children would need to be scrolled separately and a scroll bar would be displayed in the rather slim child elements.
The goal is to display a horizontal scrollbar on the main window itself (if the children need scrolling), and this main scrollbar scrolls one of the child windows (AG-Grid offers the functionality to synchronize the scrolling of one table to another).
All 4 children always have the same width as the width is determined by the columns shown within the AG-Grid tables.
The application is written in React using AG-Grid for displaying/virtualizing these tables. So if someone has a solution specific to AG-Grid this would still be helpful.
Thanks for any input!
Edit for clarity: It is already possible to scroll the grids separately / the second thing working is to give the window the full with and scroll the window itself instead of the grids (This is unfortunately not a solution as the first column of the grid should be pinned to the left side of the screen so rows can still be identified when scrolled to the right)
Edit: Screenshot for clarity
It seems you need to combine this two features column pinning and aligned grids. I don't know if they work together.
Say I have a top header of a view in the application. This header row should be single row, and contains action items like input boxes and/or action buttons. When I have, so to say, 5 action items in the header then on FHD resolution these doesn't take up the available horizontal space which is OK. Then on smaller screens, like an iPad (landscape, 1024px width) these action buttons, accumulated, have more width then the available. The generic responsive solution would be to wrap some items into a new row, right? Now in my case I can't wrap into multiple rows but what I need to achieve is to group those action items which doesn't have enough space into a dropdown.
How could I possibly identify which items doesn't have enough space so that which items I need to put into the dropdown? Is javascript the only solution? Is there a common way to solve this?
Thanks
The most common way to solve this would be using CSS media queries.
For example, the CSS tricks website uses this on their navbar: https://css-tricks.com/
You can see that on a desktop sized view there is a list of links on the left hand side of the page. But if you resize the page to be smaller this list of links collapses into a dropdown 'hamburger' style menu in the top navbar.
Read about media queries here https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries.
Media queries basically allow you to add conditional rules based on screen size.
I am working on creating a horizontal navbar that has dropdowns in Bootstrap. The dropdowns are really long, so I'd like to break the results into three separate columns stacked side-by-side. I don't want my dropdowns to have a height beyond 350px. This would be simple enough if I could just organize the dropdown list items into three separate divs, each with a class col-lg-4 (since this particular navbar style only appears on screens 1200px and above), except that the entire contents of the navbar are loaded dynamically via AJAX and are subject to change.
I can think of some less-than-elegant approaches to this issue, using JavaScript to count the length of the list and then divide that number and wrap said number of elements in separate divs (this would keep the height below 350px almost always), but I can't help but think there must be a better way.
Is there some way I can set the max-height of the dropdown (an ul element), set the width of the li elements inside using class="col-lg-4", and have the overflow content carry over into a new column? I suspect I must be missing something very obvious.
I have a page where there are 3 panels adjacent to each other with width 4-4-4.
I am looking for a solution by which if any of the columns if minimized/collapsed.... then the other 2 panels could resize itself and take the space left behind by the collapsed panel and make their width 6-6.
Same again if of the remaining 2 panels if any of them if collapsed the left over panel should resize itself to take over the whole page 12.
Is there any javascript library available which gives me a optimum solution for this?