Desired goal: I ultimately want my app to have a fixed, sticky menu bar at the top, then a div/component that contains the rest of the content and not scroll, while allowing the sub-components freedom to scroll when necessary. I will ultimately build this in Next JS, but I can't even make it work in plain HTML/CSS, so I'm unsure of the styles to apply in the Next code. I suspect that I have to apply styles to the outermost <body> tag, but nothing I tried seems to work. I also suspect that (to use Next), I will need to override the Document as they describe in the Next documentation and apply styles to <body>. But first, just in plain HTML...
If I write this in bad, incorrect pseudocode, I'm looking for:
<html>
<nav style="sticky to top">
<!-- Markup to render a menu. -->
</nav>
<body style="don't scroll; size=take up the rest of the page">
<table style="overflow-y: auto"
<!-- TONS OF TABLE ROWS. -->
</table>
</body>
</html>
I tried the brute force method of sticking overflow: hidden on just about every tag in the tree, but still nothing working.
I consulted this good post and saw this close post (with a terse answer) but didn't think the second post applied.
Here's dumb HTML that I was trying to get to work (ignoring the sticky nav part):
<html>
<nav>
<div style="background-color: purple;">
<p>Nav bar</p>
</div>
</nav>
<body style="overflow:hidden">
<div style="overflow: scroll">
<table style="color: red; overflow:scroll">
<tr><td>Item 1</td></tr>
<!-- Repeated the above about 20 times. -->
</table>
</div>
</body>
<footer>
<!-- Only put this here so the page bottom is obvious; not in my app. -->
<p>Footer here</p>
</footer>
</html>
For what it's worth, this is the Next/React code with Tailwind that will be the base of the main page:
const AppLayout = ({ children }) => (
<>
<header className = "sticky top-0 z-50">
<Menu />
</header>
<main id = "AppLayoutMain" className="relative bg-white antialiased overflow-hidden">
{children}
</main>
</>
);
I added extra tags in there with styles in random and unstructured ways, trying to hack it to work and no dice.
If someone could show me my errors, or post anything simple that works, I'd appreciate it. I use tailwindcss so you can express it that way if helpful.
You should be able to accomplish this by using flex-col and giving your content div overflow-hidden. Something like:
<div class="flex flex-col h-screen overflow-hidden">
<div class="flex-shrink-0">Header content</div>
<div class="overflow-hidden">
<div class="w-40 max-h-full overflow-y-auto">
Scrolling content
...
</div>
</div>
<div class="flex-shrink-0">Footer Content</div>
</div>
See it in action: https://play.tailwindcss.com/bxUwAuCs8R (shrink the screen vertically to see the scroll bar).
Related
I have been adding , and elements to my demo portfolio, just to practice what I've learnt so far, but it seems that these tags mess up the "container" class from bootstrap.
initial version without accessibility tags
<!-- <header> -->
<div class="container">
<div class="hl1"></div>
<div class="row">
<div class="col-12 p-3">
<div class="card mx-auto" style="width: 18rem;">
<img src="./portrait2.jpg" class="card-img-top" alt="My Portrait">
<div class="card-body">
<p class="card-text">Hello there! This is me!</p>
</div>
</div>
</div>
<div class="hl1"></div>
</div>
<!-- </header>
As you can see, I've commented out the tag for the moment. After I add the header, article and footer tags, the content swaps out of the container class and the (hr)tag goes across the total width of the page.
The good part is that the content remains at the same location, like only the (hr)tag would be affected by the tags.
My question is there a way to overcome this? Or I should forget the accessibility tags for now, until I become more advanced in knowledge.
Thanks.
It'd be better if you could provide the entire code. Although, you can check if your Bootstrap CDN link is BELOW the link to your external stylesheet. This makes sure that the Bootstrap properties are prevalent over anything you have defined in your stylesheet.
I am using the new Foundation XY-grid on a new project. The site has a max-width of 1000px for the grid-container.
All is well.
But, i now need to make a new component for the site using the Accordion component from Foundation. No problem there either.
The problem, starts when, the background, of the open accordion element, needs to be, another bg-color, than that of the parent element (edge-to-edge).
This would not be a problem, if it was not for the fact, that i needs to fill the entire width of the page - the background color that is.
The content itself, still has a max-width of 1000px.
This is the standard markup:
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="large-12 cell">
<ul class="accordion" data-accordion data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item>
Accordion header
<div class="accordion-content" data-tab-content id="deeplink1">
Accordion content
</div>
</li>
</ul>
</div>
</div>
</div>
The above works as expected, and has the same bg color as the <body> - all is good.
But, there is a variation, of the above, where the background color, differs from the <body> bg-color.
To do this, i simply wrap the grid-container, in a callout, like so
<div class="secondary callout">
<div class="grid-container">
<div class="grid-x grid-margin-x">
<!-- accordion markup -->
</div>
</div>
</div>
This also works as expected.
The problems starts, when i open an accordion item.
The background-color, of the accordion item, needs to have the background-color from the <body> (or at least, not the same as the one from 'secondary callout').
But, how do I achieve this, in the best possible way?
Example: https://codepen.io/anon/pen/WXEMyp
Wanted output:
Wordpress has this html structure in the backend...
<!DOCTYPE html>
<html ...>
<head>
...
</head>
<body class="wp-admin ...">
...
<div id="wpwrap">
<div id="adminmenumain" role="navigation" aria-label="Main menu">
...
<div id="adminmenuback"></div>
<div id="adminmenuwrap">
...
</div>
</div>
<div id="wpcontent">
...
<div id="wpbody" role="main">
<div id="wpbody-content">
<div id="screen-meta" class="metabox-prefs">
...
</div>
<div class="myplugin">
...
</div>
</div>
</div>
</div>
<div id="wpfooter" role="contentinfo">
<p id="footer-left" class="alignleft">
...
<div class="clear"></div>
</div>
</div>
</body>
</html>
By the default #wpwrap has 100% of height and my problem is that I need #wpcontent, #wpbody and #wpbody-content with 100% height, because my plugin (.myplugin) has inside a sidebar and an area for content that I need both with 100% of height too...
I've tried several things... with table-cell #adminmenumain breaks and I don't want to touch things outside of #wpcontent... with position absolute... #wpfooter breaks if I have scroll in myplugin
Probably with a few lines of jquery I could resolve the problem, but I really want to do it only with CSS
Maybe someone with a wordpress installed, inspecting a little bit the code could give me some suggestion ... thank you very much!
Use min-height: 100vh;,
all modern browsers support them, except Opera Mini browser.
https://caniuse.com/#search=vh
However you may always provide a fallback for browsers that do not support viewport-relative lengths using the old “height: 100%” option.
But to get it working. Add this little bit:
html, body{
height:100%;
}
I am trying to implement the classical sticky footer. I am using angular 1.4, ngRoute, ngMaterial etc.
I have tried css solutions (setting wrapper, footer, html, body 100%) and also jQuery functions that calculate the height of the element, but nothing works flawlessly. Note here that I don't want to set a certain height for the footer and then calculate the remaining space. I want it to be responsive to my content.
1) We most solutions, I am able to stick it to the bottom when the main content area is smaller that the height. In this case, there is an empty area between the main content and the footer (body). I can set the body's background color equal to the color of the ng-view so that it looks the same. I am not sure though if this is correct.
2) When the main content gets bigger, the footer is lost (goes behind the main content instead of scrolling down). Does this has anything to do with angular directives or routes, or am I missing something else?
You can check my plunkr to see. Click on any tab other than 'home' and you see an empty page with the footer on bottom. Click on 'home' and the footer is lost. It is actually there, behind the content.
p.s. I don't want to put all my code here it's pretty big. If you have any questions please see plunkr or ask me.
<body class="Site" ng-app="personalWebsite" ng-controller="mainController as main" style="display: flex; flex-flow: column nowrap;">
<div class="Site-content">
<tsafou-nav></tsafou-nav>
<md-content layout-padding ng-view></md-content>
</div>
<footer>
<tsafou-footer></tsafou-footer>
</footer>
</body>
*Footer
<div class="footer">
<p>Design by<span>WOW</span></p>
</div>
I just realized that the following code works on firefox but not on chrome! Can someone confirm that and suggest a fix?
<body class="Site" ng-app="personalWebsite" style="display: flex; flex-flow: column nowrap;">
<div class="Site-content">
<tsafou-nav></tsafou-nav>
<md-content layout-padding="" ng-view=""></md-content>
</div>
<footer>
<tsafou-footer></tsafou-footer>
</footer>
One option is using bootstrap sticky footer
http://getbootstrap.com/examples/sticky-footer-navbar/
It's related to the Angular Material library you are using, which relies on Flexbox. Review this site for how to add a footer using the Flexbox framework.
To easily fix your problem, you can move the footer within the div class that has the 'site-content' class. If you want to have some empty space, you can try setting a div outside that has a min height. So it would look like this:
<body class="Site" ng-app="personalWebsite" style="display: flex; flex-flow: column nowrap;">
<div class="Site-content">
<tsafou-nav></tsafou-nav>
<div style="min-height: 500px;">
<md-content layout-padding="" ng-view=""></md-content>
</div>
<footer>
<tsafou-footer></tsafou-footer>
</footer>
</div>
I am facing a weird problem in my HTML template.
Expected Layout is :
Navbar
Slider - Text on the slider
Some Section.
Result:
Navbar
1. Some Section
Slider - Text on the slider - Section on the slider i.e., below the navbar
I am using bootstrap.
Using 'Developers Tools' I found out that, the slider.js appends some div tags just before any other tags in the body. The whole area is covered by the slider div first. Then comes the navbar and section. Looks like there is no connection between navbar - section and slider.
The existing code looks like this in the browser in developer tools option:
<body>
<div class="slider></div>
<div class="container">
<div class="panel">
<img src="" class="" />
</div>
</div>
<nav>
</nav>
<section>
</section>
</body>
Please help me. I am unable to understand.
Thanks.