I am having an issue centring a <div id='divTwo'> inside another <div id='divOne'>. This is normal an easy thing to do, however in this instance i have transform: scale(); with transform-origin: 50% 50% 0px; applied on 'divTwo'
#divOne {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#divTwo {
width: 1024px;
height: 768px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border-left: 131px solid #333333;
border-right: 131px solid #333333;
border-top: 47.5px solid #333333;
border-bottom: 47.5px solid #333333;
border-radius: 55px;
}
if the scale applied to the transform and the window is larger than the outerWidth(), 'divTwo' has no issue centring. However when the 'divTwo' is scaled and the window is smaller or equal to the outerWidth(). The div will no longer centre, instead it will place its centre point to be right side of the browser, resulting if half the of 'divTwo' being off the right hand-side of the browser. Changing transform-origin: 50% 50% 0px; to transform-origin: 0% 50% 0px; works so long as you don't scale vertically, and vice versa.
jsfiddle example : https://jsfiddle.net/yvyz49zp/
Thank you. I feel like am missing something of obvious.
I knocked this up relatively quickly in jsfiddle - no javascript needed. Just play around with the values until you get something you like.
Code:
body {
background: lightblue;
}
#container {
display: inline-block;
position: absolute;
width: 50%;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
#dummy {
margin-top: 75%; /* Using the dummy is the trick - it locks the aspect ratio (at 4:3 in this case) */
}
#device {
position: absolute;
top: 10%;
bottom: 10%;
left: 0;
right: 0;
background-color: #333;
border-radius: 10%;
}
#screen {
position: absolute;
width: 70%;
height: 80%;
background: #0f0;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
<div id="container">
<div id="dummy"></div>
<div id="device">
<div id="screen"></div>
</div>
</div>
Related
The following image will be helpful.
Consider a traditional centered wrapper with max-width.
Then wrapper has 2 columns using 40% and 60% of the wrapper respectively (random number that isn't 50%).
Is there a way to stretch the divs outter limit to match the window borders without Javascript - while the inner limits respect the wrapper reference?
This unfortunatelly doesn't work:
#div1{
left: 0vw;
right: 40%; /*of .wrapper */
}
#div2{
left: 40%; /*of .wrapper */
right: 100vw;
}
Solution with JS (poorly written): https://jsfiddle.net/sirojuntle/ktvap86c/12/
The idea is to make smaller desktop layout looks better in larger screens.
Thanks
Because your wrapper is position: relative; half your job is already done. Even with position: absolute; your divs still take the wrapper as their parent co-ordinates.
With that in mind, it's easier than you think.
.div1{
right: 60%; /* is 40% from the left, like your picture */
left: calc(50% - 50vw)
}
.div2{
left: 40%;
right: calc(50% - 50vw)
}
You can play with negative margin
.wrapper {
--m: min(0px, (800px - 100vw)/2);
}
.row1 {
width: calc(40% - var(--m));
margin-left: var(--m);
}
.row2 {
width: calc(60% - var(--m));
margin-right: var(--m);
margin-left:auto;
}
Full code:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
--m: min(0px, (800px - 100vw)/2);
border: 3px solid pink;
max-width: 800px;
background-size: 10%;
background-image: linear-gradient(90deg, #000, #0000 5%);
margin:auto;
}
.row1 {
background-color: red;
min-height: 100px;
width: calc(40% - var(--m));
margin-top: 20px;
margin-bottom: 20px;
margin-left: var(--m);
}
.row2 {
background-color: darkred;
width: calc(60% - var(--m));
margin-left:auto;
margin-right: var(--m);
min-height: 100px;
}
<div class="wrapper" id="wrapper">
<div class="row1" id="ref">
There is a way to stretch this with CSS?
</div>
<div class="row2" id="ref2">
And that?
</div>
</div>
I am trying to create a poker table with dots around the table to represent players. The image you can see below represents what I have done already and gives the general idea of what I want but, as you can see the dots (players) are not distributed equally. Is it possible to get the path value along the outer part of the table below and then iterate the 'chips' along it?
export default function PokerTable() {
return (
<div className='poker-table'>
{
[...Array(10)].map((index, key) =>(
<div className='player' key={key}>
</div>
))
}
</div>
)
}
.poker-table {
width: 40%;
height: 60%;
background-color: #4aad4a;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 150px;
position: relative;
border: 15px solid #C0C0C0;
&:before {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 150px;
position: absolute;
top: -15px;
left: -15px;
}
&:after {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 130px;
position: absolute;
top: 0;
left: 0;
}
}
.player{
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
transform: translate(-50%, -50%);
border: 3px solid black;
&:nth-child(1) {
top: 0;
left: 50%;
background-color: red;
}
&:nth-child(2) {
top: 15%;
left: 95%;
background-color: yellow;
}
&:nth-child(3) {
top: 50%;
left: 100%;
background-color: green;
}
&:nth-child(4) {
top: 85%;
left: 95%;
background-color: rgb(38, 0, 128);
}
&:nth-child(5) {
top: 100%;
left: 50%;
background-color: rgb(128, 0, 100);
}
&:nth-child(6) {
top: 85%;
left: 5%;
background-color: rgb(90, 128, 0);
}
&:nth-child(7) {
top: 50%;
left: -2%;
background-color: rgb(0, 128, 122);
}
&:nth-child(8) {
top: 15%;
left: 5%;
background-color: rgb(26, 26, 10);
}
&:nth-child(9) {
top: 4%;
left: 22%;
background-color: rgb(133, 133, 133);
}
&:nth-child(10) {
top: 97%;
left: 75%;
background-color: rgb(106, 76, 179);
}
}
This answer takes a step back to consider a basic problem which has not been mentioned in the question.
There are problems if the table shape is defined in terms of percentage width and height of the viewport.
On different devices the table with have different aspect ratios. This could be overcome by always placing the table inside a container with fixed aspect ratio.
However, even then the table will look different on different container/viewport widths because the border radius has been defined in absolute (px) terms.
Basically, to have a consistent table shape you cannot mix relative and absolute units
This snippet defines the table purely in terms of its width, which in this example is set at 40vmin (if you use vmin you know it will always fit in the viewport). Everything else is calculated in relation to that using CSS variables and its calc function.
body {
width: 100vw;
height: 100vh;
position: relative;
}
.poker-table {
--w: 40vmin;
--h: calc(var(--w) * 60 / 40);
width: var(--w);
height: var(--h);
background-color: #4aad4a;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
--br: calc(var(--w) / 2); /* border radius */
border-radius: var(--br);
position: relative;
--bw: calc(var(--w) / 20); /* border (the gray bit) width */
border: var(--bw) solid #C0C0C0;
box-sizing: content-box;
margin: 0;
padding: 0;
}
<div class='poker-table'>
</div>
Now to find the left and top positions (in CSS) terms where the player must be placed to ensure they are equally spaced around the table we need to do a bit of geometry.
In the above snippet the radius of the top and bottom of the table was chosen deliberately to make the calculation a bit easier. The border radius was defined as half the table width. So the parts of a circle which CSS uses to know where to paint are like in this picture:
And the entire length of the edge of the table is 2*PI*br + (2*h-2*br) - the circumference of the circle (i.e. the 4 arcs in the corners) plus what remains of the height twice (the two straight edges).
The players need to be spaced around so the distance between them is one tenth of this length.
It's now a question of doing a bit of math to calculate the angle sub-tended by the second player, for example, and hence its left and top coordinates, then move onto the second player. Let me know if you need help with this - but it's stopped being HTML/CSS and gone on to be geometry!
I am creating Angular 5 project and I wanted to create custom sort icon in sort header to achieve this effect https://fontawesome.com/icons/caret-up?style=solid. I don't want to have this default arrow.
I tried to change css style, but it seems not to work. Or maybe is there any way to replace this icon by custom using JS?
::ng-deep {
.cdk-visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.mat-sort-header-stem {
background: none;
display: none !important;
}
.mat-sort-header-container {
position: relative;
}
.mat-sort-header-indicator {
transform: translateY(0px) !important;
}
.mat-sort-header-arrow {
position: absolute;
right: 20px;
transform: translateY(0%) !important;
}
}
Thank for any suggestions.
Edit.
If someone has this problem, I solved it by adding custom directive to mat-sort-header element. I also passed to directive the sort direction (ASC or DESC). Finally based on the direction I customized my sort icon using pure CSS.
see if this help you
.triangle {
overflow: hidden;
position: relative;
margin: 2em auto;
border-radius: 20%;
transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
width: 5em;
height: 5em;
}
.triangle:before {
border-radius: 20% 20% 20% 53%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(.866) translateX(-24%);
position: absolute;
background: #ccc;
pointer-events: auto;
content: '';
width: 5em;
height: 5em;
}
.triangle:after {
border-radius: 20% 20% 53% 20%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(.866) translateX(24%);
position: absolute;
background: #ccc;
pointer-events: auto;
content: '';
width: 5em;
height: 5em;
}
<div class="triangle"></div>
The image is moving depending on the size of the screen, I would like to fix it on the top middle. How do I do it? Here is 2 screenshots explaining:
HTML:
<div class="logo"></div>
CSS:
.logo {
background:url(../img/logo.png) no-repeat;
position:absolute;
display: inline-block;
left:50%;
top:30%;
height:120px;
width:175px;
margin:-115px 0px 0px -112px;
}
You could use translate:
.logo {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
height:120px;
width:175px;
background:url(../img/logo.png) no-repeat;
}
jsFiddle
You can use calc function in CSS.
Resize your window to see it's effect (in fullscreen).
.logo{
position: absolute;
width: 175px;
height: 120px;
top: 30%;
left: calc(50% - (175px / 2)); /* 50% parent width - half_of_image_width */
border: 1px solid red;
}
.container{
position: absolute;
width: 90%;
height: 90%;
border: 1px solid black;
}
<div class="container">
<div class="logo"></div>
</div>
I have 3 divs. One inside the other.
jQuery
$(function() {
$("#div1").resizable({
handles: "n, e, s, w, nw, ne, sw,se"
});
$("#div1").draggable();
});
HTML
<div id="div1" style="left: 2px; top: 2px; z-index: 2; width: 100px; height: 70px; background-color: black">
<div id="div2" style="width: 100%; height: 100%; background-color: green; position: absolute;">
<div id="div3" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);">
text
</div>
</div>
</div>
CSS
.ui-resizable-handle { width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; }
.ui-resizable-n { top: 1px; left: 50%; }
.ui-resizable-e { right: 1px; top: 50%; }
.ui-resizable-s { bottom: 1px; left: 50%; }
.ui-resizable-w { left: 1px; top: 50%; }
.ui-resizable-nw { left: 1px; top: 1px; }
.ui-resizable-ne { top: 1px; right: 1px; }
.ui-resizable-sw { bottom: 1px; left: 1px; }
As you can see the div1 is resizable,draggable and has absolute width and height. Div2 has 100% width and height and has absolute position. Div3 has the parameters to be centered horizontally and vertically.
I have a screenshot of what i want to do. I want the white handles to be outside the div like shown in the screenshot. The second div must stay with position:absolute. There is also a jsfiddle that contains my current code.
Please help me move the handles outside of the div.
I'm not sure if I understand your question.
But there is a Fiddle.
I've change only your css.
You need to move the handle's by more than you have in the css you've outlined. I've tidied it up a bit and you can see that here
.ui-resizable-handle {
width: 10px;
height: 10px;
background-color: #ffffff;
border: 1px solid #000000;
}
.ui-resizable-n, .ui-resizable-s {
left:50%;
}
.ui-resizable-e, .ui-resizable-w {
top:50%;
}
.ui-resizable-se {
right: -5px;
bottom: -5px;
}