Does MDL have stand-alone scrollable tabs (i.e. not part of the header)? If the feature is available, I'm looking for the code example.
MDL has scrollable tabs in the header but the stand-alone tabs seem to be missing the scrollable version. On the other hand, Polymer's paper-tabs has the scrollable version I'm looking for, but I can't use Polymer in my work.
Related
I'm trying to get a page layout similar to https://material.angular.io. I used angular/flex-layout to create a combined flexbox/grid layout that works pretty much as intended. The innermost containers (navigation and content) were placed inside a CSS grid, but since it was basically only used as a 2-dimensional container, I thought I could easily replace that one with a column-flexbox. But only that results in this strange effect when scrolling down:
Flexbox (buggy) version
CSS Grid version
The navigation box on the left should behave sticky and not get pushed below the title toolbar.
Is it possible to only use flexbox for this kind of layout?
It looks like some of angular/flex-layout attributes were misconfigured along with some CSS styles. I started again and managed to create a version that behaves the same for CSS Grid and Flexbox:
https://stackblitz.com/edit/material-angular-io-behavior-with-bootstrap
There's a button in the second toolbar that lets you switch between the CSS grid and the flexbox version on the fly.
I recently designed a one-page website for myself using the latest Concrete5. My site uses a dynamic sticky nav which later turns into a fixed nav to the top when I scroll down. The tool bar covers the fixed nav and I cannot see it again until I scroll back to the top.
What I am interested in is this. Is there a way to have the wrapper class that C5 needs for editing to behave like an iFrame from days gone by. The effect that I am looking for is that everything under the toolbar be the website and still be editable.
When the concrete5 toolbar is visible, the html element in your HTML will have the ccm-toolbar-visible class.
With this class, you can change your navigation behavior based on the toolbar visibility. A common approach is to set the navigation position from fixed to static when the toolbar is visible.
Additional information on this topic can be found here:
https://www.concrete5.org/community/forums/customizing_c5/theme-fixed-header-in-admin-mode/#860110
https://www.concrete5.org/community/forums/customizing_c5/trying-to-make-a-header-stationary/#762608
Is it possible to put the tab links in the footer
and the rest of the tab content in the main section?
I have tried it, but once I put the tab links in the footer, the tab component stops working all together.
As far as I know, tabs in the footer are not specified by Material Design. It wouldn't be supported as a default function, but could possibly be hacked and made to work. With that though, no guarantee on updates not breaking it.
If however they are specified, point it out please and we can take a look into either explaining better if it is supported or get the code fixed to work right.
I am trying to make a similar offcanvas element in one of my projects. I found few examples, but since I am using bootstrap 3 I went on with this one: http://getbootstrap.com/examples/offcanvas/ I replicate it in my project, but instead of the toggle button on mobile I use Hammer.js like this:
Hammer("body").on("hold", function() {
$(".row-offcanvas").toggleClass("active");
});
The tricky part is that whenever my content inside the visible div, is shorter than the div containing the list of links (on the right) the page is scrolling. Once I add more content to the visible div, I do not get any scrolling and everything works as it should. I made a simple example here http://florin-cosmin.dk/offcanvas/index1.html , but it can only be tested on mobile, if you really want to see the scrolling (just HOLD not click anywhere in the body). The working example is here: http://florin-cosmin.dk/offcanvas/itworks.html
I tried to set overflow-x: hidden on the visible div, but that doesn't help.
Again, how can I remove scrolling on mobile even when the content on the left is shorter than the one on the right side?
It is very frustrating. Please help :)
UPDATE: I am testing it on default Android browser on 4.3 and 4.1.2. I need to use the default browser as my Android app uses a webview.
I just started with ROR and I'm following the One Month Rails tutorial. This includes the Bootstrap responsive navbar. I now added some pins to my pinterest clone. I noticed that the scrolling does not work when the navbar is in full size. when i make the browserwindow smaller so the navigation gets into the small navigation symbol i can scroll the page. You can probably see best on my heroku link: morning-shore-7790.herokuapp.com
It would be great to get a hint on how to solve this.
Thanks a lot
Looks like you've nested the container class inside the navbar, which will always cause this behavior.
If you're using ERB it means you didn't close a div where you should have, if you're using haml or slim it's most likely an indentation oops. If you use chrome, safari or firefox you can see this clearly, just inspect the element and collapse the navbar, if all other content is contained within that, you still haven't fixed it.
If you still have questions post your layout and your index.