How to fix the member update modal inconsistently displaying fields in Memberstack? Answered

• 

  A J

  • November 07, 2025 16:28

  Daniel Haas, it seems there is a custom styling as follows to hide the input fields on the homepage:

  input{display:none;}

  Can you check if there is this line of code in the homepage custom code settings or in any code embed?

  If yes, you can remove it and test the site out.

  Note: This fix also should be done for 'My Saves' page, but since the other pages don't have this styling enabled, you can see the Profile modal show the custom fields data on pages like 'About' and 'My Searches'.

  Hope this helps. In case, you still face issues, you can share a preview link of the site to figure out the issue.

  0
• 

  Daniel Haas

  • November 07, 2025 16:32

  Hi A J Thanks for the response. I have hidden fields being passed on the homepage, which could be it?? I also have a save button which hides a checkbox. The code for both of those are below.

  hidden fields:

  </div><!-- Hidden member details (Memberstack autofills them) -->
  <div style="display:none">
    <input type="hidden" id="first-name"   name="first-name"   data-ms-member="first-name">
    <input type="hidden" id="last-name"    name="last-name"    data-ms-member="last-name">
    <input type="hidden" id="phone-number" name="phone-number" data-ms-member="phone-number">
    <input type="hidden" id="email"        name="email"        data-ms-member="email">
  </div>
  

  And the save button is here:

   /* ------------ renderer -------------------------------- */
    function render(list, container, checked){
      container.innerHTML = '';
      list.forEach((o,i)=>{
        const user  = o.authorUsername || '';
        const name  = o.authorName     || user;
        const credit = user
          ? `<p class="img-credit">Photo by <a href="https://unsplash.com/@${user}?utm_source=${APP_NAME_SLUG}&utm_medium=referral" target="_blank" rel="noopener">${name}</a> on <a href="https://unsplash.com/?utm_source=${APP_NAME_SLUG}&utm_medium=referral" target="_blank" rel="noopener">Unsplash</a></p>`
          : '';
  
        container.insertAdjacentHTML('beforeend',`
          <div class="modal result-card">
            <div class="image-wrapper">
              <img class="result-image" src="${o.image}" alt="${o.title}">
              ${credit}
            </div>
            <div class="result-content">
              <h3 class="result-header">${o.title}</h3>
              <p class="result-text">${o.description}</p>
              <a class="result-text" href="${o.link}" target="_blank">Learn more</a>
  
              <div class="save-wrapper">
                <input  type="checkbox"
                        id="toggle-${checked?'a':'d'}-${i}"
                        class="saved-toggle"
                        ${checked?'checked':''}
                        data-link="${o.link}">
                <label for="toggle-${checked?'a':'d'}-${i}" class="container">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                       viewBox="0 0 24 24" fill="none" stroke="currentColor"
                       stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78
                             7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0
                             0-7.78z"/>
                  </svg>
                  <div class="action">
                    <span class="option-1">Add to Favorites</span>
                    <span class="option-2">Added to Favorites</span>
                  </div>
                </label>
              </div>
            </div>
          </div>`);
      });
    }
  

  CSS is here:

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');
      
    /* hide the raw checkbox */
    .save-wrapper > input.result-save{
      display:none !important;
    }
    
    /* keep the heart pill only as wide as its content */
    .save-wrapper{
      width:fit-content;
      margin-top:8px;      /* tweak to taste */
    }
  
    /* ---------- MOBILE CENTERING ---------- */
    @media (max-width: 767px){
      .save-wrapper{
        margin:8px auto;      /* auto left/right centers horizontally */
        align-self:center;    /* if parent is flex-column */
      }
    }
  
    .save-wrapper label.container{
      padding:8px 14px 8px 10px;  /* slightly slimmer pill */
    }
    
    /* overlay */
    .signup-modal{
      position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
      background:rgba(0,0,0,.55);z-index:999;
    }
    .signup-modal.hidden{display:none;}
  
    .signup-box{
      background:#fff;border-radius:12px;padding:32px 40px;text-align:center;
      max-width:340px;width:90%;box-shadow:0 12px 32px rgba(0,0,0,.15);
    }
  
    #signup-btn{margin-top:16px;padding:10px 24px;font-weight:600;}
    #signup-close{margin-top:8px;background:none;border:none;color:#555;cursor:pointer;}
  
    label.container{
      font-family:'Montserrat',sans-serif;
      background:#fff;
      display:flex;align-items:center;gap:14px;
      padding:10px 15px 10px 10px;
      cursor:pointer;user-select:none;
      border-radius:10px;
      box-shadow:0 8px 24px rgba(149,157,165,.2);
      color:#333;
    }
  
    input{display:none;}
    input:checked + label svg{
      fill:hsl(0 100% 50%);
      stroke:hsl(0 100% 50%);
      animation:heartButton 1s;
    }
  
    @keyframes heartButton{
      0%,50%,100%{transform:scale(1);}
      25%,75%   {transform:scale(1.3);}
    }
  
    input + label .action{position:relative;overflow:hidden;display:grid;}
    input + label .action span{grid-area:1/1;transition:.5s;}
    .option-1{transform:translateY(0);opacity:1;font-weight:400;}
    input:checked + label .option-1{transform:translateY(-100%);opacity:0;}
    .option-2{transform:translateY(100%);opacity:0;font-weight:600;}
    input:checked + label .option-2{transform:translateY(0);opacity:1;}
  </style>
  

  I think I may see it: in the css block for the save button input is set to display none in order to hide the default checkbox. Is there a workaround for this?

  

  Can I somehow assign the modal input a different class?

  Or maybe change the class on the checkmark so that it doesn't interfere with the modal?
  0
• 

  A J

  • November 07, 2025 16:34

  Daniel Haas, yes I can see it in the save button related styling.

  And a better way to do this would be to have a class for checkbox that you want to be hidden and refer that class to have the property 'display:none' via CSS, that way even in future if you add any input fields you won't face this issue of it being hidden.

  Hope this helps.

  0
• 

  Daniel Haas

  • November 07, 2025 16:37

  Thanks, A J!

  0

Please sign in to leave a comment.