Editing of .collapse class items / editable text in HTML editor

I'm using .collapse and .collapse.in quite a lot with some JS to show / hide things.

The problem is, that I have to change .collapse to .collapse.in so that I can edit a paragraph for example. I can access the content via the overview pane and the editor, but I can't directly edit the HTML.

As a user I want to edit my own written text in the HTML editor with a double click and have BSS protect me from trashing the HTML. I want to have a mode (1 click), where I can show all parts in my project that have .collapse class applied.

1 Like

I don't think the editor will be changing Robert

What components are you using and is there no contextual "show" option to see your text box?

I don't understand your question. I'm not using a component but my own stuff and some hover effects to show/hide things. Hence, some are loaded with hidden state.

I don't know what text box you refer to.

I thought you may have been using one of the BSS default accordions and when using that here is a contextual 'show' option that will expand to show your text box.

But if you use custom custom code then you deffo wont have that option, and I highly doubt the devs will develop for users who don't use the tools they built out of the box.

Ok, maybe my idea was badly explained. So, I try again. Forget about all the .collapes etc. stuff.

I just want to edit those text parts in the HTML view that are not HTML tags. Example:

<p>This is my text</p>

I would like to be able to edit "This is my text" directly in the source code view and not only (!) in the graphical view.

Right ok, gotcha ?

Right ok, gotcha ?

I understand your ask now - you want to manually edit the mark up in the HTML pane, but I don't think thats likely to happen because as if you want to control HTML then you can convert to custom code (which I'm sure you already know)

I do think however a search option for HTML pane to see where classes and other attributes are used would be helpful though.

Chris, I even don't want to edit the HTML markup, as this would impact the structural handling by BSS. I just want to edit the things between HTML markup, which BSS should carry around as payload only. Hence, I think this shouldn't make any problems.

+1 for the search feature.

+1 for this suggestion.

There are situations where text content isn't easily selectable in the preview pane, or even impossible to select and edit. For example if you make a slider with multiple large slides that have text in them, sometimes it's a very frustrating experience trying to edit the content. I definitely think you should be able to edit "pure text" content in the html pane. Maybe, to avoid problems with the html structure, there could be a "filter" that removes any html markup if you try to add it in this manner.

You know you can label your content in the HTML overview pane to help organise lots of blocks of content.

You know you can label your content in the HTML overview pane to help organise lots of blocks of content.

Yes, but it's not an issue of keeping the content organized. There is - in special cases, especially when content appearance is javascript depended - a difficulty in actually selecting and editing the content in the preview pane.

I think BSS is one of the best software I am using. But I also have this problem - It took me quite a while to access the items in a side bar menu, since it is not visible.

As solution for now I go to the CSS file and disable the “Left=-250px” tag in the sidebar style temporarily.

I also have dropdowns in the sidebar and found out, that if I double click on a “Dropdown” item in the “Overview” panel it becomes visible so I can edit the items.

Having a solution for now, I still think it could not do wrong to make the contents of non-nested HTML tags editable in the “Attribute” panel.

After a while I found a better solution. I simply converted the sidebar to CustomCode - I can now edit and extend it freely.

I’m confused here (sorry I missed this post before). You should get a menu any time you select a nav item in your sidebar. Same as you would if it were a horizontal navbar. Do you not see that at the top or is it not showing up?

Works the same basically for all navs, accordions, tabbed components, etc. All should show a menu at the top where you can open and close the items you are selecting.

Select them in the Overview pane, it’s easier to know what you have selected in there than it is on the Preview window. Let me know if this doesn’t work for you and if not, can you share your project file so I or others can take a look and see what’s wrong? You definitely shouldn’t have to convert it to custom code at all, doing that kind of defeats the purpose of the drag and drop system.

1 Like

No his problem is pretty simple. And I understand the frustration, since I’ve encountered the same issue, especially when making things that are javascript triggered.

To understand the original posters issue, do the following:

Make a paragraph on a page.

Select that paragraph element.

Now, BESIDES the graphical editor, that great big visual representation of that paragraph on the page, where can you type into that paragraph to edit its contents between the p tags?

Quick answer; you cant.

Generally, stuff like this isn’t a problem in BSS, since you can usually see all elements on a page, and just double click and type your content.

Sometimes though, especially when you’re doing intermediate to expert level things to an element, you may not have the ability to see what’s in that element visually on the graphical editor pane.

I, for example, had some cards that flip between an image on the front side, to text on the reverse side, triggered by javacript, some css transforms and class changes. You literally could not see the paragraph element on the reverse side in the graphical editor. I had to copy and paste and hoped it was exactly as I wanted it, since I couldn’t navigate the cursor around to edit things, I couldn’t see the cursor or the text, as it was obscured behind the image.

Having the contents between any selected tags shown in the attributes panel would be pretty helpful, as a suggestion.

1 Like

Ah ok ya I see what you mean now. I usually end up using Custom Code boxes for most things like that to keep it easier to edit, but that’s not always an option and you’re right, all things on a page should be easily accessible to edit.

+1. It’s pretty annoying that you MUST edit any textual content directly in the visual editor view. Often those elements are initially hidden, or behind other objects on the page in the design view, so are not even visible or able to select in the editor view. So, I suggest, when you select any html tag that allows textual content inside it, make a textarea (maybe below the overview) where we can always visually see this content and edit it there like a property. This is pretty important to be able to do quickly and honestly seems like a huge oversight on the developers part by not having this functionality.