I have a bit of a problem with a navbar not displaying correctly in IE6. http://classicpartsltd.com/ - this is the page, and if you hover over a nav item such as 'Goggles' in IE6 you will see that some of the list items are showing up, but that they will in IE7 and IE8... Does anyone know why this would be the case?
Many thanks,
Theo.
No worries, it was a combination of too great a width and float being applied where undesired.
Related
My page is: https://www.svelysium.net/ And one can see the menu as a list flash first then display correctly. I'm testing visibility:none in the CSS for the div and then wanting to do an onload later for the visibility after the page loads so I don't get that menu flash. I've not put it up live because I can't seem to get it right. Sorry I can't find any examples of this issue and how to solve it and I have been trying to keep it simple. There must be an easy fix. Thanks in advance.
Here is the screenshot
I have a 500x400 iframe that hosts my page with a few Foundation dropdown controls, I found in this size no matter how I specify "align:xxx" value in the code, Foundation always renders the dropdown layer as align:bottom which is undesirable. I need "align:xxx" to work no matter what the containing page size is. How do I do that? Hacks or workarounds can do too.
I tried to increase my iframe to 1000x400 and the dropdown renders normally.
If there's an option that I could force align of a dropdown other than align:xxx please point out.
It's because it's in an iframe that is smaller than the medium media query. The default behavior for the small breakpoint is to be 100% width. You may need JS to override this for your use case.
This appears to be a SharePoint 2013 bug.
One of the exciting features of SharePoint 2013 is the Callout. When you have a list of documents, and you want to learn more about the document without having to open it, you can click the three dots Callout button to get a popup that shows pertinent information about the document.
The problem is this information is being cut off when you apply a fixed height to the webparts properties and the height is not enough to accommodate the popup.
It appears to be due to the webpart being converted to an iFrame when a specific height is applied to it. I have been unable to find a CSS fix for this.
You can view an image of the issue here: http://www.pixelwonders.com/fixed-height-webpart.jpg
Anyone know how to fix this?
Thank you in advance for your help!
I had a very similar issue. I have a Google Map web part with fixed height and width in a two column layout, with a list on the right. The filter drop down menu would cut off just like what your image shows.
I was able to correct it by adding a script editor to modify the CSS with overflow: visible !important on both columns. In your image it looks like you have one web part above another, I would think the same rules would apply.
<style>
#WebPartWPQ3{
overflow: visible !important;
}
#WebPartWPQ2{
overflow: visible !important;
}
</style>
Morning,
I wanted to find out if its possible to make a change to the current foundation 5 navbar without breaking it for mobile and desktop views.
basically the current one sits the left text/image to the far left and the nav menu to the far right, which is great when the design is across the entire page, but if the content is centralized in the middle sort of like the normal 960 web layouts, it looks a bit weird at times.
is it possible to have the left image/text and nav menu links centralized in the center like it would be seen if it was in a 960px wrapper.
this all ofc without stopping the responsiveness of it.
Thanks
It sounds like what your are trying to accomplish is to center a top-bar navigation within a row.
If that's the case then you can use <div class="contain-to-grid"> to keep your top-bar within your grid layout and something like <div class="small-9 small-centered columns"> to center the row that the top-bar is in. I created a codepen example for you to look at here: http://cdpn.io/jJhyn.
The classes mentioned above are all part of Foundation so you will not be affecting the responsiveness of your design.
For a complete list of the options available to customize the top-bar see the Zurb Foundation Top Bar documentation.
If I have misunderstood your question let me know, and code is always appreciated.
I hope that helps.
EDIT: 02/13/2014
I was looking into another issue when I stumbled upon this, How to center top-bar nav?. It center's the buttons/links within the top-bar, not the top bar itself. They page they used as an example is Mister Dutch. I updated the codepen above to reflect what I found on the Foundation Forum.
Again, if I have misunderstood your question let me know.
I just upgraded from version 4.1 from a month or so back and suddenly my section (horozintal-nav) is being hidden on screen sizes above 768px. Prior to the upgrade it would display as a horizontal nav above 768px and as an accordion on smaller screens.
I am using compass and sass.
I have also tried cutting and pasting their example code from their documentation into the top of my page and I get the same behaviour with that as well.
The CSS that hides the control...
/* line 49, ../../../../../lib/gems/1.9.1/gems/zurb-foundation-4.3.1/scss/foundation/components/_section.scss */
[data-section='horizontal-nav']:not([data-section-resized]):not([data-section-small-style]), .section-container.horizontal-nav:not([data-section-resized]):not([data-section-small-style]) {
visibility: hidden;
}
Is anyone else having this problem?
Seems I just needed to add data-section-resized attribute to my container.
<div data-section="horizontal-nav" data-section-resized>...</div>
So simple fix, but that isn't in the zurb documentation - does anyone one know what that attribute is for?
I ran into this problem as well. The above answer didn't quite work for me because all my tabs were squashed to the top right, overlapping each other.
This thread helped me sort it out:
https://github.com/zurb/foundation/issues/3555
This isn't broken. Sizing can't be calculated correctly when elements aren't visible. If you're going to hide them and then show, you'll need to call reflow or fire the resize event to get things to calculate the correct sizes.
At least for my case, my items were being loaded AFTER Foundation was able to calculate the widths, so it always went to 0.
Hope this helps!