I'm attaching a Google Drive link which has a video explaining the issue.

https://drive.google.com/file/d/1DDzVPSr_wZPxyC0HlUx1hPY75NIr7yNX/view?u...

CommentFileSizeAuthor
#7 dxpr-builder-custom-classes2.gif616.46 KBjurriaanroelofs
#6 dxpr-builder-custom-classes.gif296.04 KBjurriaanroelofs

Comments

jo13sue created an issue. See original summary.

jurriaanroelofs’s picture

jurriaanroelofs commented
Status: Active » Closed (works as designed)

Hi Josue,

The HTML id attribute is meant to be a unique identifier and shouldn’t be reused across a page. That’s exactly what classes are for 🙂. In this case, you should update #blue-text in your CSS to .blue-text and apply it via the class attribute instead.

It’s true that the new AI features introduce some differences in how HTML is parsed, which likely exposed this issue. However, the proper fix is to adjust the way the CSS is implemented. There’s no need to address this within DXPR Builder itself, per the HTML specification, id values must be unique. Reusing them can lead to broader issues beyond the text editor behavior you’re seeing.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

jo13sue’s picture

jo13sue commented

Yes, using a class would be the proper way. The problem is that elements in DXPR only accept ID's unless you are using a wysiwyg editor or a custom html element to add classes. But you cannot add a class to a button, image, row or section. DXPR should be updated to allow ID's and classes in any element added to the page. Unless I'm missing something, can this be done already?

jo13sue’s picture

jo13sue commented
Status: Closed (works as designed) » Needs review
jurriaanroelofs’s picture

jurriaanroelofs commented
StatusFileSize
new dxpr-builder-custom-classes.gif296.04 KB

Hi Josue,

There is a HTML field right below the ID field on every element, but note you have to click the "Edit as text" button if the class you want to enter is not part of a set that you have predefined in your theme or custom modules.

Demo:

Adding custom classes in DXPR Builder

Docs for adding pre-defined classes: https://dxpr.com/documentation/extend-glazed-builder-utility-classes

jurriaanroelofs’s picture

jurriaanroelofs commented
StatusFileSize
new dxpr-builder-custom-classes2.gif616.46 KB
jo13sue’s picture

jo13sue commented

Ohh wow, how long has that been there? I feel like that wasn't there in preview versions? May I suggest that for future versions that edit as text is more visible.