I've been building an application using Twitter Bootstrap v2.0.2 as the framework, and I've been running into trouble, because the navbar will always collapse when the window is less than x pixels.
Although this is a nice feature in theory, my menu isn't that long and doesn't ever need to collapse. Is there any easy-ish way to do this? I've read a few posts that state I can just change the responsive css file, but I haven't had any success in either finding what I need to change, or changing the wrong values for min and max width.
Is there a class I can use other than div.nav-collapse so I don't have to worry about it trying to auto-collapse?
Thanks!
Just remove all *collapse classes from your nav components. They are all optional.
Related
In the website I am currently creating, I am using Angular 8 (not sure whether the component paradigm has an influence on my troubles with scrollbars).
Like most websites, I need to implement a scrollbar in case the data does not fit the screen. But as I added more and more components, I realized that the way I used scrollbars was confusing and I ended up not being able to implement the behaviour I wanted.
I looked on the Internet but most ressources explain how to customize scrollbars, which is not what I am looking for. The article explaining the few CSS overflow properties were not very useful as well, because I did not have what I wanted, even though I kind of have tried every possibility (at least most I could think of).
Do you have any piece of advice to manage scrollbars ? Good practices & so on.
Currently the behaviour I am trying to implement is the following :
I have a home component containing a navbar and a router-outlet. The navbar is actually overflowing (because of box-shadow and an icon).
The router-outlet contains (if on the right page) a sidebar on the left side which represent a list of emails, and the content on the right. I don't want a global scrolling because I would have a empty space above the sidebar (where the navbar should have been but is gone because of scroll). I would need a scroll for the sidebar, and a scroll for the content.
So if you have any ressource which could help me understand how to use these scrollbars and manage them elegantly, that would be super appreciated :)
Try this perfect-scrollbar which is used for Angular 8.
I want to add a split menu to a Typo3 site that shall also be responsive for mobile screens.
So far I have solved it with two separate menus using lib.mainMenu.special.value = x,y,z on both sides (left and right). The problem is how to merge the two menus to one in responsive mobile viewport.
All pages are at the same level in the tree (but this is not a must).
Any ideas, solutions, scripts or tutorials?
Depending on your framework you either have already some mechanism for changes of menu-display or you need to create your own.
Frameworks like bootstrap already use javascript to dublicate your menu into a hidden one for displaying it in the 'burger-menu' on small screens.
You can do the same: render the menu in the complexest view and rebuild other variants with javascript.
pro: smaller html, faster server-response.
con: work to do in the client, additional JS.
You also can build all versions in TYPO3 and render them and only CSS decides what to display in current screen resolution.
pro: complexer or more different markup for different versions are easier to handle, no DOM-changes at the client
con: more rendering time, bigger HTML
it depends on the complexity of the design:
is the menu splitted inside the HTML?
how much differ the splitted and joined version for each entry?
There are several approaches that could help
The oldest (and outdated IMO) is yaml css. There you could use the layout to (re)sort columns.
A nice approach I just used for a project is flexbox-layout, there you can resort, and restructure almost independent from HTML-structure. One source for explanations is css-tricks.com
another possibility is using css grid layout, you can read about it on css-tricks.com too.
with Javascript and the DOM-model you can do almost everything, you can manipulate whatever you want, it's just a matter if you like the menu determined by JS, i.e. for accessible-aspects I avoid it usually, at least on that level you like to reach.
another option is to restructure the menu, i.e adding already the 2nd menu to the first one, but using breakpoints to show it or hide it (and the 2nd menu in the right sidebar).
my preference is to create the menu(s) that only display has to be change depending on the device, but nothing has to be hidden or created double, just the styling is changing based on breakpoints.
I have solved it by hiding the menu items I want on the right side and wrapped every item with either "hide0" or "hide1" with
NO.wrapItemAndSub = <li class="hide{field:nav_hide}">|</li>
NO.wrapItemAndSub.insertData = 1
doNotLinkIt.field = nav_hide
JavaScript and CSS does the rest. Now I can display non-hidden elements in the left menu, hidden ones in the right menu and the responsive menu displays all. Thanks for the help.
Been working with Bootstrap for a little bit, but am working without it on a new project.
Was curious whether anyone knew of an alternative, easy-to-use plugin to Bootstrap's 'affix'.
I'm really just looking for an element to go to position:fixed upon a certain scroll point (ideally defined by an element), stop at a particular scroll point (ideally defined by a page footer).
Maybe jquery stickem plugin? As stated in their README
Make items sticky as you scroll, to a point.
I am aware of the fact that layout and function of a site should be strictly separated. Layout should be done with CSS and functions of the site, like expand mobile menu on click, should be done with JS.
Reference:1. & 2.
What I often see happening for responsive layouts is having column classes for the various media queries, where just the class name is different, however the width values are identical.
This then leads to HTML in the form of
<div class="container small-query-columns-4 medium-query-columns-6 large-query-columns-12><p>Responsive paragraph..</p></div>.
Would it be acceptable to instead of always defining the same width for columns for various media queries to just make a minimal CSS grid, where the column classes widths are defined once and then dynamically pass those per media query with Enquire?
I know this ruins the above given separation from layout (CSS) and function (JS), though it would mean much cleaner HTML, and this per each media query plus much less CSS as well. Enquire also only calls once per media query so the hit on the amount to download would also be much less with a minimal CSS file. Yes, of course, this means the site is JS depended.
That's not bad idea but I think that it is not good idea too. I had thought about something similar few weeks ago. I wanted to make CSS which will be compiled in browser via JS in few loops and then appended to head section. But after deep thinking I decided to not doing that.
I know that you can make fallbacks and some fancy stuff so it works in every browser with or without js, but I have looked at my grid. It takes less than 10KB. It's interesting idea, but it isn't worh so much work as it will take. Keep your HTML organised and you won't run into issue with too many css classes. You have to let someone who use your "framework" do define widths at certain breakpoints. Easiest thing to do is just write a class name.
Consider that when you use for example bootstrap and want to have 12 columns on mobile, you just don't define it and it automatically falls into that width. Many times it just enough to define max 2 breakpoints with css classes.
When I think about enquirejs I think that it can be used for hiding sliders on mobile for example. When you just display: none it still running and changing classes. If you have something similiar what should be removed because mobile is not good environment for running something, you can disable it by using enquire. Another example is mansory grid, which you can start and disable via enquirejs.
Basically you can use it if you have something already js-depended and want to customize it on diffrent screens, or give diffrent behavior, because if you just set something on window load or document load, you have an issue with someone who resizes window. Here you can use it.
Im trying to recreate the script that rdio (http://rdio.com) has created for their player footer. when you click on footer, a panel slides up nicely and to reveal more content. another example is by teehan lax; the top dropdown http://www.teehanlax.com/ but theirs doesn't support firefox properly.
I came across this snippet, http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm
But its not clean as rdio's or teehan.
any thoughts on library they might using?
We're just using basic CSS transitions, and adding and removing classes. The z-index of the bottom bar is set such that it appears in front of everything else, and the class changes control how the content is changed.
You can accomplish the same height changes with jQuery quite easily, as described here: https://stackoverflow.com/a/4965097/1309238