"Priority Nav" breaks when div is floated - javascript

I'm using the "Priority Navigation" design pattern. For those who aren't quite sure what this is, basically when the viewport width is reduced and there isn't enough space for all the list-items to fix horizontally, they're moved into another nested list so they can still be accessed. This is within a "more" link at the end of the list.
At a basic level, this works fine in my example (below):
http://codepen.io/moy/pen/RrRJBe
The problems I'm having are:
1) Because I have another item alongside the navigation, which is floated (and of unknown width), I needed to set overflow:hidden; on the nav. This means when the width of the container changes, the nav stays alongside the other content rather than dropping onto the next line. It's fixes that ...the problem is it also means the dropdown on the end isn't visible as it's displayed below the navigation and overflow: hidden; is set.
Any alternative (CSS) fixes for this?
2) Another issue is the nav links need to be positioned to the right. No problem, just float the div right, yeah? Unfortunately it doesn't like this and the page almost crashes - must be something to do with the script trying to calculate the widths? As soon as the nav or it's parent is floated, it breaks!
The list-items are floated left so they display horizontally. Instead I tried using display: inline-block and text-align: right;. This positions the text correctly but when there's not enough horizontal space the items either wrap or all collapse into the "more" link rather than one-by-one.
-
Browser requirements: It's worth noting that my browser support is IE8+, so flexbox is unfortunately out the window. Even if it worked, it would mean that I'd have to find a fix for IE8/9.
Is anyone able to help with this, or maybe there's a plug-in I should take a look at. This script works great when the nav is isolated but as soon as another item is in it's path it becomes a bit tricky. On a previous attempt I got the width of the item which was in the way and subtracted it for the available space. But that isn't that flexible/scalable - but that again, maybe there isn't another way?
Thanks, hope someone can help!

Part 1
You can use clearfix instead of overflow: hidden.
Add the following to the parent element containing nav:
.wrap:before, .wrap:after {
content: '';
display: table;
clear: both;
}
But if you need to support IE8, you can just add element like below to the bottom of the parent element containing nav
html
<div class="clear"></div>
.clear {
clear: both;
}

Related

Top navbar items cutting off picture below

I'm using MaterializeCSS to style a website I am creating.
In order for me to get the navbar items to be towards the bottom of the navbar, I applied a top margin to those items (#normal-nav). As an unintended side effect, the picture below the navbar gets clipped for some reason. If I remove the margin that I applied to the li, then all is well. Not sure what I'm doing wrong.
Here is the issue replicated in JSFiddle. In order for you to see the issue I'm having, you'll need to make the window rather large--I have it setup so those items only appear on desktop-sized displays.
Instead of the top-margin try :
#normal-nav {
top: 64px;
position: relative;
}
It's because you've pushed the #normal-nav down beyond its parent. This is exacerbated by the fact that it's a floated element, thus it doesn't increase the size of its container.
See: An article about clearfix
Solutions:
Decreasing the the margin-top you're giving
Use a clearfix if you're intent on keeping the float.
Use another method other than float to push that nav to the right e.g. flexbox (probably the most scalable option).

Bootstrap Collapse over an element

I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.
You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.
Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.

Portfolio Expander width - Jquery CSS

I've been playing around with changing the way my portfolio looks and I've been struggling with getting my expander to push elements down (like google images does).
My test is here: http://chris-carpenter.co.uk/new/
I've used this as a starting point to add a filterable option for my work:
queness.com/post/14577/create-a-simple-responsive-portfolio-page-with-filtering-and-hover-effect
This is what is causing the problems. I've found ways to create the filterable portfolio, and ways to create a static portfolio that has an expanding content section but combining them is blowing my mind. I can't seem to figure it out.
At the moment this opens and pushes elements down, but the width is limited by the parent div, so anything below & to the right doesn't seem to shift.
<div class="portfolio--expand is-expanded">
</div>
I'm now looking at inserting a content div at the end of the row clicked. Much like this.
http://jsfiddle.net/JfcAu/450/
I'm not experienced enough with JS to understand what's happening and apply it to what I have though. Could anyone help me achieve a filterable grid which has a click to expand option?
I don't expect to retain any current styling ofcourse, since I haven't changed it at all from the original source yet, I just want the function working.
This has been hurting my brain for ages.
Useful things I've looked at:
isotope.metafizzy.co/filtering.html
oriongunning.com/blog/thumbnail-grid-expanding-preview/
You might have to do some width adjustment, but this:
#portfoliolist .portfolio {
box-sizing: border-box;
width: 23%;
margin: 1%;
display: none;
float: left; /* <-- this is taking it out of the DOM */
}
has a float:left - that is taking it out of the DOM - you have to remove the float:left - and then adjust width to maybe 22% or something to let the expanded content push everything out of the way.

