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.
Related
I have tried so many CSS rules to try to get my list to float to the right inside a Bootstrap 4 row used in a custom Wordpress theme. I've tried using align-right on the row (both in my own CSS or using Bootstrap 4 classes) and using float:right on the list itself (both in my own CSS or using Bootstrap 4 classes). Its likely I did it wrong, as i may have lost track of combinations in my brain while testing :O
Here is a fiddle of my structure: https://jsfiddle.net/Katrina_B/o3u0cd9s/
Please be sure to view in a wide browser space.
Objective: I would like the for the navigation list (#navMenu) to align to the right inside the #fruits row (which incidentally should be purple!)
The only way I can achieve this is by changing the html so that #fruits is not a Bootstrap row, and instead set it to 100% width and float the list to the right, but that messes up the whole layout. And I managed to find a few other workarounds, but they caused problems with my script that keeps the #jumbo div at full viewport height (minus the #headerContainer height, which is dynamic).
There may be some other caveats that I have forgotten, where a managed it, but it negatively afected something else. But I think I've covered the basics and am currently at a loss.
Another factor that may be an issue, although since I replicated this problem here using plain html, is that ultimately the #menuNav will be generated via a Wordpress function as follows:
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
) );
?>
But i don't think this affects my current problem.
Thank you in advance for anyone who might be able to help!
Try the following. width:100% makes the list go the length of the page, and text-align right will right align the list. I tested in Firefox and Chrome, and IE11.
#navMenu {
background-color:#f7d765;
padding:0 0 0 10px;
margin:0;
width:100%;
text-align:right;
}
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;
}
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*/
I am working on a project that involves a lot of CSS. The customer wants to have a grid layout on the home page where he wants to be able to rearrange UI components with drag and drop. These UI components could be of different sizes: 1x1, 2x2 and 3x3. When I drop an UI item at the desired new location it should push the other components aside. Any possible holes should be filled with 1x1 components.
How it should work
Before I have draged a component
Draging the 2x2 component
Dropping the component in the middle, the two 1x1 components make room and adapt around the 2x2
Note that the size of the grid is not limited to 8 1x1, but the height as well as the width of it should be possible to expand and make smaller.
I’ll rather not use tables but other than that I am open to suggestions. Right now I've just used inline-block divs which I can drag and drop to switch the jQuery DOM objects. The effect isn't quite what the customer wants:
How it is now
I've made a lot dynamic layouts with the same idea. You need to think more in how your float behavior from block to block is stopping for the next following blocks, so they become correct repositioned like you want. So to define a float-stop element is necessary.
Your blocks will work with float:left maybe float:right. At some point you will figure out that this behavior has to stop somewhere best done with
CSS
.floatstop {
clear: both; //the important code here..
width: 100%;
height: 1px;
line-height: 1px;
margin-top:-1px;
}
and Html
<div class="floatstop"></div>
Made of all blocks who need border to the next block on the left side (maybe right side too) you have to define a base layout which has space for the very right placed block too with borderspace for it, otherwise it would float down under the block before.
But there is a more modern way!
You can use CSS3 codes to define your layout.
.columnblock {
width: 100%;
column-gap: 30px;
// for symmetric columned layouts use..
column-count: 3;
// or for not symmetric layouts use..
column-width: 280px;
}
<div class="columnblock">
<p>Lorem Ipsum</p>
<p>another Paragraph</p>
</div>
There other things to mention here but you can read about
http://www.w3schools.com/css3/css3_multiple_columns.asp
I'm trying to get a 100% width table to "slide over" to reveal a "panel" behind it.
Here is a jsFiddle with an example of where I'm at and the "bumping" that happens: http://jsfiddle.net/z93se/2/ (using jQuery UI)
Click on a table row to see the transition happen. During the animation, the table "pops under" the new expanded panel. Then after the animate it goes back to the left where it belongs.
How do I get them to both slide at the same time and keep their positions?
PS - I'm okay with the moving which elements have the padding and floating as long as the end result works.
Update:
Two other requirements that I have: 1) The table needs to be 100% width before the animation. 2) The panel on the side that is "sliding out" needs to be fixed width.
Update 2:
New jsFiddle that shows the width of the table using a border (so it's easier to play with). http://jsfiddle.net/z93se/14/
Which brings up a second problem. You have to click the row twice for it to begin acting like I expect it to. It's default state is with the table expanded and the panel hidden. After clicking a row twice, it starts working closer to how I expect (except it still has the problems in the original question). Help on this would also be appreciated.
Finally got it working. Had to use the animate() function and pass in a callback to hide the div when it is done.
See this jsFiddle: http://jsfiddle.net/744BL/
Notes: Using IDs as selectors caused some problems that switching over to classes didn't.
This css would do
html, add container with id task-details-container to task-details
CSS
#task-list table {
width: 75%;
}
.details-active {
padding-right: 0px;
}
#task-details-container {
width: 25%;
float: right;
}
#task-details {
width: 100%;
padding: 0;
display:none;
}
I hope this is what you wanted, please see the css i have changed
**Updated