So I have the following CSS that is supposed to apply between 600px and 900px screen sizes using MUI's breakpoints
enter image description here
The only problem is that the style isn't applied at all on all the resolutions:
enter image description here
enter image description here
Though the following styling "color: theme.palette.primary.main" is working fine
What could be the problem?
I'm importing the Theme as follows: import { Theme } from "#mui/material/styles"
and using it like this:
enter image description here
Related
I know we can adjust orientation of print page on widow by below CSS code
#media print {
#page {
size : landscape
}
}
But after I implement this code with import from 'print.css',
Chrome hides the selection option of layout and fixes to only landscape.
Because of this phenomenon, other pages which don't need to adjust their layout are forced to print out with the landscape option.
Is there any way to set only the targeted page printed out horizontally?
Like can we remove CSS option right after printing out the targeted page is printed out or target a specific area with id or class name?
I have been suffering from this problem for almost 1 week :(
the picture of code, in "content" property, it's value is a shape!
,
as you see in above image, specific part of my code!
I have style sheet in a project (that has been written before by another) that it have some css codes, and inside that, like bellow, have a property that, inside its value, it shows icon image!
i cant understand that, how inserted/created that!
my code:
.o-icon--close:before {
content: "";
}
my problem:
how he/she has written/created that icon shape inside CONTENT property.
it isn't a copy/paste an icon shape.
it isn't a text code!
as here isn't IDE, it shows a vertical rectangle, but in IDE it is shape of icon itself! like a music sign or what ever.
i know that, for CONTENT value, we can use fontawesome codes or other texts, but i can't understand how insert icon itself as a shape!
My app features a progress bar which background and thumb Image need to be changed. I found that the thumb image could be changed via a constant in the designer but which I could not find in the #Constants paragraph of the page on CSS selectors.
I tried to change the slider UIID to the one I created in the css file like this
MyStyle {
background-image: url(pics/whatever.png);
cn1-background-type: cn1-image-scaled-fit;
cn1-source-dpi: 320;
}
but only the image appears I can't see the progress indicator (eg mySlider.setProgress(50)).
Can it be done and if so how ?
Please note : I read mission 2 of CN1 bootcamp about CSS styling but could not find slider styling.
EDIT September 18th 2017
Following Shai's advice, I set the MyTheme and MyThemeFull with different background images. Indeed MyTheme is always drawn completely in the background and MyThemeFull is drawn bit after bit while the progress is increasing. So when the progress reaches 100% MyThemeFull background image is shown completely.
The cursor (thumb) image can be set via Slider.setThumbImage().
Any help or links to resource material appreciated ;-)
Slider has two UIID's: Slider & SliderFull. Which are drawn one on top of the other to produce the slider effect.
If you change the UIID they become MyStyle & MyStyleFull and you need to customize both.
I have some high-res images in a gallery on my site, and all I want some sort of animation like what can be found at ajaxload.info, to display in place of my image until it is fully loaded. Some its suggest its as simple as adding something like this to your css:
img { background:url('../images/ajax-loader.gif') center center no-repeat;}
Well for one this adds this background image to my transparent 'spacer.gif' resulting in the loading image showing up where my spacer is. However this 'method' doesn't even work to begin with. When I view the high-res images they still load from top to bottom, and I don't even see the loader.gif. Any help? I thought there was information on this everywhere, but for the life of me I can't find it.
just give all the high res images a class and then in the css use the class name instead of the global img tag to have the background set to.
If you use jquery to load the images then the images won't load from the top down but will only appear when it's fully loaded, so the background loader image will be visible and once the image has fully loaded and is displayed the loader will be covered. This method works pefectly as it's so simple, you were probably just missing something out.
Is it possible to stretch the background image.
Actually I have a image of size 320X480, I want to use this image as background for a QWidget screen with size 360X640.
I tried with the followings:
1). Here the image gets stretched for the screen but a button with another image is loaded along with the Main screen image:
ui->MainScreen->setStyleSheet("border-image: url(:/images/Main-screen.png);");
2). Here the image is not stretched, but displayed as tiles:
ui->MainScreen->setStyleSheet("background-image: url(:/images/Main-screen.png); border: none");
ui->MainScreen->setSizePolicy(QSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred));
ui->MainScreen->setBackgroundRole(QPalette::Background);
Any suggestions for this....!
Thanks...
I think the reason that your button is getting the same image as the background is because style sheets are applied to child widgets too (I think). After doing the same code you used in #1, try setting the button's style sheet to something else. The child's style sheet should override the parent's style sheet.
Try the following:
ui->MainScreen->setStyleSheet("QMainWindow {border-image: url(:/images/Main-screen.png);}");
This tells Qt to change the background image of all of the QMainWindows in the child tree. from ui->MainScreen. If you do not specify the class type or object name, no filter will be applied, and every child will get the background image.
QWidget#QMainWindow { style; }
#subclass after mainclass (QWidget) sets style to JUST the subclass
It will do exactly what your trying to do.