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.
Related
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 */
}
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'm having an issue with a transition I'm using to slide a panel in and out.
Please take a look at the following jsbin http://jsbin.com/uvejuj/1/
Notice that when i click the toggle button the first time the transition occurs immediately.
However if i click the button again to close then the transition delays the amount of time of the transition before it executes.
What is causing the delay on close out and how can i get rid of it?
Thanks
Fixed JS Bin
Fix delay solution:
Put cubic-bezier(0, 1, 0, 1) transition function for element.
.text {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
&.full {
max-height: 1000px;
transition: max-height 1s ease-in-out;
}
It's because you're animating between 0 and 1000px max height but your content is only about 120px high. The delay is the animation happening on the 880 pixels that you can't see.
Either set max-height to the known height of your content (if you know it - example: http://jsbin.com/onihik/1/) or try a different method. Maybe something like https://stackoverflow.com/a/6486082/2619379
I fixed it in my case by using normal transition for opening (from max-height 0px to max-height 500px) BUT by using an animation when closing, starting from max-height 50vh.
This way the delay is not from shrinking from 5000px to the actual height of your content.
The only delay that can appear now is if your content is less than 50% of your screen height, but that works buttersmooth in my cases.
Here's my magic (scss format):
.slide-open{
max-height: 0;
overflow: hidden;
&:not(.open){
animation-name: shrink;
animation-duration: .3s;
}
&.open{
max-height: 5000px;
transition: max-height .9s ease-in-out;
}
}
#keyframes shrink {
0% { max-height: 50vh; }
100% { max-height: 0; }
}
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