Exploring Liferay 7: Dragging and dropping portlets
Company Blogs April 18, 2016 By Olaf Kock Staff
Yay - Liferay 7 CE is out.
As the exploration begins, I'm sure everybody first looks for their pet peeves. There's something that's been nagging me in 6.1 and 6.2 - and unfortunately I couldn't get my fixed theme regression merged into master - partly because of my missing CSS design skills, partly because I started lobbying too late, when only critical fixes were accepted. And partly because there was an impending update to the DOM which would have rendered the fix invalid almost immediately after committing it.
Turns out that my 6.2 patch is not invalidated by whatever has been introduced in Liferay 7, and it's trivial for you to fix the issue - and easy to bring into your own themes (everybody has their own theme anyways - right?). Here's the problem again:
When you drag and drop portlets on the page, Liferay does not provide an indicator, where you can drop it. While that's easy and intuitive for your stereotype 2-columns layout, it gets more tricky with the more complex layouts that provide multiple rows. Like in this example (showing the fixed version where you can see the dropzones once you start dragging):
As you can see, the visual appearance could use some improvement, but the technical requirement has been met. That's the caveat of having me work on theme issues: I'm able to make things look different - if you want them to look nice, you better ask someone else ;). Well, the arena is open and your suggestions for improvement are accepted and welcome.
The good news: The CSS that worked for 6.2 still works for 7.0 - no need to re-learn anything about the DOM for Liferay 7 - just add this CSS to the page (e.g. through the "Public Pages / Configuration / Look and Feel / CSS", alternatively private or individual pages) or to your own theme, and you're set: