Injecting a scrollbar into the toolbox

[Ahana Ghosh]

Hi, 

Is there a way to enable a "scrollbar" only for the toolbox, and not the workspace, in the current build of blockly? Currently, the options only allow for enabling/disabling scrollbars for the workspace. 

Thanks,

Ahana

[Beka Westberg]

Hello Ahana!

I believe scrollbars should be enabled in the flyout regardless of the workspace settings (as long as the flyout actually has enough blocks that it needs to be scrolled). Is this the behavior you're seeing, or are you getting something different?

Hopefully with a bit more info we can get this figured out!
--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/41106840-4a10-499e-8f2a-4b810ee6fc68n%40googlegroups.com.

[Ahana Ghosh]

Hi Beka!

The scrollbars are enabled in the "Workspace" via the options I passed into the BlocklyInterface.injectBlockly() function. However, I want a separate scrollbar for the "Toolbox" which is always visible. Is there a way to achieve this?

BlocklyInterface.injectBlockly({
  maxBlocks: Maze.MAX_BLOCKS_INTERFACE,
  rtl: rtl,
  trashcan: false,
  zoom: {
    controls: false,
    wheel: false,
    startScale: scale,
  },
  move: {
    scrollbars: {
      "horizontal": false,
      "vertical": true,
    },
  },
});

Currently, my toolbox looks like this: (The scrollbar div exists -- checked via the dev tools -- but somehow doesn't show up when I alter the screen size)

I want it to look like (with the scrollbar for the toolbox always visible):

Thanks,

Ahana

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAHpwHMa-7zV-vau2SCh-0mPmpcgRBwnKLacEo32g78uD4FLFXQ%40mail.gmail.com.

[Beka Westberg]

Hello again Ahana =)

If you really want to you should be able to register a vertical flyout:

```

Blockly.registry.register(Blockly.registry.FLYOUTS_VERTICAL_TOOLBOX, registry.DEFAULT, MyVerticalFlyoutClass);

```

This will allow you to create a subclass which has a scrollbar that is always visible.

But I'm a bit confused about what you want the scrollbar to look like if the flyout doesn't have enough blocks to be scrollable.

I hope that helps! If you have any further questions please reply :D

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CA%2Bjtor1yPYUvV%2BEob7iq8kE%3DjfRomtor_Xu2%3DnnSVxyenowv8w%40mail.gmail.com.

[Ahana Ghosh]

Hi Beka!

Thanks for the prompt response! I see your point about the display of the scrollbar when the flyout does not have enough blocks to be scrollable. However, even in the case that it does (I reduced the screen size and checked), somehow my scrollbar doesn't show up 😅

Thanks and Regards,

Ahana

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAHpwHMYL%2BHw4K5gnfez%3DdXixaLWGJdrr3KtZYHsZuZ00Nv4FsQ%40mail.gmail.com.

[Beka Westberg]

Huh! That is weird. It definitely appears to be showing up for me when I resize the window :/ Are you getting any messages in the console?

Best wishes,

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CA%2Bjtor1dCA21bpEu8m69bSe0voUdiTh4s2BZizjWKU0coad1GA%40mail.gmail.com.

[Ahana Ghosh]

No error messages on the console either. I use some tailwind.css in my code base for modifying some elements of remaining screen, but northing on the blockly-div. Which specific event listener detects the scrolling action by the mouse on the toolbox? Because, I see the scrollbar element (upon inspecting the screen elements) on the screen, but somehow no scrolling is possible. Maybe I am missing the link with the right event listener?

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAHpwHMYD5Sh6mpqgMZ9N%3DHE5m3ME4XR6gGqFQzSb_%3DcGmi6iiQ%40mail.gmail.com.

[Ahana Ghosh]

Hi Beka,

Attached is a screen recording for your reference.

Thanks a lot!

Ahana

[Neil Fraser]

Is there a place where we can see this online?  Being able to poke at it briefly would be very helpful.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CA%2Bjtor0c7V6YUMjsUDPbZ7rOe7zXr%2BcLpJD8%2BuNSuEkEwSN3Gw%40mail.gmail.com.

--

Neil Fraser, Switzerland
https://neil.fraser.name

[Ahana Ghosh]

Hi Neil!

We haven’t made the app public yet. But I could share the link with you privately. Could share any means through which I may do that?

Thanks!

Ahana 

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAEx9HWHeZ547sfX330nGM56rP0qzSAaupFFeqQm5ifJkicYOdQ%40mail.gmail.com.

[Neil Fraser]

Sure, just email myself or Beka off this group.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CA%2Bjtor28UBLQc5EvhUdruVnJ_oGThdzdg7uD7-VRFssf_M0E%3Dw%40mail.gmail.com.

[Avery Word]

what are you takling about?

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAEx9HWHYjZM5%3D4Cg9szbfE4KktQBDgmOv_gg_45Hzdg7TUPWpg%40mail.gmail.com.