Adding a border in front of text within QTextDocument

I am trying to create a QTextDocument with only a left border around the text. I believe the necessary CSS for this would be:

<div style='
  border-left: 6px solid red;
  background-color: lightgrey;
'> Hello World </div>

However, when implementing this in my Qt code as shown below:

#include <QApplication>
#include <QWidget>
#include <QHBoxLayout>
#include <QTextEdit>

int main(int argc, char *argv[]) {
    QApplication a(argc, argv);
    QWidget *widget = new QWidget();
    auto l = new QHBoxLayout(widget);
    widget->setLayout(l);
    QTextEdit *e = new QTextEdit(widget), *t = new QTextEdit(widget);
    l->addWidget(e);
    l->addWidget(t);

    QObject::connect(e, &QTextEdit::textChanged, [=]() {
        t->setHtml(e->toPlainText());
    });

    widget->show();
}

When entering HTML content, the output is not as expected:

https://i.sstatic.net/Rsn1M.png

The desired output should look like this:

https://i.sstatic.net/MswGr.png

I want to achieve the desired output - Is there something I am missing?

Answer №1

Regrettably, when using Qt rich text in QTextDocument, borders are only supported on tables. Even then, it applies to all borders at once rather than individual sides. https://doc.qt.io/qt-5/richtext-html-subset.html#css-properties

UPDATE: This situation feels reminiscent of crafting HTML for MSIE way back in 1996, but there's almost always a solution... (the CSS provided is actually optional here, as the "required output" image doesn't include padding :).

https://i.sstatic.net/vNDG5.png

<!-- with width=100% the table extends all the way to the right margin -->
<table cellspacing=0 width='100%'>
<tr>
  <td width=6 bgcolor='red'/>
  <td bgcolor='lightgrey' 
      style='padding: 0 4px;'
    >Hello World</td>
</tr>
</table>

Answer №2

For instance,

.h

#ifndef SIDEBARWIDGET_H
#define SIDEBARWIDGET_H

#include <QWidget>

class SidebarWidget : public QWidget
{
    Q_OBJECT
public:
    SidebarWidget();

    void paintEvent(QPaintEvent* e);

};

#endif // SIDEBARWIDGET_H

.cpp

#include "SidebarWidget.h"
#include "qpainter.h"
#include <QRectF>
#include <QColor>

SidebarWidget::SidebarWidget()
{

}

void SidebarWidget::paintEvent(QPaintEvent* e)
{

    QPainter p = QPainter(viewport());
    QPen pen = p.pen();
    QBrush brush = p.brush();
    pen.setBrush(QBrush(Qt::blue, Qt::SolidPattern));
    brush.setColor(Qt::blue);
    brush.setStyle(Qt::SolidPattern);
    p.setPen(pen);
    p.setBrush(brush);

    int rc = document()->rowCount();
    for (int i = 0; i < rc; i++)
    {
        qDebug() << i;
        QRectF rowRect = document()->documentLayout()->blockBoundingRect(i);
        rowRect = QRectF(rowRect.left(), rowRect.top(), 100, rowRect.height());
        p.drawRect(rowRect);
    }
    
    p.end();
    QTextEdit::paintEvent(e);
}

app.cpp

#include "MainAppWindow.h"

#include <QApplication>
#include "SidebarWidget.h"


int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    MainAppWindow window;
    SidebarWidget sidebar;
    window.setCentralWidget(&sidebar);

    window.show();
    return app.exec();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some strategies for efficiently positioning buttons using CSS to prevent unwanted consequences?

Below is the CSS and HTML code, detailing a specific issue. * { box-sizing: border-box; font-family: Georgia, 'Times New Roman', Times, serif; } body { margin: 0; font-family: Georgia, 'Times New Roman', Times, serif; } .topn ...

I specialize in optimizing blog content by omitting the final line within a React framework

https://i.stack.imgur.com/WKOXT.png Currently, I have 4 lines and the 5th line in the current input field. This is my React code snippet: import { FC, useEffect, useState } from "react"; interface BlogWitterProps {} const BlogWitter: FC<B ...

Tips for repairing buttons in the CSS container

The buttons in the CSS search-box are not staying fixed as intended. They should be within the search box, but instead, they are protruding out of the panel. I attempted to utilize z-index, but it did not produce the desired outcome. https://i.sstatic.n ...

Leveraging webpack alongside url-loader for embedding images within React applications

