Allow editing of some locked classes

Ideas
1

While I understand the concept behind locking the classes associated with some Bootstrap components, I occasionally come across situations where it would be useful, and legal, to do so.

For example, I am trying to create a dropdown menu using a vertical ellipsis icon as is common on Android apps. The problem I have is that the Android vertical ellipsis dropdown doesn't include a caret icon. Searching the web, I found that the caret can be removed by removing the dropdown-toggle class from the button element of the dropdown component without affecting the dropdown menu operation. Unfortunately, that class is locked by Bootstrap Studio.

I can certainly handle this by manually editing the html code after exporting it, or even by defining an export script to do it but would be nice to be able to do it within BSS.

2

Until such a time as this is implemented (if it is) this may help as a work around that doesn't involve editing anything "after" export. This was found with a search of the forums for the word "caret" and it was the second post of the search results. Might come in handy to search things when you're looking for work arounds, chances are someone has found something to work around most things so far. :)

Having said that, I don't always find what I'm looking for in searches so I definitely understand that some people did search and don't always know the right terms to search for lol. I would never have that problem myself looks around innocently LOL.

3

I assume that Jo is referring to https://bootstrapstudio.io/forums/topic/cant-delete-caret-in-dropdown/

Saj

4

I had already found that solution in Stack Overflow. I put it in my styles.css file but it made no difference, caret is still there. Pete

5

Got it to work. I had to use ::before instead of ::after. If anyone else is trying to make a vertical ellipsis Android dropdown, set the Button style to link to get rid of the borders around the button.

6

I don't know if you're using the Dropdown component from BSS 4.x because every instance I drag/drop in has the caret generated from :after..

Anyways, glad you got it straightened out.

Saj

7

Yes, it's a bootstrap 4 project. Not sure why ::before made it work but the caret apperas before any text in the button when I drag a dropdown menu component on to the page. I am using the Materia theme so maybe that'the reason?

8

Ah I see you must have the button settings set to Dropleft which puts the caret at the left of the dropdown text and yes that makes sense that it's ::before then. It appears to be the only setting that will have the caret using ::before, unless your using the Split Button component which defaults to using ::before for the caret. Which would be pertinent information with help you out :)

Well anyways glad you got it worked out :)

Saj

9

Oops, sorry guys, forgot the link! Thanks for the save Saj! :)