What's the best combination of components to create (zero-dependency and totally UIKit-native) collapsible sidebar for admin dashboard (as in responsive and hide/show menu) seen on many admin templates? I'm looking at grid + accordian + animation + sticky + cards, but I'm not sure how to change the uk-width [1-3][3-4] responsively on resize or adaptively to user's viewport (not the show/hide utility uk-hidden or uk-visible thing). Please recommend, greatly appreciated...
I found the answer. I was looking on the documentation and figured this can be achieve by using the toggle component. I can effectively hide and show the sidebar on hover or hide it permanently using a button toggle instead of just totally hiding it from the user's smaller viewport using the uk-hidden/visible class. This means, the sidebar is still accessible from a toggle and it's useful for smaller screen. Thanks!
Related
Is there any way can we create panel in syncfusion, which can be expandable and collapsible? I wish to give name to the panel, and add related controls to inside the panel.
We have Sidebar component that typically acts as a side container to place primary or secondary content alongside the main content. By clicking a hamburger menu icon, you can expand or collapse the sidebar. The component can also allow any type of HTML content or component to be placed in the Sidebar, like menus, lists, and tree views, etc.,
To know more about Sidebar component, refer the below links.
Demo : https://ej2.syncfusion.com/aspnetcore/Sidebar/DefaultFunctionalities#/fluent
Documentation : https://ej2.syncfusion.com/aspnetcore/documentation/sidebar/getting-started
The Dashboard Layout component provides the capability to arrange, resize, and reorder the panels within the layout. The Dashboard Layout is a layout component which can be used to render custom components like Grid, Chart, etc., You can also interact with the panels, to perform operations like resizing or moving the panels. But it can’t be able to do the expand and collapse functions.
To know more about Dashboard Layout component, refer the below links.
Demo : https://ej2.syncfusion.com/aspnetcore/DashboardLayout/DefaultFunctionalities#/fluent
Documentation : https://ej2.syncfusion.com/aspnetcore/documentation/dashboard-layout/getting-started
Also, we have an Accordion component with the support of expand and collapse functions. It’s a vertically collapsible content panel that displays content, one or multiple at a time, within the available space. Click on the header element to expand or collapse the corresponding Accordion panel to display its content.
To know more about Accordion Layout component, refer the below links.
Demo : https://ej2.syncfusion.com/aspnetcore/Accordion/DefaultFunctionalities#/fluent
Documentation : https://ej2.syncfusion.com/aspnetcore/documentation/accordion/getting-started#add-aspnet-core-accordion-control
Kindly check whether any of the above shared component suits your requirement.
I lifted the code to create a horizontal card for my band's website which can be seen here:
http://www.jukeboxjunkies.rocks/Song
I really like the look - but when the cards are viewed on a mobile device, the rows stack and I don't like it as much.
The version I like
vs:
the version I don't like (shows like this on smaller devices)
So, 2 things...
How do I prevent the rows from stacking?
I need to add a link on the far right that will just say "Request" - This will show up based on a setting in my database (basically if I turn on requests for the gig) - I am not worried about the styling, I can do that later (although I just will want it centered top to bottom of the card). But I need help with bootstrap code to show or not show.
I can put the HTML code in here - but it can be seen on the site - let me know if I need to post it here and I will.
#1
On the card, change d-sm-flex to d-flex. d-sm-flex is not getting triggered on breakpoints below 576px, which happens to be most Portrait oriented mobile devices. Also, you don't want flex-wrap set, at least for mobile, since you seem to want the content side to stay to the right and not stacked beneath
#2
It looks like you already have it below the card within the card-footer, which automatically uses text-align right across all breakpoints. Is this not what you want? From a UI standpoint, user behavior is more inclined to right-aligned buttons hence why the hamburger is on the right side.
For tablet+, IMO having the request link below is also acceptable. But you do have a lot of horizontal real-estate to use so you could get away with the following adjustment:
.card.flex-sm-column.flex-md-row
.card-footer.align-self-md-center
I would also recommend that if you make any CSS selector adjustments, don't make them directly on the .card selector. Add another CSS class to these specific cards, like <div class="card card--song" />, so that you don't override the global .card styling provided by bootstrap and instead override it at a component level (.card--song).
In Bootstrap I have a standard collapsible navigation.
When the mobile navigation is open I want to add an extra element to the top of the navigation, essentially as quick links to key areas.
I have added the below picture to illustrate my idea.
Essentially I have the Bootstrap navigation but is it feasible just to add a DIV or include a file at the correct viewport, in order to add the extra grid above the navigation.
UPDATE
So far I have the following using the advice given, I think now all that's required is to remove padding, as the navigation is in a col-xx-12.
You can use bootstrap responsive utility classes such as .hidden-xs .
This allows to hide and show the divs based on the screen dimension.
Refer here
I know that this is not my "personal helpdesk", but am looking for a simple solution to implement a navbar where navbar items dissapear and eventually turns into a dropdown (or left side navbar) as the browser is resized horizontally like http://mashable.com.
I am currently using http://www.bublinastudio.com/flattybs3/ which is built on top of Bootstrap 3. I have been looking for hours but all I can find is "how to put dropdowns in your navigation bar". Nobody explains how you can show/hide navbar items based on browser width and how to prioritise your items, indicating which should disappear first.
If any of you could please just redirect me to some useful sites with more information about this I would be most grateful!
Bootstrap 4 (updated 2019)
Here is a newer option for Bootstrap 4.1. This will collapse the overflowing extra navbar items into a right side dropdown list. It progressively moves the navbar items to the dropdown.
https://www.codeply.com/go/IETSah3bFG
Bootstrap 3 (original answer)
If I understand your question, you're looking to have the navbar links collapse to the "More" dropdown on the right when there is not enough width. This would require customization to the CSS, and some jQuery to monitor the width of the navbar and collapse the links overflowing accordingly...
Here is a working example: http://bootply.com/128897
You could look up information about both Media Queries and also :nth-child() selector. The should help you along with what you are hoping to do!
nth-child()
http://css-tricks.com/how-nth-child-works/
http://api.jquery.com/nth-child-selector/
Media Queries
http://css-tricks.com/css-media-queries/
I believe everyone would have seen, facebook mobile app. Also in many flat UI patterns website.
I would like to make one such Left menu.
THis is what I did now.
Hide the menu initially (display:none)
On click of the menu button. Show the left menu (toogle), and increase the left margin on main content using javascript (style,maregin-left:100px;)
This is working fine, but I just want to know, is this the best practice, and will this responsive?
The design pattern is known as 'off canvas' layout.
Depending on the nature of the content you might not want to have it hidden on larger screen, depends on your requirements.
There is a good example of what I mean here: http://jasonweaver.name/lab/offcanvas/
Where the navigation is visible on full screen and hidden on smaller mobile viewports.
what you re doing is good but for best practice i will use the css3 transform with translate some thing like this
.menu{ -webkit-transform:translateX(-200px)
from there you can use the toggleClass("active") from jquery
.menu.active{-webkit-transfrom:translateX(0)}
hope this help!
Yes, this is a perfectly fine approach and it should behave responsively since it's only taking up 100px of width. If it was a full screen horizontal drop-down menu, then you would have to make sure its contents are responsive, but a 100px wide vertical menu will be fine on just about any resolution (especially if the user can choose to toggle it open or closed).