javascriptcssmeteormeteor-blaze

Meteor Blaze dynamic template CSS results in duplicate element IDs

I was given an old Bootstrap template to make it dynamic, and I had issues with dynamic CSS with ::before and ::after selectors check the below example image

enter image description here

The core issue is, that it works fine for single usage/class but when I tried to use the same CSS for dynamic templates (more than 1) it behaved strangely, initially I noticed that the ID was the same so I tried to convert it to class but issue not resolved, then I realized that that issue coming with only ::before and ::after selectors all other templates classes working fine, so I tried to add that CSS dynamically with combination of unique document ID’s, even I ended up with dynamic style tag with JS but it seems very hacky solution.

h4, h5, h6,
h1, h2, h3 {margin: 0;}
ul, ol {margin: 0;}
p {margin: 0;}

html, body{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 100%;
    overflow-x: hidden;
    background: #FFFFFF;
}

#page-wrapper3 .widget-shadow {
    background-color: #fff;
    box-shadow: 0 -1px 3px rgba(0,0,0,0),0 1px 2px rgba(0,0,0,0);
    -webkit-box-shadow: 0 -1px 3px rgba(0,0,0,0),0 1px 2px rgba(0,0,0,0);
    -moz-box-shadow: 0 -1px 3px rgba(0,0,0,0),0 1px 2px rgba(0,0,0,0);
}
#page-wrapper3 .login-top {
    padding: 1.5em;
    border-bottom: 0 solid #DED9D9!important;
    text-align: center;
}

#wrapper {
    width: 100%;
}
#page-wrapper {
    padding:7em 2em 2.5em 12em;
    background-color: #EFF4FA;
}
#page-wrapper2 {
    padding:7em 2em 2.5em 2em;
    background-color: #EFF4FA;
}
#page-wrapper3 {
    padding:4em 2em 2.5em 2em;
    background-color: #FFFFFF;
}

#page-wrapper3 .login-page{
    width: 70%!important;
}

.selecOpc3{
    width: 100%;
    display: block;
    margin: 10px 40px 40px;
}

.selecOpc3 div{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.selecOpc3 .dRati{
    display: inline-block;
    position: relative;
}

.selecOpc3 .dRati .escala{
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    margin: 25px auto;
}

.selecOpc3 img{
    width: 35px;
}


.textCuest1{
    margin: 10px 0px 0px;
    text-align: left;
}

.rating, .rating1, .escala {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  display: flex;
  justify-content: space-around;
}

.rating input, .rating1 input, .escala input {
  display: none;
}


.escala label {
    display: inline-grid;
    cursor: pointer;
    width: 40px;
    transform: rotate(180deg);
    margin: 5px;
}


/* here is the issue which I had to resolve dynamically */
.escala label[for=escala1]::before {
  content: '1';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala2]::before {
  content: '2';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala3]::before {
  content: '3';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala4]::before {
  content: '4';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala5]::before {
  content: '5';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala6]::before {
  content: '6';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala7]::before {
  content: '7';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala8]::before {
  content: '8';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala9]::before {
  content: '9';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala10]::before {
  content: '10';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala1]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '1';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala2]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '2';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala3]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '3';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala4]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '4';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala5]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '5';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala6]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '6';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala7]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '7';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala8]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '8';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala9]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '9';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala10]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '10';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}


