Display:flex does not load correctly on anchor tag?

kko 0
Viewed 36

I'm working on a full-stack project that is somehow loading inconsistent CSS styles on my anchor elements. Using Javascript I am doing something like the following:

recordData.forEach(record => {
      let a = help.createElement('a');
      let text = record.jobTitle + " (" + record.deptName + ", " + record.subDeptName + ")-" + record.email;
      a.textContent = text;
      a.href = `/frontend/contractorForm/contractorForm.html`;
      a.addEventListener('click', function(event) {
        sessionStorage.clear();
        sessionStorage.setItem('record', JSON.stringify(record));
      }, false);
      parent.appendChild(a);
}

The idea of this was that although I have one single HTML form "template" created, I can populate the values inside contractorForm.html through values stored in my sessionStorage. Below are my anchor tag frontend views and I also attached images of what happens when I click on other ones. The problem with this is that when I click on my anchor tags on the front end, this is what I get. My CSS for contractorForm.html is basically display:flex; justify-content:center. But as shown in the images, only the first anchor link works.

Things I've checked and verified: CSS page does load when looking at Devtools, disabling and clearing cache, attaching ?version={random number} onto the .html href, changing style on devtools to see if it works (and it does), changing the background color (it works perfectly), loading my CSS code after bootstrap link, checking paths and links (all correct)

The only issue here is that my display: flex is simple just not working. Any help or ideas will be appreciated! Thank you!

anchortaghtmlview

first-anchortag-click-view

second-anchortag-click-view

frontend javascript css html
1 Answers
  • Fixed it - if you have CSS issues, make sure you are referring correctly to the parent.

My CSS looked like this before:


    #contractor-form-section {
        width: 50rem;
    }
  • #contractor-form is wrapping just the form element, and the way how my DOM structure looked like was something like this:

    <body>
        <div id="contractor-form-border">
            <section id="contractor-form-section">
                <h1>...</h1>
                <form>
                </form>
            </section>
        </div>
    </body>
  • Essentially, my CSS was referring to #contractor-form-section rather than #contractor-form-border. Switching to that basically fixed the issue!
kko0
Related