Solved

Vertical FlexBox

Posted on 2014-01-15
18
292 Views
Last Modified: 2014-01-16
What changes i need to use a vertical flexbox and expand vertically with no gaps between the boxes. When the mouse hovers over, the flexbox expands and the overflow text is

revealed. Thanks
MulticolumnLayout.html
0
Comment
Question by:mustish1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 8
18 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39784119
Flexbox can mean many different things
Is this what you are after
http://jsfiddle.net/GaryC123/6UrwZ/1/

Hover over the middle section
0
 

Author Comment

by:mustish1
ID: 39784160
Thanks it works. Can this be done in css or i have to use the javascript for mouse over?
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39784190
http://jsfiddle.net/GaryC123/6UrwZ/3/

I've changed your css a bit.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Closing Comment

by:mustish1
ID: 39784225
Thanks.
0
 

Author Comment

by:mustish1
ID: 39784244
is there any way only the column the mouse moves over on it will expand not the rest of them. As right now all of them expand when i move my mouse to any of the column? Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 39784246
Shouldn't be, what browser are you using?
0
 

Author Comment

by:mustish1
ID: 39784252
firefox. May be that is the problem.
0
 

Author Comment

by:mustish1
ID: 39784255
Lets try IE
0
 

Author Comment

by:mustish1
ID: 39784259
Yes it works perfect in IE. Browser problem. Thanks.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39784263
Works fine in FF26 for me. (FF is what I use for testing)
0
 

Author Comment

by:mustish1
ID: 39784285
When I move my mouse over the middle column. The left footer expands too and goes down. Only the footer not the text

<div>

</div>
    <footer>
       <em>&copy; 2014 fdsaflsadfl;jsdlfldsklfdsj </em>
    </footer>
   </body>
</html>
image1.png
0
 
LVL 58

Expert Comment

by:Gary
ID: 39784293
Cannot replicate, can you attach your code.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39784312
Let's tidy up your code a bit

http://jsfiddle.net/GaryC123/6UrwZ/7/
0
 

Author Comment

by:mustish1
ID: 39784379
0
 
LVL 58

Expert Comment

by:Gary
ID: 39785422
So whats wrong with it, apart from you need to change the min-height, that should max-height , don't know how it got lost in the code

http://jsfiddle.net/6UrwZ/8/
0
 

Author Comment

by:mustish1
ID: 39785469
When I move the mouse over 2nd or 3rd column. First column also expand but it shows only the footer from the first column.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39785534
http://jsfiddle.net/6UrwZ/14/

I don't understand what you mean, it will only expand the div being hovered. Obviously the footer is going to be pushed down

Example which flows over other content
http://jsfiddle.net/GaryC123/6UrwZ/12/
0
 

Author Comment

by:mustish1
ID: 39785563
ok thanks. it works.
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question