.escala label:hover::after,
.escala label:hover ~ label::after,
.escala input:checked ~ label::after {
  opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="selecOpc3">
    <div class="dRati" id="scale">
        <div class="escala">
            <input type="radio" name="escala" id="escala10" value="10"><label for="escala10"></label>
            <input type="radio" name="escala" id="escala9" value="9"><label for="escala9"></label>
            <input type="radio" name="escala" id="escala8" value="8"><label for="escala8"></label>
            <input type="radio" name="escala" id="escala7" value="7"><label for="escala7"></label>
            <input type="radio" name="escala" id="escala6" value="6"><label for="escala6"></label>
            <input type="radio" name="escala" id="escala5" value="5"><label for="escala5"></label>
            <input type="radio" name="escala" id="escala4" value="4"><label for="escala4"></label>
            <input type="radio" name="escala" id="escala3" value="3"><label for="escala3"></label>
            <input type="radio" name="escala" id="escala2" value="2"><label for="escala2"></label>
            <input type="radio" name="escala" id="escala1" value="1"><label for="escala1"></label>
        </div>
    </div>
</div>

<br />
<hr />
<br />

<div class="selecOpc3">
    <div class="dRati" id="scale">
        <div class="escala">
            <input type="radio" name="escala" id="escala10" value="10"><label for="escala10"></label>
            <input type="radio" name="escala" id="escala9" value="9"><label for="escala9"></label>
            <input type="radio" name="escala" id="escala8" value="8"><label for="escala8"></label>
            <input type="radio" name="escala" id="escala7" value="7"><label for="escala7"></label>
            <input type="radio" name="escala" id="escala6" value="6"><label for="escala6"></label>
            <input type="radio" name="escala" id="escala5" value="5"><label for="escala5"></label>
            <input type="radio" name="escala" id="escala4" value="4"><label for="escala4"></label>
            <input type="radio" name="escala" id="escala3" value="3"><label for="escala3"></label>
            <input type="radio" name="escala" id="escala2" value="2"><label for="escala2"></label>
            <input type="radio" name="escala" id="escala1" value="1"><label for="escala1"></label>
        </div>
    </div>
</div>
</body>
</html>

You can test whenever the user goes and selects the second question only the first one selected CSS apply, (I want both to behave independently) as I have other types (smilies/stars) as well, and with the hacky solution is https://dynamic-css.meteorapp.com/v1

Solution

  • The way I see it, you have two problems here, the first one is that id must be unique, especially in this case, if it's not unique, all lables with for='escala10' will represent the input with id='escala10' (as stated here), but since there are two id='escala10', it will only represent the first one. The easiest fix I could think of so that the CSS will apply with this structure is by using nth-last-of-type() pseudo class:

    ...
    .escala label:nth-last-of-type(1)::before {
      content: "1";
    }

    .escala label:nth-last-of-type(2)::before {
      content: "2";
    }
...

    The second problem is that you are using the same name for all inputs, in the first section you used name='escala', and you did the same thing in the second section, this will make a situation where only one radio input can be selected throughout the sections (as I understand it, it should be one radio input per section, not one radio per all sections). To solve it, you can use a different name in each sections:

    h4,
h5,
h6,
h1,
h2,
h3 {
  margin: 0;
}
ul,
ol {
  margin: 0;
}
p {
  margin: 0;
}

html,
body {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 100%;
  overflow-x: hidden;
  background: #ffffff;
}

#page-wrapper3 .widget-shadow {
  background-color: #fff;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0);
}
#page-wrapper3 .login-top {
  padding: 1.5em;
  border-bottom: 0 solid #ded9d9 !important;
  text-align: center;
}

#wrapper {
  width: 100%;
}
#page-wrapper {
  padding: 7em 2em 2.5em 12em;
  background-color: #eff4fa;
}
#page-wrapper2 {
  padding: 7em 2em 2.5em 2em;
  background-color: #eff4fa;
}
#page-wrapper3 {
  padding: 4em 2em 2.5em 2em;
  background-color: #ffffff;
}

#page-wrapper3 .login-page {
  width: 70% !important;
}

.selecOpc3 {
  width: 100%;
  display: block;
  margin: 10px 40px 40px;
}

.selecOpc3 div {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.selecOpc3 .dRati {
  display: inline-block;
  position: relative;
}

.selecOpc3 .dRati .escala {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  margin: 25px auto;
}

.selecOpc3 img {
  width: 35px;
}

.textCuest1 {
  margin: 10px 0px 0px;
  text-align: left;
}

.rating,
.rating1,
.escala {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  display: flex;
  justify-content: space-around;
}

.rating input,
.rating1 input,
.escala input {
  display: none;
}

.escala label {
  display: inline-grid;
  cursor: pointer;
  width: 40px;
  transform: rotate(180deg);
  margin: 5px;
}

.escala label::before {
  position: relative;
  display: block;
  border: 1px solid;
  border-radius: 50px;
  padding: 7px;
}

.escala label::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  width: 40px;
  border: 1px solid #44987b;
  border-radius: 50px;
  padding: 7px;
  background-color: rgb(68 152 123 / 17%);
  color: #44987b;
}

