Rearrange Widgets in Widget Zone

Mike Bilz asked on February 4, 2017 01:57

Hello Kentico Team,

I am having a hard time moving widgets placed in a widget area. It doesn't seem possible to rearrange them by dragging them up or down. Many of my widgets are very tall, which may be complicating things further. I have also added some styles to the Page tab that might be interfering in some way.

Is it possible to add the "Move Up"/"Move Down" buttons that appear on web parts to the widgets? "Move to Top" and "Move to Bottom" would be great too.

Alternatively, could I just add a few more styles to the Page tab so that the widgets are a fixed size and easier to move?

Any advice would be greatly appreciated. Thanks.

-mike

widget move zone

Recent Answers

Ilesh Mistry answered on February 4, 2017 12:23 (last edited on February 4, 2017 12:50)

Hi Mike

Although this is a work around solution, one way to help with this is for your custom widgets and add some CSS in your stylesheet. In Kentico on the page tab, there is a class called 'EditMode' on the body. What you can do is target the inner elements with the .EditMode above it in CSS. So e.g. .EditMode .myCustomWidgetClass {height: 100px; } or something like this for your specific purpose. What this means is that this style should only be applied on the Page Tab.

There is a similar class for the Design tab called .DesignMode, if you ever need to use it.

Thanks Ilesh

0 votesVote for this answer Mark as a Correct answer

Mike Bilz answered on February 6, 2017 18:22

Hi Ilesh,

I actually already have some styling in place on the Page tab to correct for things like Position and Float on the live site.

I'm actually a little worried that some of my styling is breaking the Drag and Drop ordering mechanic of the Widgets.

Could someone explain how the dragging system works? That may help me adjust my styling somewhat.

Ideally though, I would love to add "Move Up" and "Move Down" buttons to widgets if that is possible?

Thanks.

-mike

0 votesVote for this answer Mark as a Correct answer

Chris McCluskey answered on June 16, 2017 13:59

I recently encountered this problem too, but the CSS workaround didn't work for me because the CSS used by the site was possibly to complex.

What I ended up doing was to add bad code into the code-behind files for the web parts that the widgets on the page were derived from, and afterwards when the page rendered in the 'Page' tab, there was an error message displayed instead of the content of each widget, e.g. [Error loading the WebPart 'XXX' of type 'XXX']. I could drag them around easily after that. Not the best of solutions, but it at least worked.

0 votesVote for this answer Mark as a Correct answer