question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Possible bug] Unexpected HTML rendering of help text.

See original GitHub issue
  • Package version: 1.9.2
  • Django version: 2.2.14
  • Python version: 3.8.3

Description

When rendering a help_text field that is an unordered list <ul>, the whole list is rendered between two <p> tags.
The first of which has the expected ID and class <p id="hint-id-password1" class="help-block"></p> but is closed before the actual list is rendered; while the second is an empty paragraph tag <p></p>.
I would assume that the expected behaviour is rendering it inside the helper block (first tag).
The difference is visible when trying to customise the CSS for class help-block, as shown in the screenshot below.

Details

  • Example Django Crispy Forms code
    <div class="row">
        <div class="col-md">{{ form.password1|as_crispy_field }}</div>
    </div>
    
  • Screenshots

3

  • Actual HTML generated
      <p id="hint_id_password1" class="help-block"></p>
      <ul>
        <li>Your password can't be too similar to your other personal information.</li>
        <li>Your password must contain at least 8 characters.</li>
        <li>Your password can't be a commonly used password.</li>
        <li>Your password can't be entirely numeric.</li>
      </ul>
      <p></p>
    
  • Expected HTML
     <p id="hint_id_password1" class="help-block">
       <ul>
         <li>Your password can't be too similar to your other personal information.</li>
         <li>Your password must contain at least 8 characters.</li>
         <li>Your password can't be a commonly used password.</li>
         <li>Your password can't be entirely numeric.</li>
       </ul>
     </p>

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
smithdc1commented, Dec 17, 2020

I think it defaults to the bootstrap template pack (that’s bootstrap version 2).

Could you try updating the setting to bootstrap4 and see if that helps?

0reactions
smithdc1commented, Dec 17, 2020

Glad that worked. 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

NetSuite Advanced PDF/HTML Rich text rendering
I have got a field defined as a rich text field and that's causing any unexpected error when printing picking tickets.
Read more >
Handling common HTML and CSS problems - MDN Web Docs
Try this simple example: Use this page, or another site that has a prominent heading or other block-level element.
Read more >
8 common React error messages and how to address them
This article will help you understand these details by going over some of the most common React error messages and explaining what they...
Read more >
React will not render tbody components. Returns ... - GitHub
I have 3 components: a Tbody component which renders a collection of DataRows (representing ... ... This probably means the DOM was unexpectedly...
Read more >
A Story of a React Re-Rendering Bug - Engineering Blog
The input field is a text input, and event handlers for focus and ... we know the button gets re-rendered unexpectedly, and the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found