When styling with an inline style and passing in the URL of an image file, I typically do it as shown below: let url = `url(${this.state.logo})` var cardStyle = { backgroundImage: url, backgroundSize: '200px 50px' ...

Ways to center an image within a div using Bootstrap 4

I am currently using Bootstrap version v4.0.0-beta.3 and facing a challenge with aligning an image in the absolute center of a fixed-height div tag. While I have successfully aligned the image horizontally using the mx-auto and d-block classes, I am strugg ...

Is it possible to toggle all parent targets in Bootstrap?

When trying to showcase my point, I believe it is best demonstrated by visiting Bootstrap documentation at https://getbootstrap.com/docs/4.0/components/collapse/ and viewing the "multiple targets section." In this section, you will find three buttons: togg ...

Having trouble with declaring a vector in a C++ header file?

Struggling to find a solution for this issue. I am relatively new to using C++. In my code file, I have noticed that lines 512, 256, 4736, and 448 are all displaying red underlines indicating an error stating 'expecting type specifier'. // Attac ...

Enhance Log functionality by trimming lengthy log messages

Is it possible to limit the length of log messages in boost::log (e.g. to 1000 characters) in order to only display necessary information? This would be beneficial when inspecting variable content where the entire message is not required to understand the ...

Modifying the color of a placeholder in an HTML input using CSS

Version 4 of Chrome now supports the placeholder attribute on input[type=text] elements (and likely other browsers do too). Despite this, the following CSS code does not affect the color of the placeholder text: input[placeholder], [placeholder], *[pla ...

An in-depth look at SIGSEGV errors and how to fix them

In reference to the question at . Upon writing the program and running it on the CodeChef inline judge, I encountered a sigsegv error. I am interested in pinpointing exactly which instruction is causing this error in my code so that I can rectify it effec ...

The navigation on my mobile collapses whenever I use the Hello bar app

I am facing a problem with my Shopify theme. I recently installed an app called "Hello Bar" to show offers on all pages, but it seems to be incompatible with my theme. The developers of the app suggested adding the following code to my CSS file: @media ...

Tips for horizontally aligning a modal with smooth transition effects using Material UI and ensuring it is responsive

Struggling to center a modal with transition using Material UI and facing challenges with responsiveness on small screens, particularly mobile devices. The modal looks good and is centered on smaller screens if no transition is used. However, when a trans ...

Ways to evenly distribute divs into rows

Greetings if this question has already been inquired about, but my search turned up nothing quite like it. My current setup is as follows: .main{ display: inline-flex; flex-direction: row; } <div class = "main"> <div class="sub-div ...

Deactivate hover effect on specific row in Bootstrap hover table

After searching for a solution, I came across this query. However, it did not provide the answer I was looking for. It suggested setting fixed backgrounds on specific rows, but this could potentially disrupt the style if, for example, a bg-gradient is set ...

utilization of insert function with the assistance of a provided const_iterator hint

As I delve into the cppreference map insert operation documentation, I come across a specific use case: iterator insert( const_iterator hint, const value_type& value ); //(since C++11) The hint parameter refers to an iterator pointing to the posit ...

What is the method for sorting course codes in descending order based on numbers?

I'm developing a program to manage a list of records. The user will input multiple records until they enter "END" indicating the end of input. Then, the user can input a student ID and the program should output all records of that student in descendin ...

Tips on customizing the appearance of React rendering components

<div> <h3>{this.props.product.name}</h3> <h3>{this.props.product.code}</h3> {this.renderColors()} <article> <div da ...

Dealing with the overflow issue on Android 4.1 using position: relative and position: absolute

I have a question regarding creating a dynamically filling rounded button. I have successfully created an inner div inside the button with absolute positioning at the bottom. It works perfectly on Chrome webview, but I'm facing issues on Android 4.1. ...

Is there a way to display (PHP for loop variables) within an HTML table using echo?

for ($q = 1 ; $q < 7 ; $q++ ) { echo $q ; echo $row; } While the above code functions properly, I am interested in echoing two rows as shown in the image below: https://i.stack.imgur.com/7KmUY.jpg I prefer not to use another for loop. Is there a way t ...

A step-by-step guide on making an animation series with html and css keyframes

I've been working on creating a captivating animation using HTML and CSS keyframes, but I seem to have hit a roadblock. Despite trying different rotations and transforms, I can't seem to achieve the desired effect depicted in the image below. The ...