Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Mikkel Johansen 116 posts 292 karma points
    Sep 08, 2021 @ 07:51
    Mikkel Johansen
    0

    Block List - RichTextEditor - can't drag'n'drop

    I have a RTE block in my Block List. But when I render the text on the content edit page. I am not able to move the RTE block, other block types works fine. On mouse-over on the RTE block the mouse cursor does not change to "hand".

    Guess it is my property-view that is missing something.

    <div ng-controller="textController" ng-click="block.edit()">
   <div ng-bind-html="bodytext"></div>
</div>

    Any one have a hint of what class/div/style I am missing?

    Copy Link
  • Mikkel Johansen 116 posts 292 karma points
    Sep 08, 2021 @ 08:33
    Mikkel Johansen
    101

    Ha

    Found a solution myself.

    I had not assigned a css to the block element.

    enter image description here

    Copy Link
  • Heather Floyd 610 posts 1032 karma points MVP 6x c-trib
    Nov 14, 2023 @ 17:29
    Heather Floyd
    0

    Thanks for adding your solution. I had this issue in my v10 site recently, and assigning even an empty CSS file fixed the drag-n-drop issue, but it also destroyed the styling inside my ContentBlock. Even though I had a lightly customized Custom view file, I am generally relying on the standard back-office styles.

    It seems that if you select a CSS file, then it wraps your custom html in a shadow root and only imports your custom CSS file. Shadow DOM HTML

    Checking the official docs, I do see this explained:

    Custom stylesheet - Pick your own stylesheet to be used for this block in the Content editor. By adding a stylesheet the styling of this block will become scoped. Meaning that backoffice styles are no longer present for the view of this block.

    Except that it pulls in the "draggable" rules from the primary UI css: Style references

    I'm not sure why the "draggable" rules only apply inside the shadow-root... shouldn't they apply even if there is no custom CSS (and thus no shadow-root)?

    I'd really like to figure out how to get this working. I feel like when I originally set up these blocks it wasn't a problem.

    Copy Link
  • Heather Floyd 610 posts 1032 karma points MVP 6x c-trib
    Jun 06, 2024 @ 16:30
    Heather Floyd
    0

    FYI for anyone coming across this thread. I was able to get draggable working with no specified CSS file by wrapping my custom view html with a 'blockelement__draggable-element' button:

    <button type="button" class="btn-reset umb-outline blockelement__draggable-element ui-sortable-handle" ng-click="vm.openBlock(block)" ng-focus="block.focus">
<!-- my custom HTML/Angular -->
</button>
    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft