Solved

Vertical FlexBox

Posted on 2014-01-15
18
288 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
  • 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
selectSingleNode in Access 2013 11 58
replace quotes with UTF-8 character 38 95
Specific format 21 196
Problem to page 4 85
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logiā€¦
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
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)

813 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now