CSS positioning full width and height of multiple elements

Good evening gentlemen (and of course ladies),
I'm currently experiencing some problems with CSS and the dynamic positioning of some elements in one big container. And I hoped that anyone of you could probably know the solution for my problem.
Maybe I just start with the explanation, which I will split in three parts to make it easier to understand. In the end of this post, there are two links, one for the steps to visualize them and one for the example jsfiddle for step two.
Step one:
There is one div.container which has the height 255px and a dynamic width of 33.3%. This container contains two divs: div.left and div.right. The div.left has exactly 150px width, which should bring the div.right to fill up the whole remaining space.
I already tried to solve it this way, which works, but not for the next steps.
.left {
float: left;
width: 150px;
}
.right {
overflow: hidden;
}
Step two: Now, there should be three different elements in the div.right, a h3, span and p element. The h3 and span should just behave like a regular element, and use the space they want to use (like for displaying text). But the p element should take the whole remaining height of the div.right. I achieved this single step by using the code in the jsfiddle link in the end of this post. And it looks really cool, but it's not compatible with the next step. As you maybe already guessed it.
Step three:
As the p.description element contains a description, I want to put as much information into this small element as possible. Therefor, I hoped to use overflow:hidden in combination with text-overflow:ellipsis, but this didn't work. Due to some strange reason, the p.description element was placed right of the h3 and span elements after I added the overflow:hidden style.
And additionally, there is an extra div in the footer of the div.right, which is div.btns. This div contains about 3 plain links and is placed absolutely in the right bottom of div.right, and I only want to have the p.description element to wrap the text around it.
Right now, I doubt, that all of these steps are solvable by only using css. At least, I wanted to have the positioning of the elements with css and the truncating of the text could be done in Javascript.
Is there anybody out there, who has an idea, how I could solve my problem?
Many thanks in advance!
Attachments:
All three steps in one picture: http://cl.ly/image/2t2a3o3o2l0s/steps.png
JsFiddle for step two: http://jsfiddle.net/S8g4E/1188/
Check this Jsfiddle: http://jsfiddle.net/Mohamed_nabil/7btp2/
In css: the max-height of the ellipsis in lines(52 & 61) are now 200px,
this can be changed with jQuery if you want to, on window resize or load.
max-height: 200px; /*This value could be changed with jquery*/

Link Tag Display Block Not Stretching Full Width

Please correct me if I am wrong, but display: block; turns any element that has that CSS declaration into a block element, correct? That means that the specified element with the display: block; declaration will span it's entire width available, right?
I ask this because I currently have a navigation that houses a drop down menu with nested unordered list items, that are supposed to inherit the width of the width of the parent list item.
link removed
Notice once hovered over Teams, you see the 18U and 17U link list items are not stretching their appropriate width. I can only assume that this same issue is applying to all of the list link items.
BUT: Once you go here: link removed and notice there are more than two links, the issue is no longer a problem. It takes up the full width.
Also, once the page has loaded and you hover over one of the list items for the first time, the navigation menu is kicked to the right a little bit.
The problem is persistent in Google Chrome.
May someone help me out here?
Thank you.
You have your li's width being set with
width: 100%
Which will only work if the elements parent (the ul) has a width set. Set...
width: 100%
... on the ul too, and it works fine.

Categories