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),
Related
I am trying to implement font-awesome icons with social media links, but for the uncertain reason, icons are not clickable and do not respond to transformation. Any ideas about how to fix it?
Here is the project in codesandox:
https://codesandbox.io/s/under-construction-7g68z
You can just give the #outerCraneContainer a z-index:-1
#outerCraneContainer {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
overflow: hidden;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
box-shadow: inset 0 -60px 0 -30px #ff6347;
z-index:-1;
}
to push it behind the other elements
the problem is in your #outerCraneContainer styles, they cover the entire page (including the links), that's why you can not press any link.
Try to set #outerCraneContainer height to height: 200px; instead of 100%.
you have div with id outerCraneContainer which is displays over your icons and thus perventing them from being click.
solution: remove position: absolute; from app.css under
#outerCraneContainer {
position: absolute; //remove this
width: 100%;
height: 100%;
bottom: 0;
overflow: hidden;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
box-shadow: inset 0 -60px 0 -30px #ff6347;
}
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.
I have a pretty basic flex setup and, for whatever reason, the div in question won't vertically center inside its parent tag. You can see the isolated test case below.
.likeness-rank-table {
border-radius: 3px;
margin-bottom: 20px;
display: block;
}
.likeness-rank-table .col {
box-sizing: border-box;
text-align: center;
position: relative;
flex: 1;
max-width: 20%;
min-height: 50px;
display: flex;
flex-wrap: wrap;
}
.likeness-rank-table .col .col-inner {
flex: 1;
align-items: center;
justify-content: center;
height: 150px;
}
.likeness-rank-table .likeness-rank-table-body {
display: flex;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border: 1px solid #a2a5a7;
}
.draggable-tags .draggable-tag {
display: inline-block;
float: left;
width: 20%;
margin-bottom: 5px;
}
.draggable-tag {
text-align: center;
padding: 0 15px;
box-sizing: border-box;
}
.draggable-tag .draggable-tag-inner {
position: relative;
padding: 10px 0;
background-color: #63b3ce;
color: #fff;
}
<div class="likeness-rank-table">
<div class="likeness-rank-table-body">
<div class="col">
<div class="col-inner droppable">
<div class="draggable-tag ui-draggable">
<div class="draggable-tag-inner">
This Blue Box Should Be Horizontally and Vertically Centered Inside The Big White Box But It's Not
</div>
</div>
</div>
</div>
</div>
</div>
Here's a codepen to see it:
http://codepen.io/trevorhinesley/pen/grQKPO
There are certain flex properties that are applicable only on flex items, while others are only applicable on flex containers.
The align-items and justify-content properties apply only to flex containers. Yet, you are using them on a flex item...
.likeness-rank-table .col .col-inner {
flex: 1;
align-items: center;
justify-content: center;
height: 150px;
}
... so they are being ignored.
You need to add display: flex to the rule above. That will get align-items: center to work.
However, justify-content: center will continue to fail because the parent has a max-width: 20% limiting horizontal movement.
.likeness-rank-table .col {
box-sizing: border-box;
text-align: center;
position: relative;
flex: 1;
max-width: 20%; /* limits horizontal centering of child element */
min-height: 50px;
display: flex;
flex-wrap: wrap;
}
So, apply the horizontal centering to the parent another level up.
.likeness-rank-table .likeness-rank-table-body {
display: flex;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border: 1px solid #a2a5a7;
justify-content: center; /* new */
}
Revised Codepen
Here's a useful list of flex properties broken down by parent and child: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You need to #include flex on your col-inner (line 40 of your scss), as align-items and justify-content only work on the flexbox element (see this handy guide).
Then to align the .col element within the big white box you can add justify-content: center to .likeness-rank-table-body on line 47 of your scss.
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.
I have a grid which has long phrases as header texts. These texts are never displayed properly in the available width for the column.
Is there any way these texts can be wrapped and limited to the column width?
Here is an image of the issue:
Give this a shot in your CSS:
.x-grid3-hd-inner {
overflow: hidden;
padding: 3px 3px 3px 5px;
white-space: normal;
}
And additionally, another option if the first doesn't work:
.x-column-header-inner .x-column-header-text {
white-space: normal;
}
.x-column-header-inner {
line-height: normal;
padding-top: 3px !important;
padding-bottom: 3px !important;
text-align: center;
top: 20%;
}