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;
}
Related
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);
}
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.
A client is requiring us to add a vertical line in between our angular material tabs. While this appears to be frowned upon, we cannot figure out how to accomplish this.
Here is an example:
Angular Material tabs
We've tried the angular md-divider but this only appears to work for vertical lists that need a horizontal line. Any help is appreciated.
It would be a mistake to add markup just for styling, in my opinion. I'd either use borders or pseudo-elements.
.md-tab {
border-right: 1px solid red;
}
Demo 1
.md-tab:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 3px;
background: green;
}
Demo 2
To hide the last tab's border you could add a class using Angular's $last and target that (or add it manually if you're not using ng-repeat).
ng-class="{'last-tab-class': $last}"
.md-tab.last-tab-class {
border-right: none;
}
add custom style to md-divider
<md-divider class="vertical-divider"></md-divider>
.vertical-divider {
border-top-width: 0;
border-right-width: 1px;
border-right-style: solid;
height: 100%;
}
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;
I am creating a full width grid of images that use media queries to change how many columns of images there are. You can see a working demo here: http://vitaminjdesign.com/grid/
Using img{max-width: 100%} the images stretch to the width of its container. This works great, and the demo is working. As you can see, there should be a 1px space between each image. I am using the border-box model so the space is created by using padding-right.
BUT, if you resize the window, you will notice that the 1px margin between images sometimes change, and appear to have these inconsistent amounts of white space between/below images.
Upon inspection of each image, the browser is rendering the images at slightly different sizes (1px difference, but no more). This creates these uneven lines. The question is, if every image is EXACTLY the same size, how are they being rendered at slightly different sizes (which is turn causes this layout problem)? If you inspect each image, you will notice that the sizes are sometimes different, and sometimes the same (depending on the screen width).
CSS Below:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#work{width:100%; clear:left;}
#work li{width:20%; height:auto; padding-right: 1px; padding-bottom: 1px; float:left; position: relative; transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;}
#work li a{display: block; position: relative; width: 100%; height: auto;}
#work li img{display: block; max-width: 100%; height: auto; }
I will not list the media queries here, but all they do is change the width of the list items.
Any thoughts as to why this is happening and how I can fix it?
The issue is on your media-queries and nth-child selectors. But I'm not really sure why setting border-right: none; is adding 1px of height for the grid. To solve the problem just delete the border-right: none; inside this selectors:
#work li:nth-child(3n+3) {
border-right: none; //Delete this
}
#work li:nth-child(2n+2) {
border-right: none; //Delete this
}
Removing the margin attribute on the * selector solves the problem for me.
* {
-moz-box-sizing: border-box;
font-weight: normal;
padding: 0;
}
The problem is because each list item has a calculated width. BEcause all of the columns EXCEPT the last column have a padding-right / border-right, they effectively have a different width, thereby making the image a different width/height. By removing the rule for zero padding/border on the last item of the column, all of the images have the exact same width and height.