Support » Plugin: Simple Lightbox » page formatting

  • Resolved leeersin

    (@leeersin)


    Hi firstly I’d like to so thank you for the plugin and the initial notes on how to make it work, it really is a breeze.

    Your plug in and html works fine on my website with one exception.

    The issue I have is when I move the html widget containing your code above another widget containing some short code, the formatting for the output/form produced by the shortcode is lost. The short code output/form still functions but the formatting is lost..

    I am guessing it is down to the formatting html I have added to your original code.

    You will see from my html code below I am a novice with coding but am prepared to have a go..

    Is there a way to add some more html to the code below so that it only affects the SLB widget output??

    Many Thanks,

    Lee

    <p style="color:black;font-size:24px;font-family:Raleway;text-align:center;">
    Please supply 1 form ID or ID LITE from the following list : <a style="color:blue;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/ID-LITE-INTRO.png">ID LITE How & Why</a>
    <div style="display: none">
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/PASSPORTS.jpg">PASSPORT</a>
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/LICENCE-PIC.jpg">LICENCE PIC</a>
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/LICENCE-NO-PIC.jpg">LICENCE NO PIC</a>
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/TAX-BILLS.jpg">TAX BILLS</a>
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/BANK-STATEMENTS.jpg">BANK-STATEMENTS</a>
    /p>
    </div>

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Archetyped

    (@archetyped)

    Hi, the HTML in the sample you provided is malformed, which can cause formatting issues.

    Most HTML elements have an opening and a closing tag (e.g. <div> and </div>). When an element is nested inside of another element– a <div> inside of a <p> element in your case– the closing tag of the nested element needs to come before the closing tag of the parent element.

    As such, there are 2 main issues that need to be fixed in the code above:

    1. Change /p> to </p> (malformed tag).
    2. Move </div> above the </p> tag.

    Once the above fixes are applied, the formatting issues should be resolved.

    Please post an updated code sample and link if you are still experiencing an issue after fixing the code and I would be glad to take another look.

    Thread Starter leeersin

    (@leeersin)

    Hi Archetyped, I have made the changes as you advised.

    As soon as I move the </div> above the </p> tag, I get a red x next to the last </p> tag.

    The plug in still works fine but my formatting problem remains the same..

    Below is the latest code.

    Many Thanks,

    Lee

    <p style="color:black;font-size:24px;font-family:Raleway;text-align:center;">
    
    Please supply 1 form of ID or ID LITE from the following list : <a style="color:blue;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/ID-LITE-INTRO.png">ID LITE How & Why</a>
    
    <div style="display: none">
    
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/PASSPORTS.jpg">PASSPORT</a>
    
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/LICENCE-PIC.jpg">LICENCE PIC</a>
    
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/LICENCE-NO-PIC.jpg">LICENCE NO PIC</a>
    
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/TAX-BILLS.jpg">TAX BILLS</a>
    
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/BANK-STATEMENTS.jpg">BANK-STATEMENTS</a>
    
    </div>
    </p>
    Thread Starter leeersin

    (@leeersin)

    also just saw the message by the red x on the last </p>.

    it says: Unexpected end tag (p). Ignored.

    thanks, lee

    Plugin Author Archetyped

    (@archetyped)

    Ah yes, paragraph elements (<p>) cannot contain block-level elements such as <div>.

    Using valid HTML by changing the paragraph element’s opening and closing tags to <div> and </div> respectively should resolve the formatting issue.

    Thread Starter leeersin

    (@leeersin)

    Hi, I made the changes you suggest and they have removed the red x by the last </p>.

    Regarding the original problem though, no difference I am sorry to say.

    As soon as I move the html widget above the shortcode widget I loose the formatting on he shortcode output/form..

    I have added two examples of how I applied the changes in the html below.

    Many Thanks,

    Lee

    FIRST CHANGE

    <div style="color:black;font-size:24px;font-family:Raleway;text-align:center;">
    Please supply 1 form of ID or ID LITE from the following list : <a style="color:blue;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/ID-LITE-INTRO.png">ID LITE How & Why</a>
    
    <p style="display: none">
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/PASSPORTS.jpg">PASSPORT</a>
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/LICENCE-PIC.jpg">LICENCE PIC</a>
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/LICENCE-NO-PIC.jpg">LICENCE NO PIC</a>
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/TAX-BILLS.jpg">TAX BILLS</a>
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/BANK-STATEMENTS.jpg">BANK-STATEMENTS</a>
    </p>
    </div>

    SECOND CHANGE

    <div style="color:black;font-size:24px;font-family:Raleway;text-align:center;">
    Please supply 1 form of ID or ID LITE from the following list : <a style="color:blue;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/ID-LITE-INTRO.png">ID LITE How & Why</a>
    
    <div style="display: none">
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/PASSPORTS.jpg">PASSPORT</a>
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/LICENCE-PIC.jpg">LICENCE PIC</a>
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/LICENCE-NO-PIC.jpg">LICENCE NO PIC</a>
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/TAX-BILLS.jpg">TAX BILLS</a>
    <a style="color:black;font-size:24px;font-family:Raleway;"  href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/BANK-STATEMENTS.jpg">BANK-STATEMENTS</a>
    </div>
    </div>
    Plugin Author Archetyped

    (@archetyped)

    Apologies for the delayed response, I did not receive a notification that you had posted an update.

    Can you please provide a link to a page that demonstrates what the shortcode form should look like?

    Also, please provide a link to the plugin used to generate the shortcode form.

    Thank you.

    Thread Starter leeersin

    (@leeersin)

    `Hi Archetyped and Happy New Year,

    and no need for apologies I laid off sorting this out over Christmas and New Year but really pleased you have responded now..

    This is the link to the page. It looks as it should because the widget congaing your script is below the WordPress File Upload Pro shortcode under the heading “Examples of ID LITE”.

    https://ipswichdigs.co.uk/booking-form/book-com/guest-book/

    When I move the widget congaing your script above the File Upload widget I loose the formatting on the form.

    I have added an image on google drive so you can see what it looks like when formatting is lost.

    This is the link:

    <a href=”https://drive.google.com/file/d/1rl8OAqB7pD9K9ULDEBsYu1tod8_Ryafb/view?usp=sharing&#8221; rel=”noopener” target=”_blank”>PIC 1</a>

    The plug in generating the form from the shortcode is called:

    Wordpress File Upload Pro

    plugin website:

    <a href=”https://www.iptanus.com/wordpress-plugins/wordpress-file-upload/&#8221; rel=”noopener” target=”_blank”></a>

    Many Thanks,

    Lee

    • This reply was modified 5 months, 1 week ago by leeersin.
    Plugin Author Archetyped

    (@archetyped)

    Hi, if the form formatting you’re referring to is the gradient background and text alignment of the field labels, it is probably due to the fact that the CSS selector used for them is very specific and hard-coded to a specific position on the page.

    This means that any changes to the order of elements on the page can cause the CSS styles to no longer “match” the form labels.

    For reference, this is the full CSS selector used for the first form label:

    
    html > body > div:nth-child(3) > div > div > 
    section > div > div > div > section:nth-child(4) >
    div > div > div:nth-child(2) > div > div > div > 
    div > div > #wordpress_file_upload_block_1 > 
    #wordpress_file_upload_userdata_1_0 > #userdata_1_0 > 
    #userdata_1_fieldwrapper_0 > #userdata_1_field_0
    

    For example, the section:nth-child(4) part of the above selector used to style the form labels targets the 4th child element of the Elementor section containing the form. In your working example, the form is the 4th section element in that group, so the CSS is applied to the the form elements.

    However, when another element is added above it, the form is now the 5th element in that group, so the CSS styles are no longer targeting the right element.

    Using CSS selectors that are as broad as possible while still accurately targeting the desired elements is highly recommended. This allows CSS selectors to be more flexible and not break when a small change is made to the page.

    I’m marking this ticket as resolved, as the issue is not directly related to SLB. If the form’s CSS is generated by a plugin, contacting the plugin’s developer to report the issue is recommended, as there is also a lot of excess CSS (e.g. separate duplicate styles for each form label, etc.) that could be optimized to help your site load faster.

    • This reply was modified 5 months, 1 week ago by Archetyped.
Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.