-
Posts
-
I created a custom dropdown button but BoldGrid keeps inserting <p class=”mod-reset”> on each line of my anchors, which deactivates my dropdown. How do I prevent BoldGrid from messing up my dropdown?
Hi Cheri-
Kudos on creating this custom drop-down button, it looks fantastic!
When you switch back-and-forth between the Text editor and the Visual editor, it will attempt to “fix” any HTML markup, in this case replacing your <br /> tags with <p> tags. I’d fix this by creating some valid markup to replace the list of links with line breaks with an unstyled list:
<div class="dropdown"> <p class=""><button class="btn btn-block btn-pill btn-color-5 dropbtn">Saturday Maps</button></p> <div class="dropdown-content"> <ul style="list-style: none;"> <li><a href="/wp-content/uploads/2020/09/Master-Standard.pdf" target="_blank" rel="noopener noreferrer">M/X STD</a></li> <li><a href="/wp-content/uploads/2020/09/Master-Jumpers.pdf" target="_blank" rel="noopener noreferrer">M/X JWW</a></li> <li><a href="/wp-content/uploads/2020/09/Open-Standard.pdf" target="_blank" rel="noopener noreferrer">Open STD</a></li> <li><a href="/wp-content/uploads/2020/09/Open-Jumpers.pdf" target="_blank" rel="noopener noreferrer">Open JWW</a></li> <li><a href="/wp-content/uploads/2020/09/Novice-Standard.pdf" target="_blank" rel="noopener noreferrer">Novice STD</a></li> <li><a href="/wp-content/uploads/2020/09/Novice-Standard.pdf" target="_blank" rel="noopener noreferrer">Novice JWW</a></li> </ul> </div> </div>
I’m a little confused by this response because I didn’t explicitly use any <br> tags in my original code. Is a <br> assumed because I put each tag on a separate line? I did smoosh the tags together and that stopped the modifications by BoldGrid.
Here’s my original code that BoldGrid was “fixing”.
<div class="dropdown"> <p class=""><button class="btn btn-block btn-pill btn-color-5 dropbtn">Friday Maps</button></p> <div class="dropdown-content"> <a href="#" target="_blank" rel="noopener noreferrer">Premier STD Trial 1</a> <a href="#" target="_blank" rel="noopener noreferrer">Premier JWW Trial 1</a> <a href="#" target="_blank" rel="noopener noreferrer">Premier STD Trial 2</a> <a href="#" target="_blank" rel="noopener noreferrer">Premier JWW Trial 2</a> </div> </div>
Hi Cheri-
Checking out your site again, I do see that the <br /> tags aren’t there any longer, but now seem to be separated with “space” characters,
Either way, the <a> tags will still get targeted by the WordPress “wpautop” function whenever you switch back and forth to the Visual Editor unless they’re wrapped in a valid text element (right now, they’re just in a <div>, which is a visual element).
I still believe using a list is the best way to resolve this issue, because you truly are creating a list of documents in your dropdown, and that will create “valid” markup for your element. However, if using an unstyled list won’t work for you, another possibility may be to use a plugin like Toggle wpautop which will let you disable the wpautop function on a page-by-page basis.
Having been a mainframe programmer all my career (retired now) I forget that interpreted languages will process elements that I think of as things that are just making my code more readable and maintainable, not as elements which impact the final output. I hadn’t explicitly typed in a <br> tag so I didn’t perceive a carriage return as a break. It’s a struggle for me to switch from compiled to interpreted so I am really appreciating the assistance. The code I currently have works fine now, without any insertion of “fixes” by BoldGrid when I switch between the visual and the text editor. I will try your list suggestion as I continue to learn. I like to try all the “wheels” out there that people have already invented. I am constructing a “past trials” page where I want more drop down buttons so I will try it there and see how it goes. Thanks!
I did try out the selection code and it doesn’t exactly meet my goals. It is an interesting solution but I think the audience for this web site would find it confusing. The bulk of my target audience is fairly non-technical. Their goal in accessing the maps will be to either print or download the maps that correspond to their entered classes, usually they will print the maps. They will probably be accessing at least 2 maps, maybe more, depending on how many dogs they’re running at the trial. There will also be a set of competitors who will print/download all the maps. Unless I’ve implemented the code you gave my incorrectly, the selection code leaves the last selection displayed on the screen. For my target audience, that will probably cause confusion. A more dynamic drop down seems a better solution considering my target audience for this site and their level of technological savviness. My goal is to have a simple, accessible site that will be easy for a technologically challenged trial participant (most agility handlers are in the 50-75 years old age range) to use on a mobile device.
- The topic ‘BoldGrid inserting <p class=”mod-reset”> on each line’ is closed to new replies.
