Full screen not working on Layout builder sidebar.

Created on 10 January 2024, 11 months ago
Updated 24 April 2024, 7 months ago

Problem/Motivation

When trying to use full screen on a layout build page results on the above.

Basically the sidebar does funny things the css so it will work in the sidebar. Basically if stuffs up the CSS presidents and CSS is overriden.

πŸ› Bug report
Status

Needs review

Version

1.0

Component

Code

Created by

πŸ‡¦πŸ‡ΊAustralia gordon Melbourne

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @gordon
  • πŸ‡¨πŸ‡¦Canada occupant Canada

    Thanks @gordon,

    I've made an initial stab at making this work in the layout builder sidebar - can you try the latest dev β†’ version to see if this behaviour is corrected?

    This could be tricky depending on the admin theme you're using, but I've tested with Clara and Gin, and both seem to be ok.

  • πŸ‡¦πŸ‡ΊAustralia gordon Melbourne

    Thanks for this, it has fixed the main part of the problem but there seems to be a problem with the displacement of the toolbar.

    On the normal node edit I get the following.

    and on a layout builder screen I get this.

    Basically on both pages when you click on the edit area the toolbar will move down as shown.

    Also on the layout builder screen the admin toolbar was over the editor toolbar until I started editing and it moved down.

  • πŸ‡¨πŸ‡¦Canada occupant Canada

    Hmm, ok. Are you using Drupal 9 by any chance? In v10+ (not sure about Dupal 9) the Drupal.displace library is reserving space at the top of the page for the toolbars, etc. I've only tested in D10.2 so far and have been able to take care of it locally. If you have a different setup, I'd like to try that and make sure that I'm on the right track at least.

  • πŸ‡¦πŸ‡ΊAustralia gordon Melbourne

    We are running Drupal 10.1.

  • πŸ‡¦πŸ‡ΊAustralia gordon Melbourne

    I have tested this change on D10.2 and the problem was resolved for the node edit page. However the toolbar is still moving down on Layout builder page.

    I am going to hunt through and see if there were any fixes between 10.1 and 10.2 for the displace library.

  • πŸ‡ΊπŸ‡ΈUnited States bkosborne New Jersey, USA

    Hm yeah, I confirmed this is a problem, even on 1.0.0-dev with Drupal 10.2.3. The toolbar is initially hidden (perhaps behind the the sticky admin toolbar), and then when I click the content area, the toolbar appears but far down on the page.

  • πŸ‡¨πŸ‡¦Canada occupant Canada

    Sorry for the delay. I've updated the module with a fix for this locally, using layout builder, both Claro and Gin themes. Can you try with the latest dev version β†’ ?

  • Assigned to occupant
  • Status changed to Needs review 8 months ago
  • πŸ‡¨πŸ‡¦Canada occupant Canada
  • Status changed to Needs work 8 months ago
  • πŸ‡ΊπŸ‡ΈUnited States bkosborne New Jersey, USA

    Thanks! Just tested with latest 1.0.x-dev. It's certainly an improvement, but looks like there's still a few issues:

    1. The inline bubble dialog for entering a link doesn't appear.
    2. The the drop-down menu from the toolbar appear incorrectly. Only the bottom of the list is visible instead of the whole list. For example, click the drop-button for the alignment buttons, or the table button, or the formatting button (paragraph, heading, etc).
    3. The inline bubble dialog for controlling table settings doesn't appear in the correct spot. It's shifted way to the right.
  • Status changed to Needs review 8 months ago
  • πŸ‡¨πŸ‡¦Canada occupant Canada

    Thanks @bkosborne, I messed up the branches and the dev version wasn't updated correctly - the dev branch was still pointing to an old commit. Whoops.

    I have tested and am fairly sure that the issues you reported are fixed in 10.0+, but if you could confirm that would be fantastic. The link β†’ is loading the composer command to the latest commit correctly now.

  • πŸ‡ΊπŸ‡ΈUnited States bkosborne New Jersey, USA

    Are you sure? Because the the page you linked to shows that the 1.0.x-dev was last updated in August.

    I just tested in simplytest.me with the latest version of core and it's still showing the issues when used in layout builder.

    To test, you can create a fresh install of Drupal, enabled the module, and configure one of the existing text formats to use the button.

    Then, enable Layout Builder module, configure the display for the Basic Page content type and enable layout builder + overrides for it.

    Then add a basic page node, go to layout, then add a block. Click "Create custom block" to add a text block. You can try the full screen button from there and see the issues.

  • πŸ‡¨πŸ‡¦Canada occupant Canada

    @bkosborne Thanks, yes, I'm pretty sure. The dev download page shows the last commit was March 22 (created in Aug).

    To be extra sure (since the branch mess was real) I just went into simplytest.me and loaded up the dev version of the module and tested with layout builder (as above). I've attached a few screenshots.

  • πŸ‡ΊπŸ‡ΈUnited States bkosborne New Jersey, USA

    I'm not sure what I'm doing differently =/

    I just spun up a fresh simplytest.me with the dev branch of the module and followed these steps:

    1. Enabled Layout Builder module.
    2. Configured the Basic Page display to use it for overrides.
    3. Configured the Full HTML text format to use full screen plugin/button.
    4. Created a Basic Page node.
    5. Edited layout for the node.
    6. Add a custom block to the page, Switched the text format to Full HTML, Clicked the Full Screen button.
    7. Observed that clicking the table button obscures the table selection grid. Also the drop down for the format is obscured. And clicking the link button doesn't appear to do anything (the balloon is hidden, perhaps off screen)

    I'm using Firefox on a Mac.

  • πŸ‡¨πŸ‡¦Canada occupant Canada

    Thank you for looking at this again, I really do appreciate it. I have indeed found another issue. The contextual balloon position isn't always getting recalculated properly (or at all). I'll give this another shot and hopefully get it worked out now that I can see another thing I need to be mindful of. Thanks again!

  • I'm seeing similar issues. I found that changing
    html:has([data-fullscreen="fullscreenoverlay"])
    to
    body[data-fullscreen="fullscreenoverlay"]
    in fullscreen.css fixed most of the issues for me, except the link balloon still isn't visible.

Production build 0.71.5 2024