We're implementing a Muut forum in our site, and have successfully embedded it into a coding block in the body of the page. However, when logged in as an admin, the sidebar of the forum takes on additional features that pushes the forum into the footer of the page, instead of the body stretching to accommodate the forum dynamically. We've tried different coding techniques but have settled on a static page length (for now). We'd like to implement a way to dynamically stretch the page to fit the forum, no matter the size, vertically.
Here's the header we implemented:
<style>
#pageWrapper {
min-height: 1100px; }
</style>
And here's the muut embedded script:
<!-- Muut placeholder tag -->
<div class="muut">
<!-- Muut API -->
<a class="muut-url" href="https://muut.com/i/ourforumid">Our Forum</a>
<!-- Custom HTML -->
<h4>Another Forum</h4>
<h4>Another Forum</h4>
<script src="//cdn.muut.com/1/moot.min.js"></script>
</div>
Any help would be greatly appreciated, as our conventional attempts with div styling haven't worked. We don't want to overflow with a scrollbar, or hide the overflow, but just want the body container to stretch dynamically to accommodate the forum. Thanks!
Muut has its own div call tags, so after speaking with their team, here's the correct implementation:
.muut .m-sidebar {
position: relative;
}
It's that simple.
Related
I am working/designing the front-end (working on the layout html+css, later will use php, mvc pattern) of a website. The website has a header, body, side menu and a footer The layout is ready.
There are a few forms which are unusually long/huge since all fields are necessary and I could not make them any shorter. The form opens in a new page.
Not to scare the user away I am planning to downsize the header on the form template (the design change will only apply to the form templates) and get rid of the footer completely.
I tried looking a few places but did not find how to go it done. In short, I want the site to have all block i.e. header, body, footer but when it comes to the form I would want to downsize the header and remove the footer to make the form look sleeker.
Is there a way to do this?
Note: I post no code because I have no problem with the code but the concept.
You can use display: none for the footerelement in CSS rules that only apply to this page (for example in a style tag in the head of that page).
Concerning the header, it depends how it is built, if it has a logo, background image, text, menu, whatever. In general you could reduce the height, make the logo smaller, hide parts of the text in there etc.
You can also done this thing using angularjs
ng-include
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body >
<div ng-include="'header.html'">
</div>
<div ng-include="'footer.html'">
</div>
</body>
</html>
Make sure the body of the page has a class, for example .no-footer .small-header or .form-page. and then in your CSS stylesheet, use something like this :
body.no-footer #footer{
display:none;
}
body.small-header #header{
height:50px;
/* or whatever you want to apply to make the header smaller */
}
I'm new to jQuery and to mobile applications in general.
I have an annoying problem with a jQuery theme called nativeDroid.
After adding forms to my page, whenever I click on the form (regular input or textarea) the
header and footer changes their location and stretches the page width.
It seems that when clicking on the text filed, another class is added to the header div.
the class name is .ui-fixed-hidden.
I viewed an identical question here but the solution isn't working for me.
I tried changing the .ui-fixed-hidden class so that it matches the solution given but the
problem remains the same. If any one can help me I would really appreciate it since it will
be a shame to give up such a great looking theme like this one.
I can't post any images yet but the problem looks identical to the one in the post I added.
Can anyone please help me out?
I am using PrimeFaces 5.0 final release, which means I am using jQuery Mobile 1.4.2.
I added data-tap-toggle="false" as recommended here (and in many other questions here on stackoverflow), but that did not solve my issue.
<div data-role="header" data-position="fixed" data-tap-toggle="false">
So, I also added the following, and this fixes my issue.
.ui-header.ui-fixed-hidden {
position: fixed !important;
}
Add data-tap-toggle="false"
For example, i used in this header, and worked for me:
<div data-role="header" data-position="fixed" style="height:87px" data-tap-toggle="false">
Home
<h3>Contact</h3>
<img src="objetos/logo_48.jpg" class="ui-btn-right logoHeader"/>
</div>
This has to do with the tap toggle function. When you click on the page, we set position: absolute; instead of fixed for the toolbars. You will notice this behaviour on this page that has more content: http://jsbin.com/erezak/25
So removing/adding that class is on purpose. If you don't want this you can set data-tap-toggle="false".
The problem is that we pull fixed footers 1px down to fix a 1px gap issue on Android. We also set 1px padding-bottom to keep the same visual height.
This is causing the text to jump 1px when we switch to position: absolute; on a short page (no scroll)
Other issue is that the border is not visible with position: fixed;, but becomes visible with position: absolute;
Ref: https://forum.jquery.com/topic/ui-fixed-hidden-on-click-event-1-1-rc2
I am trying to create an html page which will be used for printing data using browser. I need to include a footer with it which will show up in every page at the bottom when printed and I have developed the following code for implementing this.
The following code is working fine, but the problem is when my contents inside the div content gets long enough to make users scroll down the page, that time if I go to the print option of Google Chrome and see the print preview, I can see the footer shows up in the first page, but not in the rest of the pages. But this same code works in firefox and the footer shows up in all the printed pages(and even shows up in the print preview).
Could you please help me to show up the footer in every pages when printed using Google chrome?
Thanks :)
<html>
<head>
<style type="text/css">
html {margin:0;padding:0;border:0; overflow-y: scroll;}
body { font-size:75%;color:#222; font-family: Geneva, Arial, Helvetica, sans-serif;}
#container {margin:0 auto; height:100%; }
#content{}
#footer {position: fixed ; left: 0px; bottom: 0px; right: 0px; font-size:10px; }
</style>
</head>
<body>
<div id="container">
<div id="content">
My Contents
</div>
<div id="footer">This is my Footer</div>
</div>
</body>
</html>
Should have position: relative to parent element of footer
and it's parent element is body so give it to body or container
http://jsfiddle.net/jXujq/ See the CSS code...
For anyone still facing this issue, I've created an open-source library that could solve it. It allows printing repeated headers and footers from Chrome, depending on the structure of your html. See this answer:
https://stackoverflow.com/a/34444930/2196424
I've spent a lot of time on this footer thing, I was able to do it on IE using position: fixed and bottom 0, with some body margins to avoid the content from overlapping with the footer.
But with chrome, the only way I was able to do something similar was by using javascript to calculate the white space required to push the footer to the bottom (by assigning that value to an empty div): -
var printPageHeight = 1900; //(have to test this value)
var mFooter = $("#footer");
var bottomPos = mFooter.position().top + mFooter.height();
var remainingGap = (bottomPos <printPageHeight ) ? (printPageHeight -bottomPos) : printPageHeight - (bottomPos % printPageHeight );
$("#whiteSpaceToPositionFooter").css("height", remainingGap+"px");
However, getting the size/height of the print page right is very difficult and the height() method of jquery doesn't account for margins and heights.
You need to set in your footer:
position:fixed;
bottom:0;
Maybe this would help you?
CSS Sticky Footer
I'm trying to create a sticky footer for a responsive website. I've search the internet and have found various solutions but my problem is that due to the amount of text in my footer, the height of the footer changes are word-wrap occurs. I've tried using the method on Ryan Fait's site ( http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ ) but since you can't account for the height of the footer being a static value, it's hard to set the push value for the CSS. Currently I just have the footer fixed to the bottom, but that's causing a problem because as the footer increases in height, it's taking up valuable space on smaller viewports. Here's an example of how much info is in my footer below. Any suggestions?
<footer>
<div id="upperFooter">
<p>2000 - 2012 College Name | Copyright | Internet Privacy Policy | Disclaimer | Collection and Use of Social Security Numbers</p>
</div>
<!-- end upperFooter -->
<div id="lowerFooter">
<p>College Name is a member of the Stated State College System. College Name is not affiliated with any other public or private university or College in State or elsewhere. </p>
<p>College Name is a division of College Name and is accredited by the Commission on Colleges of the Association of Colleges (“XIXI”) to award the baccalaureate and associate degree. Contact the Commission on Colleges at for questions about the accreditation of College Name.</p>
</div>
<!-- end lowerFooter -->
</footer>
Try giving the footer absolute positioning
footer {
position: absolute;
bottom: 0;
}
I've had good success with Ryan Fait's code in the past, but as you mention, it doesn't work well for variable height footers.
The best solution I've found when the footer isn't a fixed height is this Flexbox solution
Flexbox is awesome and forward thinking, so personally I don't mind if you won't have full support for some older browsers.
Working example based on code below. I've used some vendor prefixes so wider browser support but code not so clean
HTML
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>
CSS
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
You might want to check out this blog post: http://timothy-long.com/responsive-sticky-footer/
He uses the display: table hack to do it, but the demo page does work fine.
Your other option is using media queries to adapt the footer height as it changes.
You can try this: Modern Clean CSS “Sticky Footer”. Maybe it will help.
Use a footer with: position:absolute; and give it a height, then give margin-bottom: (footer height); to your wrapper.
What about
footer {
position: fixed;
bottom: 0;
}
I have been asked to design a side scrolling site for Wordpress similar to this
site. Each post is positioned side by side on the page.
Im trying to work out if there is a line of PHP that i can add to page.php that will allow a normal vertical scrolling site to horizontal scroll ?? as far as I'm aware there is no jQuery used . . . . .
I've looked for countless amounts of Wordpress themes but can't seem to find the relevant piece of php for horizontal-scrolling. It seems to be quite a common layout for UK based illustrators/graphic designers. Does anyone have any ideas how to achieve this ??
thanks
https://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
the DEMO...
https://css-tricks.com/examples/HorzScrolling/
Is quite good - although could be more intuitive with anchors & arrows
Use this theme:
http://thethemefoundry.com/shelf/
Otherwise you'll have to digg into CSS for that effect.
Give your body (or for instance a wrapper div) an explicit width, either via CSS (fixed, see below) or JavaScript (dynamic and for instance depending on the number of articles). Then float your articles left and give them an explicit width as well.
<!DOCTYPE html>
<style>
body { width: 8000px; }
.article { float: left; width: 800px; }
</style>
<body>
<div class="article">...</div>
...
<div class="article">...</div>
</body>