Blogs

Blogs

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 ;)

Thanks again Olaf for this post! It inspired me to include this CSS in a themelet, so it removes the pain of adding it manually each time you create a theme. https://www.npmjs.com/package/liferay-dropzone-themelet

Thank you Louis-Guillaume. I was hoping that someone would pick it up. Until then I entertain myself by reposting this article for every applicable new release. It should really be in the core, see LPS-33636, but having a themelet available is a good alternative solution to fix the immediate need.