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.
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.
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.
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):
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.
