CODEWITHSUNDEEP
javascriptcss
soysushi
soysushi

Reputation: 71

No CSS styling until page reload - cssText is not working

The new generated list items are not inheriting css styling until the page is reloaded. Styling have been added while it is dynamically being added via cssText but it is not working.

Tried cssText, tried inline Jquery

  if (data.success) {
              console.log("Data success");
              // get the data that was returned.
              const contents = `${data.chatroom}`
              // create the dom tree under contacts
              const li = document.createElement('li');
              const div = document.createElement('div');
              const span = document.createElement('span');
              const div0= document.createElement('div')
              const p = document.createElement('p');
              const p0 = document.createElement('p');
              li.classList.add('contact');
              div.classList.add('wrap');
              div0.classList.add('meta');
              p.classList.add('name');
              p0.classList.add('preview');
              // setting innerHTML of new dom tree
              p.innerHTML = contents;
              div0.append(p);
              span.append(div0);
              div.append(span);
              li.append(div);
              var css = {"padding": "15px 0 30px 18px", "display": "block", "cursor": "pointer"};
              li.style.cssText = css;
              document.querySelector('#contacts').appendChild(li);

Newly generated list items should have the padding, display, and cursors dynamically generated but nothing is happening.

Upvotes: 0

Views: 378

Answers (2)

Leonard Pauli
Leonard Pauli

Reputation: 2683

Welcome to Stack Overflow! To learn more efficiently and get better help, please read https://stackoverflow.com/help/how-to-ask; eg. try to reduce the question to the minimal example still containing the issue; for instance:

  • because data gets loaded properly, it is just distracting to keep in the question
  • the nesting of elements could potentially affect styling, though try with the simplest case first (here, the issue is still there with just 2 instead of 6 nested elements)
  • the classes didn't change the result (thus removed for the question)
  • provide the required context (in this case the html element added to), so we can run and test the code

const contents = "some text"

const li = document.createElement('li');
const p = document.createElement('p');

p.innerHTML = contents;
li.append(p);

const css = {"background": "red"};
li.style.cssText = css;

document.querySelector('#contacts').appendChild(li);
<div id="contacts"></div>

Running this snippet, we can see that the contents have been added to the page correctly, though without any styling. Thus, we may conclude that the issue relates to the lines:

const css = {"background": "red"};
li.style.cssText = css;

With this in mind, we may simplify the question further:

const div = document.querySelector('#contacts')
div.innerText = "should be red"
div.style.cssText = {"background": "red"}
<div id="contacts"></div>

Now, there are much less moving parts! We now know that div.style.cssText = {"background": "red"} contains the issue, because the other lines are working (when running the code, it shows the text "should be red", though it doesn't set the color). We also know that div is valid because of the earlier line.

Googling on cssText, we can find the documentation: https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

Text of type DOMString The parsable textual representation of the declaration block (excluding the surrounding curly braces). Setting this attribute will result in the parsing of the new value and resetting of all the properties in the declaration block including the removal or addition of properties.

In other words, the value should be a string (formatted as in a .css file, or as in <div style="what: you; write: here;"> ...) - and not a javascript object.

Applying this change:

const div = document.querySelector('#contacts')
div.innerText = "should be red"
div.style.cssText = "background: red; padding: 20px;"
<div id="contacts"></div>

...gives us our result! That is, the process of formulating a simpler question often leads to the answer :)

Upvotes: 3

John
John

Reputation: 3785

Problem is this is an object

var css = {"padding": "15px 0 30px 18px", "display": "block", "cursor": "pointer"};

and cssText requires a string - try doing this instead

li.style.cssText = "padding: 15px 0 30px 18px; display: block; cursor:pointer";

Upvotes: 3

Related Questions