I'm currently developing a responsive website with the new Foundation 6 but I can't seem to find how to disable the responsive grid (I need to make it optional for the customer) by the tutorials for version 5.
Thank you very much.
Remove this meta tag from header.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
You also have option to use Responsive Switch by filzhut.
Remove the styling for the row, column and columns classes.
Add this css code block to the header after the foundation css links on each page you desire to remove the grid styling. Or, you can include the style in your foundation css file at the bottom:
<style type="text/css">
.row, .column, .columns { margin: 0 !important; padding: 0 !important; float: none !important; display: block !important; position: static !important; width : auto !important; max-width: none !important; clear: none !important; }
</style>
Here is what I mean by adding the style to the bottom of the foundation.min.css file to remove grid styling. Also, this means you will have to host the css file locally and not use a cdn.
Now, as for giving your customer a choice of grid or no grid, you can show them two dev sites, one with the grid and one without the grid. Or, you could put a button or some element on the page and use js to add and remove the css or an element in a form to do it with a server script. In your question you referenced:
by the tutorials in for version 5
I didn't find any tutorial for f5 with a switch for the grid css, provide a link and I may update this answer.
My question is how I via. the CSS can force my webpage to show a horizontal scroolbar on the frontpage.
I've triede looking for overflow-x: but can't seem to find the right place.
My webpage: http://holtumdata.dk
I've had customers who have trouble finding the "Download" page, when they're on computers with small screens. (open browser in window mode, to see what I mean.)
Thanks in advance!
Here looking at your page I can see that you have a HTML line like this
<div id="portfolio_viewport" style=" overflow: hidden; outline: none; cursor: -webkit-grab;" tabindex="5000">
Remove the overflow:hidden in element's style
but since CSS is generated from module we can override it locally by using script like
<style media="screen" type="text/css">
#portfolio_container {
overflow-x: scroll !important;
}
</style>
I check your site.. By applying overflow-x:scroll
your problem may be solved .
In CSS :
body{
overflow-x:scroll;
}
You put it in the html{} in your css file.
And a mozilla firefox specific one: -moz-scrollbars-horizontal
Like this:
html{
overflow-x:scroll;
}
I have attached a screen shot below of a recreation of an issue. For some reason when I have a background image style IE8 is taking another style from the same selector and appending it after the background-image style. This is causing issues on some of my pages.
My HTML is simply:
<div>test</div>
My CSS (in the head tag) is:
<style type="text/css">
div {
height: 200px;
width: 200px;
background-image:url("breadcrumb_location.jpg");
border: 1px solid green;
font-family:"Courier New", Courier, monospace;
}
</style>
And here you can see the developer tool in IE8, why is the border showing up at the end of the same line for the background image style? As a workaround, I know I can just make a separate selector ( such as div{background-image:url("some-image.jpg");} ) but I don't want to have to do this all over.
I have discovered that this bug goes away if I use the complete background shorthand. This is also not an ideal solution because there are many background images on my pages and ultimately it is adding what I consider unnecessary css resulting in a larger css file (yes, every bit counts, especially when you might have hundreds or more background images in a css file for a whole site.)
Anyway, unless anyone can suggest a better fix for this bug (and in case anyone else doesn't know CSS shorthand), the fix was changing background-image to:
background: white url("breadcrumb_location.jpg") no-repeat top left;
*I'm re-posting this question because I only got one response before, and it didn't work. Hopefully someone new will see this and know what to do! *
I'm using IP Net Renderer to view my newly installed forum (http://www.datesphere.com/forum/) in IE7. If you care to take a look, you can see the forum is overflowing its containing element (it's wider than the 960px container I have for my entire site).
I've tried adding overflow:hidden to the .wrapper class as well as width:100% to .tborder per advice received on StackOverflow, but it didn't work.
The forum renders correctly in IE8+, FF, Chrome and Safari, but not IE 7. Does anyone know how I can fix this?
If you use IE9/8 and run the Developer toolbar you will notice that the global.css that is being generated is different for IE7 from IE8. Take a look at what is generating that Style Sheet for you and see if you can modify it to make the MIN-WIDTH:930px; or MIN-WIDTH:100%;
Or a second option add somewhere after the glboal.css style sheet a inline-style or on page css or link another style sheet .wrapper { MIN-WIDTH:930px !important; } or .wrapper { MIN-WIDTH:100% !important; } so that it overrides whats generated in the global.css file.
IE7:
.wrapper {
MIN-WIDTH: 970px; MARGIN: auto; WIDTH: 85%; MAX-WIDTH: 1500px
}
IE8:
.wrapper {
MARGIN: auto
}
Change your min-width value for your wrapper class. You can set an static width or set it to 100%.
Remove #wrapper div
And set IE7 specific .tborder {display:inline-table}
I'm working on a printable list of events, the printer prints one page fine, but cuts off some of the text on the bottom, then it print a second blank page
I've tried everything I know but am at a loss.
In print.css, set overflow: visible instead of overflow: auto on div#content. That fixed it for me in Firefox at least. The definition of overflow auto is: "If overflow is clipped, a scroll-bar should be added to see the rest of the content" -- but scroll bars don't exist on printed pages.
I'm guessing that since the content div should span across multiple pages, the browser thinks "you're flowing outside your container and must be clipped with a scroll bar". The container in that case is the first page the content div appears on.
I know this is an old question but here's another, newer way this can happen.
Check if you're using display: flex; on the clipped element. It was the problem for me, setting it to block fixed it.
I found that setting display: inline on container divs also helped. Some of these great answers here have worked for me in certain situations while in others no.
<div class="container">
<div class="content-cutting-off-here">
Some long text that gets cut off at the end of the page...
</div>
</div>
Most people set containers to display block or inline-block. For me it was cutting off text, and setting it to inline circumvented that. This also makes width and height irrelevant for the offending container div; which I have found to be a nuisance when printing.
#media print {
.container {
display: inline;
}
}
Here is a great article that helped me with this solution.
If any of the containers you're trying to print are floated, they'll get cut-off like you're seeing.
In your print.css, make sure you turn off all the floating that you can without destroying your layout. It's a pain, but browser support for printing is weak at best.
Are you already using the print value for the media attribute for your stylesheet like
<link rel="stylesheet" href="print.css" media="print" />
You might also want to use page-break-before attributes for elements that you don't want to break.
I just resolved this problem in ie7. This was in a Sharepoint project, which had various table cells and/or divs set to height:100%. When printed, it would print long forms, the first page or 2 would print as usual, then blank pages instead of the rest.
In my print stylesheet, I set those tables & divs to height: auto, and now it prints fine.
I'm having a different problem in IE8 now. UGH!
if overflow:visible; not works, try overflow-y:visible;
(i had body{overflow-y:scroll;}, and body{overflow:visible;} in print.css not rewrited it...)
I fixed the problem by adding overflow:visible; and give it padding-right: 30px; to substitute for the scroll bars width.
I just ran into this issue and have been scouring the internet for a solution that fit my specific needs. In my case I had about 7 tables nested in a larger table. The only way I was able to get the entire web page to print and display in print preview correctly was to use page breaks. Page breaks are CSS properties that allow you to specify and/or force page breaks by attaching the property to block elements.
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before
just setting display: inline solved my same problem.
Reference link I got, https://www.bennadel.com/blog/851-fixing-divs-that-cause-content-truncation-when-printing.htm
I setup my print sheet to only print the modal content. My fix was to make the modal position: absolute;. My modal was originally position: fixed;.
For me setting overflow:visible; for body solved the problem.
body {
overflow: visible;
}
I've had this issue to. In my case, this was due to an
position: fixed;
Element. I changed this to
#media print{
position: relative;
}
Now I even see new elements that were behind my fixed element, and no cutting off at the bottom anymore.
If the items on the page are getting partially cut off, adding an :after element of 10px did it for me.
<div class="print-row">
<div class="print-items">
<div class="print-item"></div>
<div class="print-item"></div>
<div class="print-item"></div>
</div>
</div>
.print-items {
page-break-before: auto;
page-break-after: auto;
page-break-inside: avoid;
}
.print-item {
break-inside: avoid;
}
.print-item:after {
position: relative;
display: block;
min-width: 100%;
height: 10px;
width: 100%;
content: "";
}
for me, the issue was this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
which putting any value other than 1 for initial scale solves my problem:
<meta name="viewport" content="width=device-width, initial-scale=0.8"/>