Databases
StackOverflow2013
Postsdbo
POModify dynamically created jQuery checkbox button's css
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POModify dynamically created jQuery checkbox button's css
    primarykey
    data
    text
    <p>I'm creating a series of jQuery checkboxes in a loop like so:</p> <pre><code>var checkbox = $('&lt;input&gt;').attr({type: 'checkbox', id: checkbox_id); panel.append(checkbox); panel.append($('&lt;label&gt;').attr({for: checkbox_id}).html(checkbox_name); checkbox.button(); </code></pre> <p>I have a css class called <code>my-style</code> that defines things like <code>border-radius</code>, <code>padding</code>, and <code>line-height</code>. I want <code>my-style</code> to override the attributes defined by jQuery's theme for only the checkboxes I've created.</p> <p>I tried <code>checkbox.addClass("my-style");</code> and <code>panel.find(".ui-button-text").addClass("my-style")</code>, but neither works correctly. Some css attributes do overwrite jQuery's default values, like <code>border-radius</code>, and others don't ever seem to be able to be overwritten like <code>line-height</code> and <code>padding</code>. I even tried to enforce css attributes directly by <code>panel.find(".ui-button-text").css("line-height", 1.0);</code>, but that doesn't work at all.</p> <p>I understand that I could just modify the jQuery theme directly by changing the css code in there, but doing so would affect all buttons made, which is not what I'd like to do.</p> <p>UPDATE:</p> <p>One way I've managed to address this issue is by specifying the <code>style</code> tag directly. So the code above becomes:</p> <pre><code>var checkbox = $('&lt;input&gt;').attr({type: 'checkbox', id: checkbox_id}); panel.append(checkbox); var label = $('&lt;label&gt;').attr({for: checkbox_id, style: "font-size: 0.6em; border-radius: 0px; margin-right: 0.3em;"}).text(checkbox_name); panel.append(label); checkbox.button(); label.children().attr("style", "padding: 0.2em 0.4em;"); </code></pre> <p>While this solution works, it's unsavory, as I'm mixing JavaScript and CSS code together.</p> <p>By writing in the <code>style</code> attribute, I can override jQuery UI's CSS. One thing that's been discussed here is using more specific CSS selectors that will be given more weight than jQuery UI's CSS classes. A more specific selector would be something that has the checkbox's ID. The problem with this approach is that checkboxes are dynamically generated, and thus so are checkbox IDs. It's therefore not feasible to have more specific CSS selectors from what I understand.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSamad Lotia
    1. USSamad Lotia
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COHave you tried using the `!important` declaration on the css attributes you want to override?
      singulars
      1. POModify dynamically created jQuery checkbox button's css
      1. USMatt K
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload