Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Vertical FlexBox

Posted on 2014-01-15
18
Medium Priority
?
310 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 2000 total points
ID: 39784190
http://jsfiddle.net/GaryC123/6UrwZ/3/

I've changed your css a bit.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
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…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

609 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