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.

object.js renders invalid HTML code

See original GitHub issue

All themes render invalid HTML due to repeatedly using the same Id for different elements. This is repeated through all themes.

Code from src/themes.js

Note the dual use of “id=pName” in both functions.

  getTabHolder: function(propertyName) {
    var pName = (typeof propertyName === 'undefined')? "" : propertyName;
    var el = document.createElement('div');
    el.innerHTML = "<div style='float: left; width: 130px;' class='tabs' id='" + pName + "'></div><div class='content' style='margin-left: 120px;' id='" + pName + "'></div><div style='clear:both;'></div>";
    return el;
  },
  getTopTabHolder: function(propertyName) {
    var pName = (typeof propertyName === 'undefined')? "" : propertyName;
    var el = document.createElement('div');
    el.innerHTML = "<div class='tabs' style='margin-left: 10px;' id='" + pName + "'></div><div style='clear:both;'></div><div class='content' id='" + pName + "'></div>";
    return el;
  },

Issue Analytics

State:
Created 5 years ago
Comments:18 (6 by maintainers)

Top GitHub Comments

2reactions

pmk65commented, Nov 15, 2018

@schmunk42 @marc7000 @germanbisurgi I have been looking at the problem with categories not working in most themes and fixed one of the problems with invalid IDs. But there’s another related problem that might be the cause of the themes problems.

If you look at this example: (Doesn’t matter which theme you use), Then try to inspect the content of the first tab (category) and you’ll notice that the content is wrapped in 4 identical blocks.

<div class="col-md-12" role="tabpanel" id="First Tab">
  <div class="row">
    <div class="col-md-12" role="tabpanel" id="First Tab">
      <div class="row">
        <div class="col-md-12" role="tabpanel" id="First Tab">
          <div class="row">
            <div class="col-md-12" role="tabpanel" id="First Tab">
              <div class="row">
                <div data-schematype="object" data-schemapath="root.first" style="position: relative;" class="col-md-12">

I can’t see any reason why it has to be wrapped 4 times, and it clearly poses a problem with 4 identical IDs.

The problem is located in src/editors/objects.js. And it seems like the layoutEditors() function is called numerous times for each editor/field, stacking up the wrappers. And I guess this is the reason why a lot of the themes don’t work properly.

I can’t figure out if the layoutEditors() function is supposed to remove the previous wrappings, as the code is not documented very well. So I could use some help here 😜

1reaction

pmadrilcommented, Dec 5, 2018

Hi, I’m author of categories. As soon as possible I will take a look at the problem (just few hours, I’m in a rush rigth now).

Top Results From Across the Web

Using Javascript to Render Invalid HTML

There's nothing really wrong with this code syntactically. But browsers can't render it as it is, because ideally, <pre> tags should not be ......

Dynamically Fix/Repair Invalid HTML in Javascript

I am currently writing a program that works very similar to a rich text editor, the way my HTML code is outputted is...

Resolving Error: "Objects are not valid as a React child"

The simplest approach to resolving invalid rendering of a Date is to use the built in JS .toString() method for Dates. This will...

8 Invalid HTML Elements You Should Stop Using Immediately »

Learn about deprecated and obsolete tags and the valid HTML elements and CSS properties to use instead.

Render Functions & JSX

h() is short for hyperscript - which means "JavaScript that produces HTML (hypertext markup ... That means the following render function is invalid:...