Remove space between images and text in flowlayout

beautifulcloud

Hello community,

In complement of that thread https://forum.qt.io/topic/147269/position-images-in-a-widget-and-return-to-the-line-on-overflow/6

So I put a flowlayout in a widget. 100 widgets are added containing a horizontal layout with an image followed by a text:

What I would like is to remove the space between the pink image and the text with a red background. So that the text is really side by side of the image.

If anyone has an idea that would be nice I tried to modify the CSS styles or properties of the QWidget without success, here is my code:

    FlowLayout *flowLayout = new FlowLayout;
    flowLayout->setSpacing(0);
    ui->widget->setLayout(flowLayout);
    
    // Add 100 images
    for (int i = 1; i <= 100; ++i)
    {
        // Create a parent widget for each image-number pair
        QWidget *imageNumberWidget = new QWidget;
    
        // Create a QHBoxLayout for each image-number pair
        QHBoxLayout *imageNumberLayout = new QHBoxLayout(imageNumberWidget);
        imageNumberLayout->setSpacing(0);
        imageNumberLayout->setContentsMargins(0, 0, 0, 0);
    
        QLabel *imageLabel = new QLabel;
        QString imagePath = "F:/Programation/C/Sunfade/test/textures/item.gif";
        QPixmap pixmap(imagePath);
        imageLabel->setPixmap(pixmap);
        imageLabel->setContentsMargins(0, 0, 0, 0);
        imageLabel->setStyleSheet("QLabel { margin-right: 0px; padding-right: 0px; }"); // Set right internal margin to zero
    
        // Create a QLabel for the number
        QLabel *numberLabel = new QLabel(QString::number(i));
        numberLabel->setContentsMargins(0, 0, 0, 0);
        numberLabel->setStyleSheet("QLabel { margin-left: 0px; padding-left: 0px; background-color: red;}"); // Set left internal margin to zero
    
        // Add the QLabel to the horizontal layout
        imageNumberLayout->addWidget(imageLabel);
        imageNumberLayout->addWidget(numberLabel);
    
        // Add the parent widget (imageNumberWidget) to the FlowLayout
        flowLayout->addWidget(imageNumberWidget);
    }

Thanks if someone can help

JonB

@beautifulcloud
First, the numbers over 1 digit long sure look like they are showing "curvature". Are you sure you don't have some other CSS style rule somewhere higher up with is setting some border radius?

Then, as ever when you have a problem, start by simplifying. Test with only one widget-type being added. Test the "text" label and the "image" label, alone, separately. Most importantly, when you do this get rid of adding it onto imageNumberWidget which has a imageNumberLayout, add it directly to the flow layout as-is. Then work backward/forward from there.

P.S.

QWidget *imageNumberWidget = new QWidget;

You set the content margins to 0 on your labels/layouts. But this "container" widget has margins too, have you checked whether/set that to 0 as well?

JonB

@beautifulcloud
If you don't get a better answer. Since you do seem to have set everything to 0, and assuming you're sure the GIFs don't have padding themselves, I would look through the code of the flowlayout and see if there is anything there which imposes the gaps/spacing.

mpergand

@beautifulcloud
You can try to set a frame to your labels to help you visualize what's going on.

JoeCFD

@beautifulcloud

try to add text and image to the same label:

auto label = QLabel( "1", this );
QString imagePath = "F:/Programation/C/Sunfade/test/textures/item.gif";
QPixmap pixmap(imagePath);
label->setPixmap(pixmap);
label->setAlignment(Qt::AlignLeft);

beautifulcloud

Hello @JonB,

It's an image 16x16 so it's a square, In doubt I did the same with a png image.
I hadn't thought to look at the code of the flowlayout, I looked but it seems to me that the problem does not come from there

Hello @mpergand

@beautifulcloud
You can try to set a frame to your labels to help you visualize what's going on.

in order to delimit the elements I applied a background-color to each one:

blue for imageLabel (so we can't see it)
red for the text to the right of the image
white for the background widget

the labels seem to have an invisible rounded margin, don't they?

Hello @JoeCFD

I wanted to do what you told me at first but I didn't think it was possible so I went with a widget that would contain two labels.

// Create the label as a pointer
QLabel* label = new QLabel("text display if image doesn't", this);

// Set the label's image
QString imagePath = "F:/Programation/C/Sunfade/test/textures/item.gif";
QPixmap pixmap(imagePath);
label->setPixmap(pixmap);

// Set the label's alignment
label->setAlignment(Qt::AlignLeft);

// Add the label to the layout
flowLayout->addWidget(label);

I tried your code and only the images are displayed

Thanks all for your time and your help, I will search the solution tomorrow

mpergand

@beautifulcloud said in Remove space between images and text in flowlayout:

the labels seem to have an invisible rounded margin, don't they?

Yes, strange, I don't have this:

No margin whatsoever.

JonB

@beautifulcloud
First, the numbers over 1 digit long sure look like they are showing "curvature". Are you sure you don't have some other CSS style rule somewhere higher up with is setting some border radius?

Then, as ever when you have a problem, start by simplifying. Test with only one widget-type being added. Test the "text" label and the "image" label, alone, separately. Most importantly, when you do this get rid of adding it onto imageNumberWidget which has a imageNumberLayout, add it directly to the flow layout as-is. Then work backward/forward from there.

P.S.

QWidget *imageNumberWidget = new QWidget;

You set the content margins to 0 on your labels/layouts. But this "container" widget has margins too, have you checked whether/set that to 0 as well?

beautifulcloud

Hey @mpergand
Thanks for that test, that's the goal I'm looking for
I thought it was a change depending on the versions but no

Actually @JonB the problem was there, since I had put in the css style of the parent widget QWidget I thought that its border would apply only to this one, but I forgot that it was necessary to specify QWidget#id and that caused borders on the child elements.

How to drown in a drop of water

thank you to all of you :)