Hi i am using some bower packages but there are some css rule defined like below:
.rn-carousel-indicator {
width: 100%;
text-align: center;
height: 20px;
background-color: black;
I want to override it into my common.css to remove the background-color, I can successfully set it as red but it cannot apply with none:
.rn-carousel-indicator {
background-color: none;
}
Anyway I can do with this? Thanks a lot!
background-color:
The background-color CSS property sets the background color of an element, either through a color value or the keyword transparent.
So none is invalid, you should use:
background-color: transparent;
You have a couple of options
background: none;
or
background-color: initial;
Note, initial has some dodgy browser support.
(No support in IE apparently)
background-color: none is invalid. you have to use background color transparent property.
For example:
background-color: transparent;
Related
I inspected the code in the browser inspect. I know which specific property needs to be changed but I thing I need to point its key to a different class name.
I would like to change the overflow property to hidden and i would mike to remove the border and border-radius.
.dzu-dropzone {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-height: 120px;
overflow: scroll;
margin: 0 auto;
position: relative;
box-sizing: border-box;
transition: all .15s linear;
border: 2px solid #d9d9d9;
border-radius: 4px;
}
If it is not already created, create index.scss file in your project repo.
there , add the code like this:
.dzu-dropzone {
overflow: hidden;
}
This will override the css while rendering. You can do the same for the border properties too.
Youc can create two CSS files, a basic.css file with some minimal styling, and a more extensive dropzone.css. I added both and the style of my component was overriden.
I'm working on a react JS app , and I'm using react-modal package . I don't know how to make the outside part of the Modal ,when it is opened, completely transparent .
This is the props that I pass it to the Modal :
<Modal
onRequestClose={() => {
this.setState({ modalIsOpen: false });
}}
isOpen={modalIsOpen}
className="Modal"
></Modal>
This is the CSS code :
.Modal {
text-decoration: none;
user-select: none;
align-self: center;
justify-content: center;
align-items: center;
border: 2px solid #040408;
border-radius: 30px;
background-color: white;
margin-top: 10%;
margin-bottom: auto;
width: 20.8%;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
outline: none;
padding-left: 2px;
padding-right: 2px;
}
And this is the result that I get :
I want my modal to look just like a popup.
Do you mean background of model to be transparent? like the grey part of picture? in this case you should put it inside another div.
<div className='transparent'><Modal/></div>
Otherwise I don't understand the question.
Maybe you want to make the div fixed and max size, so it cover all the screen.
I am using antd table for reactjs application.
I created Sandbox here for you to make changes.
Can anyone help me make rows with rounded borders like below image?
Expected :
I have tried adding rowClassName={() => "rowClassName1"} with border related css but borders won't show up.
Try this approach,
.rowClassName1 td:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.rowClassName1 td:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
Working Demo :- https://codesandbox.io/s/antd-table-rounded-border-row-forked-9u4x9?file=/src/App.js
#UKS's answer solved the problem for me and able to make rows with rounded borders.
If someone wants to change header style as well with rows.
.monitorTableStyle .ant-table-container .ant-table-content table .ant-table-thead tr th:first-child{
border-top-left-radius: 15px !important;
border-bottom-left-radius: 15px !important;
}
.monitorTableStyle .ant-table-container .ant-table-content table .ant-table-thead tr th:last-child{
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
The modal's text is rendered correctly, however the background is rendered only within the range of the screen size, when you scroll it's transparent.
I have noticed that the background is rendered only when some action happens like click on a button on that modal or even when i open the Developer Tools.
This works as expected in other browsers though.
Here is the modal container's css
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
overflow: auto;
background-color: rgba(0,0,0,.7);
cursor: pointer;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
And the modal itself
background-color: ${colors.white};
display: inline-block;
margin-top: 50px;
text-align: left;
cursor: initial;
Any ideas what may be the case with IE's rendering?
I found a way to sort this out.
Inside this modal I am actually rendering another div (which has different composition of text and actions in different pages) that inherits this css:
background-color: ${colors.white};
display: inline-block;
margin-top: 50px;
text-align: left;
cursor: initial;
But apparently when you scroll down and as the new content loads the style does not apply. After adding once again background-color: ${colors.white}; to the div rendered inside the modal it's all looking nice.
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.