Hello there,
According to the spec. The a element can contain "flow content" elements. Heading elements h1..h6 are flow content elements but Bootstrap Studio won't let us add a heading component inside a link component. Can it be fixed?
Hey,
Thank you for reporting this! The HTML spec is enormous and it would be impossible to support everything with our drag and drop builder. In the next release we are going to have a special "Custom Code" component which allows you to write any kind of HTML that is not possible to do with Bootstrap Studio's drag and drop functionality.
I think that you should start by trying to respect the spec first.
I like the tool but if every time I ask about something like that, something that make sense since the spec exist ans say so, something so basic, I'm told that I will have a custom HTML component to do it in a near future I question my self about the fact why I'm using the tool in the first place. Ok some features are great but if I have to resort to custom build the code of a lot of things, I believe that I should take the time to create Bootstrap component templates in PhpStorm and use those with Chrome and a watcher to reload the browser on file change. Wait a sec... I already have those, partially done... In fact, I believe that a custom HTML component should be used for complicated structures. As it is, the tool doesn't allow me to do the simple task of wrapping a image tag and a heading tag in a link tag and it's frustrating to think I will have to edit the templates once they are made because if I use the tool it's for not having to do that exactly. Create, export, I already have a tool that clean the HTML files, keeping only what's inside the body, or between an identified div, used it before because we do prototyping in HTML but need partials for production use.
Thank you for the input Michel, I understand your frustration.
The spec wasn't designed with drag and drop builders in mind, so we chose to focus on use cases instead. Bootstrap Studio supports dropping images and links inside headings, as in our experience this is the common way to do it. We considered the use case solved, so didn't investigate dropping headings inside links. If this is important to you, we can add it.
I only mention the Custom Code component as it gives you full control over the markup, and it's an easy way out of our drag and drop editor and the decisions we made to make it work.
Hi Martin,
By the way... Still love the tool and still using it.
That said... I understand that de spec wasn't designed with drag and drop builders in mind... It's the drag and drop builders that should be designed with the specs in mind... ;)
So... For the link tag the definition of permitted content is :
Transparent, containing either flow content (excluding interactive content) or phrasing content.
according to MDN
This mean that, every elements is permitted inside it except for :
, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, and <textarea>.
Some elements belong to this category only under specific conditions:
<audio>, if the controls attribute is present
<input>, if the type attribute is not in the hidden state
<menu>, if the type attribute is in the toolbar state
<object>, if the usemap attribute is present
<video>, if the controls attribute is present
So, not being able to drop some bootstrap, ready made, components in a tag make sense... Say a button, a dropdown, an other link, any inputs except the type hidden, nav, navbar, etc... But as soon that the component is in fact only a drag and drop HTML TAG that is not an interactive one <h#>,, etc it should be permitted by the tool... It's not a question of commonly used case here I think...