React component size changes in print window - reactjs

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.

Related

react-dragula only working at high speed?

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);
}

Trying to overwrite default text in Dropzone react

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.

Modal not rendering correctly in IE

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.

How to remove vertical spaces between absolute positioned elements in React-Motion

So, I am trying to create a draggable list with React-Motion in my project.
However, I couldn't figure out a way to remove the spaces between the list (see the picture below). I read somewhere that it is due to the nature of absolute elements in HTML.
// Here is a snippet of the CSS styles
// View the entire codes by clicking the link below
.demo8-item {
position: absolute;
width: 320px;
height: 40px;
overflow: visible;
pointer-events: auto;
transform-origin: 50% 50% 0px;
border-radius: 4px;
color: rgb(153, 153, 153);
line-height: 40px;
padding-left: 32px;
font-size: 24px;
font-weight: 400;
background-color: rgb(255, 255, 255);
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.demo8-outer {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
display: -webkit-flex;
-webkit-justify-content: center;
-webkit-align-items: center;
}
I have tried to inspect the HTML elements to find the culprit, but to no avail. I couldn't find the element that is causing those spaces; setting margin and padding to 0 doesn't do anything!
My question is, is there a way to remove those spaces without breaking the animation (i.e. by converting it to inline-block, etc.)?
Thank You.
Link to sandbox
You can control the height used by spring() configurations
// `y` prop, here is how the height is calculated
y: spring(order.indexOf(i) * 100, springConfig),
Change 100 to something like 70 or whatever you like:
y: spring(order.indexOf(i) * 70, springConfig),

BootstrapUI: Popover cut off by page end

These are AngularUI Bootstrap popovers, which are written in Angular instead of jQuery.
I have a popover in a plnkr that is working, but it's positioning is messed up. It is being cut in half by the page.
When I inspect the popover's CSS, I see some code which doesn't make any sense to me. I understand what it's doing, but where are these element.style properties coming from? They seem to be the problem.
element.style {
top: -139px;
left: 112px;
display: block;
}
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
line-break: auto;
}
There isn't even a scroll option available. Is there a way to position a popover so that the entirety of it appears on the page, regardless of where the button is?
In the element where you whant your popover displayed, add the following directive:
popover-append-to-body="true"
Like this:
<small popover="{{form.descripcion}}" popover-trigger="mouseenter" popover-append-to-body="true">
[{{form.status}}]
</small>
The element styling is set in the source of UI Bootstrap in the tooltip section.
Tooltips and popovers are not meant to store that much data which is why they just center it over the element that it is attached to.
EDIT
For this specific example you can add this CSS:
.popover-parent + .popover {
top: 0 !important;
}
.popover-parent + .popover .arrow {
top: 15px !important;
}
The most dynamic way would be to hook into the event that shows the tooltip and calculate the position of the popover then.

Resources