question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

I there a way to apply a default class to an element?

See original GitHub issue

Hello, first thank you for this amazing library. The question in the title is to solve a problem with bootstrap. I’d like to create a table that has already the class=“table” applyed from the start without having to add it manually from the style or property dialog. `

` this way the table is properly displayed in a bootstrap application without having to override direcly the style of table entity.

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
anthonyjbcommented, Jun 15, 2016

Hi @Macs75,

Thanks for the kind words 👍 I’d recommend overriding the existing table tool to do this, for example:

class ContentTools.Tools.BootstrapTable extends ContentTools.Tools.Table

    # Insert/Update Bootstrap table

    ContentTools.ToolShelf.stow(@, 'table')

    @_createTable: (section, columns) ->
        table = ContentTools.Tools.Table._createTable(section, column)
        table.addCSSClass('table')
        return table

Another option would be to listen for the attach event and ensure the table has that class:

ContentEdit.Root.get().bind('attach', function(element) {

    // We're only interested in tables
    if (element.type() !== 'Table') {
        return;
    }

    // Add the table class to table
    element.addCSSClass('table')
});

Despite the above options I think supporting for a way to define defaults for elements when added could be very useful, so I’m going to tag this as an enhancement as well.

0reactions
anthonyjbcommented, Nov 30, 2017

@itsmelion specifically for the case in question if you wanted to rely on ContentTools to ensure rel="external,nofollow" is always in place then the simplest option would be to define your own link tool (based on the existing one but modifying the code here: https://github.com/GetmeUK/ContentTools/blob/master/src/scripts/tools.coffee#L364 to include element.a.ref = 'external,nofollow').

Links are a bit of a special case here because they’re not an ContentEdit element type they only exist as elements within the contents of a ContentEdit.Text element so there’s no simple way to set set a default for them - though I can see the need here and think this might be something to look at as a future feature.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can I set a default css class for an html element - Stack Overflow
Yes, I know, I just wanted to for example assign to all <h1> elements by default and ALSO be able to use on...
Read more >
How to Assign a Class to an Element - Pluralsight
The styles or class name can be assigned conditionally by either using state & props, ternary operation, or any other conditional operator, such ......
Read more >
HTML class Attribute - W3Schools
The HTML class attribute is used to specify a class for an HTML element. Multiple HTML elements can share the same class.
Read more >
CSS classes - TeleportHQ Help Center
CSS Classes Reuse style across elements in your project by creating and linking classes. How to create a CSS class. Default classes. How...
Read more >
HTML tags | Webflow University
Use HTML element tags to control the default styling for a particular element ... These default styles can then be overridden with classes...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found