I am new to React and working on improving my skills. My question is the following:
What is the difference bettwen
<button className={classes["button--alt"]}>Close</button>
and
<button className={classes.button}>Order</button>
for accessing the properties from the css file.
.actions button {
font: inherit;
cursor: pointer;
background-color: transparent;
border: 1px solid #8a2b06;
padding: 0.5rem 2rem;
border-radius: 25px;
margin-left: 1rem;
}
.actions button:hover,
.actions button:active {
background-color: #5a1a01;
border-color: #5a1a01;
color: white;
}
.actions .button--alt {
color: #8a2b06;
}
.actions .button {
background-color: #8a2b06;
color: white;
}
I am stuck and don't seem to figure this out if anybody can give me a hint or a page or something I would highly appreciate thank you!
Basically, the dash - doesn't allows the class object to access the property directly using the dot operator such as using classes.button--alt so we access it using the alternate object key syntax which is using classes["class-key"]
Related
I am fairly new to CSS and I can't seem to figure out why my editors are responding the way they are to float: left. I am trying to get the below editors next to each other horizontally:
With the following CSS:
.form-container {
margin: 0 auto;
max-width: 95%;
background: white;
border-radius: 10px;
display: flex;
height: 50hv;
flex-direction: column;
border: 1px solid #ddd;
}
.left-editor, .right-editor {
margin: 10px;
}
Once I add float: left to .left-editor, .right-editor the editor disappears and looks like this:
Any idea as to why?
EDIT: Here's an image of my code in action:
EDIT 2: I'm curious if it's the flex box that's breaking this code? Is dragula designed to work with flex containers?
I have the following container:
#myDisplay{
display: flex;
justify-content:left;
overflow:none;
flex-wrap: wrap;
flex-grow: 0;
position:absolute;
top: 2.68518519%;
left:9.96767241%;
width: 90.03232759%;
height:97.31481481%;
and I'm adding 3 rows of 7 items inside this container with react:
#myCard{
color:var(--txtcolor);
flex-shrink: 0;
width:12.44763614549592%;
height: 31.29381571%;
background: var(--contentbg);
border: 3px solid var(--drkblue);
box-sizing: border-box;
border-radius: 53px;
margin-right: 1.7658573%;
padding-left: 1%;
padding-right:1%;
font-size: 0.875rem;
And I'm using the following dragula code:
const dragulaDecorator = (componentBackingInstance) => {
if (componentBackingInstance) {
let options = { };
Dragula([componentBackingInstance], options);
}
};
and declaring my display box like this:
<div id="myDisplay" ref={dragulaDecorator}>
{renderCard(1)}
{renderCard(2)}
{renderCard(3)}
{renderCard(4)}
{renderCard(5)}
{renderCard(6)}
{renderCard(7)}
{renderCard(8)}
{renderCard(9)}
{renderCard(10)}
{renderCard(11)}
{renderCard(12)}
{renderCard(13)}
{renderCard(14)}
{renderCard(15)}
{renderCard(16)}
{renderCard(17)}
{renderCard(18)}
{renderCard(19)}
{renderCard(20)}
{renderCard(21)}
This code works... mostly. I can drag around my cards and they will nudge the others around as intended. But it only works when I drag my items around very fast around the screen. Which allows me to never accurately place them and it's really just as good as not working. If I drag an item slowly over others, absolutely nothing happens. Does anyone have experience with this package to shed some light?
EDIT 3: I forgot I have this CSS which I copied from the website. I don't fully understand it but this may be the problem?
.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 9999 !important;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.gu-hide {
display: none !important;
}
.gu-unselectable {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
.gu-transit {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
i'm trying to make a react project with styled components, and i want to use a radio button, but when i try to add css to the radio when it's checked it didn't work as i expected, can you help me?
const RadioGroup = styled.div`
border: solid 3px #332f35;
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: lighten(#332f35,40%);
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
input[type=radio]:checked + label{
color: lighten($bg,60%);
background: #ff9000;
}
input[type=radio] + label {
border-left: solid #a1a1a1;
}
`
this is the styled component i'm trying to use in the Radio button, thanks guys!
I wrote program using GTK3 with css styling and it works perfect on my KDE.
But problem is that on ubuntu and windows 10 styling only works partially.
I have css file like this:
window {
background-color: white;
}
button {
border: none;
color: white;
padding: 15px 32px;
text-decoration: none;
font-size: 16px;
background-color: #555555;
}
Everything works except changing background of buttons.
It's how I load css:
GtkCssProvider *provider = gtk_css_provider_new ();
gtk_css_provider_load_from_path (provider, "styles.css", NULL);
gtk_style_context_add_provider_for_screen(gdk_screen_get_default(),
GTK_STYLE_PROVIDER(provider),
GTK_STYLE_PROVIDER_PRIORITY_USER);
How can I make it work?
I found solution:
window {
background-color: white;
}
button {
border: none;
padding: 0px;
text-decoration: none;
font-size: 16px;
}
button > label{
padding: 15px 32px;
background-color: #555555;
color: white;
}
You can change by writing css on ~/.config/gtk-3.0/gtk.css.
button.titlebutton.close:backdrop {
background-color: transparent;
}
button.titlebutton.close {
background-color: #theme_selected_bg_color;
}
References:
https://github.com/nana-4/materia-theme/issues/370#issuecomment-481256130
https://asukiaaa.blogspot.com/2022/07/change-color-of-close-button-of-ubuntu2204.html
So this is my problem, I am trying to print some components in React using window.print, my components have defined sizes say 5cm x 5cm, I have hidden all other components in the print page (note that the styling of the whole page is somehow complex to post here), the problem is that my components get resized when on the print page. I have looked a lot but nothing has worked for me.
Note that when I tested the same print in a different page (with no complex styling) it worked fine. So is there any way to pass the styles to the print window or "Override" the styling so that my components get rendered correctly?
Thanks.
EDIT: Here is my CSS. This is working fine in a fresh app so there must be something I used messing things up, I removed all #media print from Bootstrap CSS files but no luck.
I tried to put the code inside as well as outside the #media print but no luck as well.
As far as I know media should render real physical lengths and units, any help would be appreciated.
Thanks again
.print-only {
display: none;
}
#media print {
#page {
margin: 0;
size: a4 !important;
}
body {
margin: 0.5cm !important;
padding: 0;
}
.print-only {
margin-top: 20px;
display: block;
}
.no-print {
width: 100%;
margin: 0px;
display: none;
}
.Container {
position: relative;
display: block;
border: 3px solid black;
width: 6in !important;
height: 2in !important;
margin: 0;
padding: 0;
text-align: start;
}
.labels {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 6pt;
font-style: normal;
font-variant: normal;
height: 13px;
}
.container2 {
height: 39px;
font-size: 8px;
font-weight: 550;
position: absolute;
top: 20px;
right: 1in;
line-height: 13px;
text-align: center;
}
}
Recently, I've encountered with the same issue while designing a print template in React. I was totally wrong in my understanding that whatever styles I write in my CSS files will apply. Then I found there is certain semantics while are required to be followed while designing an HTML print template.
Take a look at this link. This will be very helpful for your design.