Forum Academy Marketplace Showcase Pricing Features

Editing HTML block is clumsy and difficult

Attempts to edit HTML blocks with several lines of code is nearly impossible without losing patience and giving up. You can not scroll up and down the HTML code viewer with the scrollwheel, scroll bar on the right, or by selecting the code and panning up; see this gif:

The only method I’ve found that allows me to edit HTML code more than 30 lines or so is to click inside, and arrow-key my way back to the top:

I wish there was a proper viewer for large blocks of content, especially HTML with dynamic Bubble content. I imagine clicking a button near the default content viewer that pops open a large/resizable and responsive modal window that is designed to handle large amounts of text. I’ve ran into this issue with normal text content but HTML editing seems very buggy in comparison. I have the same results in Chrome and Firefox.

5 Likes

I’d raise a bug, to keep the awareness of the problem.

I’ve raised one a while ago … the behaviour gets worse if there is any dynamic data inside. And its also bad for text elements, etc.

1 Like

I wish I could like this more than once. This issue has probably set me back about a week of work overall. :grimacing:

We’re aware of that one, it’s unfortunately not a quick fix, and to be honest only impacts users with very long html.

The plugin system will make things easier there, as there will be a real code editor for stuff like this.

2 Likes

Cool. Real code editor will be perfect.

Thanks for the reply!

I am thinking there does not need to be any huge workaround or changes to Bubble here. I am excited to see what the plugin system looks like. My idea of a modal, understandably, would take time to implement. After some thinking on this problem, a solution (consider it a feature that would be useful for hundreds of scenarios) for the interim would be allowing us the ability to change the width of the content viewer. Maybe there are predefined toggleable widths of the default 300px, 600px, 900px and 1200px. In 1 minute I was able to hack the CSS in dev tools to widen the content editor:

I typically edit in Bubble on a 2.5k or 4k monitor. This leaves a LOT of empty space on my screen — trying to do everything in a 300px wide settings menu (especially text edits) can be unnecessarily time consuming. The ability to change the width of the content viewer could be a huge bonus for efficiency and ease-of-use.

4 Likes

On which elements did you change the width style?

Your hacking prompted me to see if I can fix the issue, and this works temporarily, resetting the scrolling until it gets bodged up again:

Change the element with class “rows overview” position to ‘fixed’, pause, and then to ‘absolute’.

I put it into a tampermonkey script for chrome, here: https://justpaste.it/12f90

Then right clicking on the left border of the editor gives the option to run the script …

A bit of mucking about, but could be a timesaver until the time it works.

2 Likes

Hi Philip, would you mind sharing what tool did you use to create the two GIFs? Thanks.

1 Like

I’ve been using https://gyazo.com for this functionality for about a year and haven’t looked back! There’s a pro version with awesome features, and the free download will cover 90% of use cases.

2 Likes

Hey guys. Just started working with Bubble so I haven’t really used the HTML block yet, but I do love messing with some CSS so I figured this suggestion might help a few people…

This Chrome Extension lets you overwrite CSS on websites. Basically you just give it the classes and styles and it loads them at the end of the other stylesheets. With a little copying and pasting from Chrome’s dev tools I was able to achieve this:

Obviously the bottom section got a little messed up, and it makes the other element panels wide as well, but it’s still usable. Plus you can just toggle the style overrides off when you don’t need it.

Also worth noting, someone mentioned there was a bug that didn’t allow you to scroll to the top of the HTML edit area. Somehow using these CSS overrides let’s me scroll through all the HTML, but only if I first scroll all the way to the bottom. Looks like something strange going on with the height and positioning of the HTML edit box.

Anyways, if you are using Chrome and want to try it out, just download the Stylish extension and create a new style with the following settings (or edit the pixel widths to your liking):

Hopefully this helps someone… :slight_smile:

5 Likes

Thanks!

another annoying problem with html code blocks is when you add in a dynamic link, the cut and paste only takes content up to the dynamic link. I was editing and saving code snippet in Webmatrix and found this annoying bug.

If you right click you’ll see some options to copy the whole text, including dynamic expressions.

This topic was automatically closed after 14 days. New replies are no longer allowed.