Dragging and Dropping portlets

Chapter 4

If you are working with Liferay for a while now, you might still remember a feature that went missing with version 6.1 - but there was a way to get it back. Also in 6.2 and 7.0.

Now that Liferay Portal 7.1 and Liferay DXP 7.1 are out, you might wonder if the feature is finally implemented, or how quickly it can be implemented, or what that feature actually is (or was):

Let's start with an explanation: When you drag and drop portlets (or now: widgets) in Liferay, you'll see where to drop them because of the blue bar indicating where it can be dropped. However, you can't see all the options that you have - all the columns where you can drop them. You'll need to know where they are, in order to hover in that region.

Here's a quick visualization of what you want to see (but you don't see it out-of-the-box):

(Note that I changed the Layout of the page from the default 1-column to a 1-2-1-column layout to have some options for dropping the Hello World Portlet)

Now for the options that you have to fix it: Lucky me: The old and ugly CSS still works, and you can just copy/paste it to your page's Look&Feel CSS code - or just embed it in your own theme.

Which old and ugly CSS code?

Well, it's good you ask:

.portlet-dropzone {
    transition: padding 0.5s linear;
}

.yui3-dd-drop-active-valid  .portlet-dropzone {
    outline: 1px dotted black;
    padding: 10px;
    margin: 3px;
    min-height: 100px;
}

If you come up with a simpler CSS selector, or even with beautiful visuals, please contribute to LPS-33636. Or just vote for it. I still hope that I don't need to repeat this post for the next version, but I promise that I will, if it's necessary. Even if doing so feels like trolling... because it already does ;)

Write a blog post too!

Write a deep dive into how you use Liferay projects in your technology stack. Or let people know useful tips and tricks for a particular functionality. The Liferay community needs you!

Login or Create an account