I have a grid container of dynamic width, with an unknown number of children. These children will have a varying and unknown amount of text within them.
I know it's possible to make the number of columns dynamic:
grid-template-columns: repeat(auto-fill, minmax(100px, 150px));
However the CSS above sets the minimum width of each column to be 100px and the maximum to be 150px. Is it possible to have no maximum and instead let this be defined by the child elements text content?
I tried this but it actually makes the columns smaller:
grid-template-columns: repeat(auto-fill, minmax(100px, auto));
Okay, I have tried grid and it isn't working as expected, you can use flex instead,
.wrapper{
display: flex;
flex-wrap: wrap;
}
/*
you can add some max-width to the children elements
*/
.wrapper > div {
max-width: 50%; /*Any other with will work*/
width: 100px; /* the min width of the div */
}
Related
I'm trying to make a progress bar that can dynamically change part of it's color depending on a slider's value. The closest I can get to that right now is by using:
bar->setStyleSheet(QString("QProgressBar::chunk:vertical {background: qlineargradient(x1:0, y1:0, x2: 0, y2: 1, stop:0 red, stop:0.5 green); border-radius: 9px;}")
+QString("QProgressBar::vertical {border: 1px solid #b4adad; border-radius: 9px; background: #2f2828; padding: 0px; text-align: left; margin-right: 4ex;}"));
I have tried setting the second stop point to slider->value() which takes away the whole style sheet leaving me with a blank progress bar.
I have tried just using CSS code which also takes away the style sheet:
{background: linear-gradient(to bottom, white 0%, blue 25%, blue 100%); border-radius: 9px;}"
I'm confused because I can use CSS to set the background but I can't get it to work unless I use qlineargradient, why is this? What needs to be done in order to implement CSS in a Qt stylesheet without restriction?
Is it possible to set the value of a stop point to the changing value of a slider?
I also attempted using the setStyleSheet function within an if statement so that the stylesheet itself will change depending on the value of the progress bar:
if (bar->value()<slider->value()) {
however this doesn't dynamically change the stylesheet. It seems as though it runs the if statement one time prior to opening the app. Does QT run a while loop that runs through the code continuously while the app is open or am I mistaken?
From https://doc.qt.io/qt-5/qprogressbar.html#valueChanged, there is a signal void QProgressBar::valueChanged(int value) that you can connect to a slot and make the change you want for the QProgressBar sylesheet, for example :
void MainWindow::on_progressBar_valueChanged(int value)
{
if (value >= 0 && value < 50)
ui->progressBar->setStyleSheet("border: 2px solid grey; border-radius: 5px; text-align: center;");
else if (value >= 50 && value < 75)
ui->progressBar->setStyleSheet("background-color: #05B8CC; width: 20px;");
// and so on ...
}
I'm creating an image grid in Qt as seen in these screenshots:
One row
Row break
The problem occurs while resizing the window. The last image breaks onto the next row before it touches the edge of the window. This is even more noticeable when the items are larger. Is it possible to change some padding/marging/spacing to allow the grid to bump into the edge, then break to the next row?
I've tried using this, but it doesn't work:
#listWidget{
background-color: green;
padding-top: 5px;
}
#listWidget::item{
background-color: red;
margin: 0px;
padding: 0;
}
As a side question, I am able to remove the item padding, as seen with the red background, by using this stylesheet:
#listWidget::item{
padding: -1px -3px -4px -4px;
}
Is there a better way to remove the padding from individual items so they are right next to each other? Why doesn't margin: 0; padding: 0; work?
I want to change the background color of the header when I use the QWidget. I tried the following methods but they didn't work:
QTreeWidgetItem * header = ui->treeWidget->headerItem();
header->setBackground(0, QBrush(QColor(185,192,201)));
header->setBackgroundColor(0, QColor(185,192,201));
setStyleSheet("QHeaderView::section { background-color:red }");
I also want to know how to hide the header's dividing line?
I've found a method to change the header's style,but I don't know why my previous method did not work.
QHeaderView::section {
color: black;
padding: 2px;
height:20px;
border: 0px solid #567dbc;
border-left:0px;
border-right:0px;
background: #f9f9f9;
}
Why don't you use only the stylesheet?
YourQTreeWidget QHeaderView::section {
background-color: red; // for the bakcground
border-right: none; // right-border of each section
border-left: none; // left border of each section
}
As you can read here (and as you see in your example) setBackgroundColor does not work for header item (I suspect that this is due to difference between header and row items).
You should to reimplement QHeaderView or to try option described above.
I want to change how the row expands for different breakpoints like below. Basically allow expanded below medium and unexpand above large breakpoint.
<div class="small-expanded large-unexpanded row">
<div class="small-12 columns"></div>
</div>
I know this class is not available but how can I achieve this.
I'm not sure why you'd want to do this, the row automatically expand to the available width, until it reaches the maximum width, and then stays at that width (default max width is 1200px, can be changed on customizer or SASS settings), however we can create those class you're mention.
Code: (assuming you're using the standard breakpoints)
/* small and up */
.row.small-expanded { max-width: none }
.row.small-unexpanded { max-width: 75em }
#media screen and (min-width: 40em) { /* medium and up */
.row.medium-expanded { max-width: none }
.row.medium-unexpanded { max-width: 75em }
}
#media screen and (min-width: 40em) { /* large and up */
.row.large-expanded { max-width: none }
.row.large-unexpanded { max-width: 75em }
}
This code is mobile-first, so, if you have <div class="small-expanded large-unexpanded">, medium breakpoint will take the same styles from the lower breakpoint (small).
Of course, if you've modified framework metrics (breakpoints, max width), you should thange the above code as well.
I'm using this template. I don't want the left & right hand columns available, I need to use the whole space for the main column. I've disabled every module in the left & right columns, the content is correct on the left side starting under pic1 but on the right side I've got this big space on the right side. I've changed all my rightcolumn settings in template.css to width: 0px but still no luck. Does anyone have any other suggestions for me please?
just a first quick guess:
In the index of your template, line 43-44
<?php if($this->countModules('left') xor $this->countModules('right')) $maincol_sufix = '_middle';
elseif(!$this->countModules('left') and !$this->countModules('right'))$maincol_sufix = '_big';
else $maincol_sufix = ''; ?>
here the template detects which modules are active and seems to change the class suffix. Here you need to inject your own. Let me know if you need more help...
EDIT:
Your template uses the following style classes to change the mainbody:
#maincolumn {
float: left;
margin: 0 5px;
overflow: hidden;
padding: 0;
width: 530px;
}
#maincolumn_middle {
float: left;
margin: 0 5px;
overflow: hidden;
padding: 0;
width: 740px;
}
#maincolumn_big {
float: left;
margin: 0 5px;
overflow: hidden;
padding: 0;
width: 967px;
}
The last one should be injected if no left and no right modules are found. You may change the width of this one to see a effect.
In addition to setting the rightcolumn width to 0px, you also need to expand the #maincolumn. since you only want the one column, I would recommend changing width:530px; to width:100%; or something similar. You can also remove the float:left; rule