We help IT Professionals succeed at work.

Same height on portlets

Peter Nordberg
on
86 Views
1 Endorsement
Last Modified: 2019-01-03
Hi,

I'm trying to design portlets that can have the same height if they are beside each other but have different content length. I've done a try in the below code pen where I succeded in getting them in the same height, but it messes up the body and footer elements in the portlet.

If someone has an idea in how to fix this I would be grateful.

Here's the link to the codepen:
Portlet code

Thanks for help!
Peter
Comment
Watch Question

Analyst Developer
CERTIFIED EXPERT
Distinguished Expert 2018
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Peter NordbergIT Manager

Author

Commented:
Ok, thanks, but why does the body get scrollable instead of just showing all content?
Zakaria AcharkiAnalyst Developer
CERTIFIED EXPERT
Distinguished Expert 2018

Commented:
You're welcome, Since there's much content, if you want to show all the content then you must increase the height of the body part what means increasing the height of the portlets too, else you will end up with something like :

https://codepen.io/acharki-zakaria/pen/wRpgoO
Peter NordbergIT Manager

Author

Commented:
I have a min-height on the portlet, should I change that to somerthing else?
Zakaria AcharkiAnalyst Developer
CERTIFIED EXPERT
Distinguished Expert 2018

Commented:
Yes, that possible if you increase the min-height to :

min-height: 620px;

Open in new window


That will show you the full body text.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.