/* here is the issue which I had to resolve dynamically */
.escala label:nth-last-of-type(1)::before {
  content: "1";
}

.escala label:nth-last-of-type(2)::before {
  content: "2";
}

.escala label:nth-last-of-type(3)::before {
  content: "3";
}

.escala label:nth-last-of-type(4)::before {
  content: "4";
}

.escala label:nth-last-of-type(5)::before {
  content: "5";
}

.escala label:nth-last-of-type(6)::before {
  content: "6";
}

.escala label:nth-last-of-type(7)::before {
  content: "7";
}

.escala label:nth-last-of-type(8)::before {
  content: "8";
}

.escala label:nth-last-of-type(9)::before {
  content: "9";
}

.escala label:nth-last-of-type(10)::before {
  content: "10";
}

.escala label:nth-last-of-type(1)::after {
  content: "1";
}

.escala label:nth-last-of-type(2)::after {
  content: "2";
}

.escala label:nth-last-of-type(3)::after {
  content: "3";
}

.escala label:nth-last-of-type(4)::after {
  content: "4";
}

.escala label:nth-last-of-type(5)::after {
  content: "5";
}

.escala label:nth-last-of-type(6)::after {
  content: "6";
}

.escala label:nth-last-of-type(7)::after {
  content: "7";
}

.escala label:nth-last-of-type(8)::after {
  content: "8";
}

.escala label:nth-last-of-type(9)::after {
  content: "9";
}

.escala label:nth-last-of-type(10)::after {
  content: "10";
}

.escala label:hover::after,
.escala label:hover ~ label::after,
.escala input:checked ~ label::after {
  opacity: 1;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="selecOpc3">
    <div class="dRati" id="scale">
        <div class="escala">
            <input type="radio" name="escala1" id="escala1-10" value="10"><label for="escala1-10"></label>
            <input type="radio" name="escala1" id="escala1-9" value="9"><label for="escala1-9"></label>
            <input type="radio" name="escala1" id="escala1-8" value="8"><label for="escala1-8"></label>
            <input type="radio" name="escala1" id="escala1-7" value="7"><label for="escala1-7"></label>
            <input type="radio" name="escala1" id="escala1-6" value="6"><label for="escala1-6"></label>
            <input type="radio" name="escala1" id="escala1-5" value="5"><label for="escala1-5"></label>
            <input type="radio" name="escala1" id="escala1-4" value="4"><label for="escala1-4"></label>
            <input type="radio" name="escala1" id="escala1-3" value="3"><label for="escala1-3"></label>
            <input type="radio" name="escala1" id="escala1-2" value="2"><label for="escala1-2"></label>
            <input type="radio" name="escala1" id="escala1-1" value="1"><label for="escala1-1"></label>
        </div>
    </div>
</div>

<br />
<hr />
<br />

<div class="selecOpc3">
    <div class="dRati" id="scale">
        <div class="escala">
            <input type="radio" name="escala2" id="escala2-10" value="10"><label for="escala2-10"></label>
            <input type="radio" name="escala2" id="escala2-9" value="9"><label for="escala2-9"></label>
            <input type="radio" name="escala2" id="escala2-8" value="8"><label for="escala2-8"></label>
            <input type="radio" name="escala2" id="escala2-7" value="7"><label for="escala2-7"></label>
            <input type="radio" name="escala2" id="escala2-6" value="6"><label for="escala2-6"></label>
            <input type="radio" name="escala2" id="escala2-5" value="5"><label for="escala2-5"></label>
            <input type="radio" name="escala2" id="escala2-4" value="4"><label for="escala2-4"></label>
            <input type="radio" name="escala2" id="escala2-3" value="3"><label for="escala2-3"></label>
            <input type="radio" name="escala2" id="escala2-2" value="2"><label for="escala2-2"></label>
            <input type="radio" name="escala2" id="escala2-1" value="1"><label for="escala2-1"></label>
        </div>
    </div>
</div>
</body>
</html>