elements randomly being inserted into FAQ toggles

  • Resolved slatejn

    (@slatejn)


    6 years, 7 months ago

    I started to notice inconsistencies in how much white space was around FAQ lists from page to page. Category grouping is off and FAQs are being added to toggles in Jupiter Theme skinned to appear as UFAQ Categories. It appears as though javascript for the controls is inserted into the <p> tags when needed, however because the tags don’t have a css class defined, they are difficult to negate without impacting the rest of the site.
    —————– https://supportdev.ccsd.net/hardware-support/———-
    ———-Hardware Problems Tab—————–
    On the First Page: I was able to negate the <P> tag with CSS. The FAQS are:

    [mk_toggle title="Computer(Desktop & Laptop)" el_class="custom_toggle_ufaq"][ultimate-faqs include_category='computer-problems'?exclude_category='otherhwts'][/mk_toggle][mk_toggle title="Apple(Desktop & Laptop)" el_class="custom_toggle_ufaq"][ultimate-faqs include_category='apple-computers'?exclude_category='otherhwts'][/mk_toggle][mk_toggle title="Network Connectivity" el_class="custom_toggle_ufaq"][ultimate-faqs include_category='connectivity-problems,network,wifi'?exclude_category='otherhwts'][/mk_toggle][mk_toggle title="Mobile Devices" el_class="custom_toggle_ufaq"][ultimate-faqs include_category='mobile-device-problems' exclude_category='otherhwts'][/mk_toggle][mk_toggle title="Printers" el_class="custom_toggle_ufaq"][ultimate-faqs include_category='printer-problems'][/mk_toggle][mk_toggle title="Other Classroom Hardware" el_class="custom_toggle_ufaq"][ultimate-faqs include_category='other-problems' exclude_category='otherhwts'][/mk_toggle][mk_toggle title="Telephones" el_class="custom_toggle_ufaq"][ultimate-faqs include_category='telecom'?exclude_category='otherhwts' ][/mk_toggle]'

    The FAQs render as:
    <p> Javascript for accordion , scroll, and reveal</p>
    <div> BorderBlock
    <div> FAQ title
    post margin link
    <div> Icon</div>
    <div> title text <h6> title </h6></div>
    <div class=”ewd-ufaq-clear”></div>
    <p> EMPTY ELEMENT with full line height </p>
    </div></div></div>

    I have been able to set the margins for these with :

    .ewd-ufaq-post-margin >p {
margin:0!important;
}

    —————– https://supportdev.ccsd.net/resources-information/———-
    On the Second page (where it is inconsistent line height H6 but control is 72px):

    [mk_toggle el_class="custom_toggle_ufaq" title="General Support Information"][ultimate-faqs include_category='resources-info'][/mk_toggle]

[mk_toggle el_class="custom_toggle_ufaq" title="Other Support Information"][ultimate-faqs include_category='otherhwts'][/mk_toggle]

    The FAQs render as:
    <p> Javascript for accordion , scroll, and reveal</p>
    <div> BorderBlock
    <div> FAQ title
    post margin
    <p> EMPTY ELEMENT with full line height </p>
    <div> Icon</div>
    <div> title text <h6> title </h6></div>
    <div class=”ewd-ufaq-clear”></div>

    <p> post margin Link </p> <—Second link not in the first FAQ
    </div>
    <div> hidden FAQ answer</div>
    </div>

    In the second one, there is an additional <p> element with a link that is not present in the first. Chrome shows the code as 0px height, but it renders with height.

    .ufaq-faq-title >p >a .ufaq-faq-toggle > p >a {
margin:0!important;
}

    does not eliminate the extra spacing, however.

    In this last one, the overall border box is 72px high, the post margin height is 48px, the actual title is 28px and the p tag has a 20px margin someplace.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter slatejn

    (@slatejn)

    For some reason other styles are also not being applied correctly to the FAQs in the second page… Border color, hover colors…

    • This reply was modified 6 years, 7 months ago by slatejn.
    Thread Starter slatejn

    (@slatejn)

    Wrapping the FAQs into a Tab Structure fixed the formatting. I’m confused.

    Page where issue is still present : https://supportdev.ccsd.net/contact-us/

    • This reply was modified 6 years, 7 months ago by slatejn.

    Hi slatejn,

    We checked out the link you sent and couldn’t find any formatting issues (i.e. we didn’t see any <p> code appearing on the page).

    Did you manage to fix the issue already? If not, please let us know if it’s appearing on a different part of the page (or on another page in your site).

    Thread Starter slatejn

    (@slatejn)

    How to see page elements:
    In Chrome, Right click the FAQ Title
    Select “Inspect”
    Open all of the above referenced tags.

    You can also see from there that the colors and padding are different than FAQs in other places on the site.

    What is interesting is that the custom style appears correctly when nested in side of another structure such as the [vc_tabs], but not outside.

    Hi slatejn,

    It appears that there is something on your contact page which is appending <p>’s to the code that you’ve added to the “Custom CSS” box in Settings->Basic.

    If you try adding the UFAQ shortcode in the main editor of the Contact page (underneath the “Below you will find our hours of operation, contact numbers, and some quick forms for common issues.” text), does the styling show then?

    Thread Starter slatejn

    (@slatejn)

    Yes, Paragraph Tags are being added. No, that’s not how CSS works. CSS can’t add another link and wrap it in a paragraph tag:
    <p><a class="ewd-ufaq-post-margin" href="https://supportdev.ccsd.net/ufaqs/zoning-address-requests/"></a></p>

    It works fine in that container outside of the toggle.
    It also works fine in toggles in most other containers but not in a toggle that isn’t in another container. I’m just trying to understand what is happening and correct it as I go.

    What is really frustrating is using the vc_toggle is a workaround for not being able to set the ufaq category grouping toggle on/off in shortcode and not being able to set the sort order of ufaq category toggles. Which are a workaround for not being able to display the same category twice on a page in this Theme. And all of this is a workaround for having to spend a long amount of time converting enough content to find that it doesn’t do what I need it to do, but having no time left to look for something else on a deadline…. ??

    It looks like something (either your theme, or the visual composer, or something else) is making liberal use of apply_filters(‘the_content’ and automatically adding paragraph tags around elements that shouldn’t have them. We have no control over that. We definitely did not program our plugin to add p tags to the CSS. That is why we asked if it still does it if you add our shortcode just to a regular page editor, not via visual composer, etc.

    Thread Starter slatejn

    (@slatejn)

    I understand and I agree as to the root cause. It’s too bad you don’t have your libs on github for contribution. ?? Adding extensibility to attributes would be something I’d gladly volunteer time for since it would make my job orders of magnitude easier… ??

    • This reply was modified 6 years, 7 months ago by slatejn.
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘elements randomly being inserted into FAQ toggles’ is closed to new replies.