Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. QTextEdit does not apply css to html table
Forum Updated to NodeBB v4.3 + New Features

QTextEdit does not apply css to html table

Scheduled Pinned Locked Moved Unsolved General and Desktop
2 Posts 2 Posters 438 Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • apalomerA Offline
    apalomerA Offline
    apalomer
    wrote on last edited by apalomer
    #1

    ![alt text](image url)I am using QTextEdit to display some markdown content. I am using QT version 5 and cannot move to 6 to use QTextEdit.setMarkdown. For achieving this, I convert the markdown to html and then display the html usnig the QTextEdit as showin in this example:

    from markdown import markdown
    from markdown.extensions.tables import TableExtension
    
    from PyQt5.QtCore import QSize
    from PyQt5.QtWidgets import QApplication, QTextEdit
    
    if __name__ == "__main__":
        # Application
        app = QApplication([])
    
        # Display markdown
        text_edit = QTextEdit()
        text_edit.setReadOnly(True)
        text_edit.setMinimumSize(QSize(800,600))
        style = """
                table {
                    border: 5px;
                    width: 100%;
                }
                h1 {
                  background-color: black;
                  color: white;
                }
                h2 {
                  background-color: yellow;
                  color: red;
                }
                """
        text_edit.document().setDefaultStyleSheet(style)
    
        # Markdown
        markdown_text= "# My markdown\n" \
                       "## My subheader\n" \
                       "\n" \
                       "this is the text followed by bullets\n" \
                       "\n" \
                       "- Point 1\n" \
                       "- Point 2\n" \
                       "- Point 3\n" \
                       "\n" \
                       "And now a table:\n\n" \
                       "|Col 1|Col 2|Col 3|\n" \
                       "|---|---|---|\n" \
                       "|Col 1 content|Col 2 content|Col 3 content|\n" \
                       "|Col 1 content 2|Col2 content 2|Col 3 content 2|\n"
        html_text = markdown(markdown_text, extensions=[TableExtension(use_align_attribute=True)])
        text_edit.setHtml(html_text)
    
        # Show
        text_edit.show()
        app.exec()
    

    Which produces:
    Screenshot from 2023-11-07 17-35-31.png image url)

    As you can appreciate, I can add a CSS style to the document (h1 and h2) in the QTextEdit. However, the table part of the CSS is not being applied (there is no border). According to Qt documentation the table properties that I am using are supported. Any idea on what can I do to apply the table style?

    jeremy_kJ 1 Reply Last reply
    0
    • apalomerA apalomer

      ![alt text](image url)I am using QTextEdit to display some markdown content. I am using QT version 5 and cannot move to 6 to use QTextEdit.setMarkdown. For achieving this, I convert the markdown to html and then display the html usnig the QTextEdit as showin in this example:

      from markdown import markdown
      from markdown.extensions.tables import TableExtension
      
      from PyQt5.QtCore import QSize
      from PyQt5.QtWidgets import QApplication, QTextEdit
      
      if __name__ == "__main__":
          # Application
          app = QApplication([])
      
          # Display markdown
          text_edit = QTextEdit()
          text_edit.setReadOnly(True)
          text_edit.setMinimumSize(QSize(800,600))
          style = """
                  table {
                      border: 5px;
                      width: 100%;
                  }
                  h1 {
                    background-color: black;
                    color: white;
                  }
                  h2 {
                    background-color: yellow;
                    color: red;
                  }
                  """
          text_edit.document().setDefaultStyleSheet(style)
      
          # Markdown
          markdown_text= "# My markdown\n" \
                         "## My subheader\n" \
                         "\n" \
                         "this is the text followed by bullets\n" \
                         "\n" \
                         "- Point 1\n" \
                         "- Point 2\n" \
                         "- Point 3\n" \
                         "\n" \
                         "And now a table:\n\n" \
                         "|Col 1|Col 2|Col 3|\n" \
                         "|---|---|---|\n" \
                         "|Col 1 content|Col 2 content|Col 3 content|\n" \
                         "|Col 1 content 2|Col2 content 2|Col 3 content 2|\n"
          html_text = markdown(markdown_text, extensions=[TableExtension(use_align_attribute=True)])
          text_edit.setHtml(html_text)
      
          # Show
          text_edit.show()
          app.exec()
      

      Which produces:
      Screenshot from 2023-11-07 17-35-31.png image url)

      As you can appreciate, I can add a CSS style to the document (h1 and h2) in the QTextEdit. However, the table part of the CSS is not being applied (there is no border). According to Qt documentation the table properties that I am using are supported. Any idea on what can I do to apply the table style?

      jeremy_kJ Offline
      jeremy_kJ Offline
      jeremy_k
      wrote on last edited by
      #2

      @apalomer said in QTextEdit does not apply css to html table:

      ![alt text](image url)I am using QTextEdit to display some markdown content. I am using QT version 5 and cannot move to 6 to use QTextEdit.setMarkdown.

      QTextEdit.setMarkdown was introduced in Qt 5.14. If you're using something older and have the option to upgrade, the 5.15 series is worth a look. Maybe it will help, or maybe it will introduce a new problem.

      As you can appreciate, I can add a CSS style to the document (h1 and h2) in the QTextEdit. However, the table part of the CSS is not being applied (there is no border). According to Qt documentation the table properties that I am using are supported. Any idea on what can I do to apply the table style?

      QTextDocument's html and css capability is pretty limited, and frequently involves a conversion from the input to what is actually used by the widget. Look at the html being generated from the markdown, and at the html that QTextEdit.toHtml() returns. There may be a more specific css rule that is automatically applied.

      Asking a question about code? http://eel.is/iso-c++/testcase/

      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved