Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Vertical FlexBox

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

I've changed your css a bit.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

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.

Question has a verified solution.

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

There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
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:
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
Suggested Courses

571 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