Can't find right values for styling menu here: http://demo.imatte.us/fomru/landingpage.html
Screen: i.imgur.com/iCBbIpP.png
just in safari, mac os.
Also, have another problem. When I'm choosing some element in first dropdown menu, then all panel bouncing some time. Think that's because 1 element in this menu has one style, and all other elements has another styles.
Screen: i.imgur.com/Bk5mbpF.png
Please, somebody, help me to find right css styles.
For the issue with the first dropdown menu: it's bouncing because the height of .filter-elements .element-all is 2 px less than for the other images. I've just changed the height from 22px to 24px and it doesn't bounce anymore. Because the image would be scaled inapproriate then, I'd suggest just to increase the margin-bottom by 2px:
.filter-elements .element-all
{
background: none repeat scroll 0 0 #e41b47;
box-shadow: 7px 8px #9bb3c8, 16px 0 #0c66bb, 7px -8px #85b560;
height: 22px;
margin: 8px 18px 8px 5px;
transition: all 0.5s ease-out 0s;
width: 22px;
}
changed into
.filter-elements .element-all
{
background: none repeat scroll 0 0 #e41b47;
box-shadow: 7px 8px #9bb3c8, 16px 0 #0c66bb, 7px -8px #85b560;
height: 22px;
margin: 8px 18px 10px 5px; // <-- increased margin here
transition: all 0.5s ease-out 0s;
width: 22px;
}
For the issue with Mac Safari - as I don't have a Mac here I can't test properly, but I guess it's an issue with the negative margin that's been set. There have been some known problems with Safari (don't know if they're already fixed) for elements having position: relative and a negative margin - Stackoverflow: Negative margin has different results on Mac Safari. You could try if changing the position:absolute for .filters .filter-name:after into position:relative would solve the Safari problem with the vertical alignment, but then you would have to take care about some follow up css-adjustments as this will affect the horizontal positioning.
Related
This is a copy/paste from the PrimeNG forums where I haven't been "approved" to ask the question yet, so I figured I'd give SO a shot.
I searched everywhere and I'm surprised to learn it seems like I'm the only person to come across this issue. There was a suggestion in another SO post about the PrimeNG DataTable to use [scrollable] properties, but scrollable is not a property of p-tree.
Anyway, my issue. I've got a p-tree component with a large list of hierarchical objects. When I expand them to the point where the vertical scrollbar is shown, everything is fine. However, when I expand some more nodes so the overflow goes to the right, the horizontal scroll bar is hidden. It's only until I scroll all the way down to the bottom of the tree that I am able to see the horizontal scrollbar. I've tried all sorts of CSS mods and played with the ui-tree div with inspect, but I can't find anything that seems to work.
2 Notes: Changing overflow: auto to overflow: visible just eliminates the vertical scrollbar entirely and the content goes south to oblivion, off the visible page.
Changing overflow to scroll creates a horizontal scrollbar, but it's just an empty bar and I need to scroll down to see the actual scrollbar.
Here is my ui-tree CSS:
:host ::ng-deep .ui-tree {
border: 1px solid #adabab;
border-radius: 0px 5px 5px 0px;
background-color: rgba(0, 0, 0, 0.38);
color: #eaeaea;
padding-right: 5px;
width: 22em;
max-height: 75vh;
overflow: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
I'm using the latest PrimeNG with PrimeIcons as of April 1st with Angular 9. Unfortunately I can't post my code and/or HTML due to propriety issues, but if no one has a solution I could create a fiddle/stackblitz/plunkr, but that will take some time, but I will do it if necessary.
Please see this paint example for a visual of what I'm experiencing. In a nutshell, the horizontal scrollbar is hidden until I scroll all the way down and I need it visible and functioning regardless of the position of the vertical scrollbar.
Any help or suggestions is greatly appreciated!
Thanks.
Solved my own issue, though it feels a bit messy and hackish. Leaving this here in case anyone else encounters this issue or has a more elegant way to solve it without a bunch of :host and ::ng-deep since they are going away at some point in the future.
I ended up having to create additional CSS rules for the following:
:host ::ng-deep .ui-tree {
border: 1px solid #adabab;
border-radius: 0px 5px 5px 0px;
background-color: rgba(0, 0, 0, 0.38);
color: #eaeaea;
padding: 0em 0em;
padding-right: 5px;
width: 22em; /* This constrains the width and creates the horizontal scrollbar when a p-tree node is expanded past this width. */
line-height: 15px !important;
max-height: 75vh;
overflow: overlay; /* Changed from auto to overlay */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* This creates the horizontal scrollbar visible on top of the inner divs */
:host ::ng-deep .ui-tree .ui-tree-container {
overflow: initial;
}
/* This keeps a margin between horizontal overflow and the vertical scrollbar. Without it content would be hidden behind the scrollbar */
:host ::ng-deep .ui-tree .ui-tree-container .ui-treenode .ui-treenode-content .ui-treenode-label {
margin-right: 10px;
}
Titles says it all. Is it possible to do without any extensions?
Use a Chrome Extension, this one works great for checking pixel distance between any web elements.
https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=en-US
Hope this helps
I was struggling with this and found an answer in devtools. First, in responsive mode, to the far right in the header there is a More options menu that has a Show rulers option. Select that. Then in the details settings under Elements, there is a Show rulers option to check. With both of those, selecting an element will show lines extended from the rulers to the element so you can see their location. You can see begin and end for various elements to calculate spacing between. I needed to handle spacing to edge so it was a little easier.
I don't know how to turn on the rulers when not in responsive mode, but they remained when I went back to a web layout.
Would this approach work? Get hold of an image containing alternating black and white dots(like a chess board) where each dot is 1 px. Make it the background image. You can zoom in like around 1000% and count the number of dots.
One thing you could do is using the Console tab to compute the horizontal or vertical distance between two elements using dimension/position properties/methods such as Element.getBoundingClientRect() or HTMLElement.offsetTop, but I guess you are looking for something that works more like a tool rather than coding your own solution.
Another maybe more usable option would be to use the Elements > Styles panel to add some kind of visual effect incrementally that allows you to measure what you need. For example, you could add a box-shadow / outline to an element and increment its size pixel by pixel until it touches the element next to it, so that you know how many pixels separate them.
Here's a simple code example / "demo" so that you see exactly what I mean:
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
}
div {
position: absolute;
display: flex;
border: 3px solid black;
top: 10px;
bottom: 10px;
width: 100px;
box-sizing: border-box;
}
.a {
left: 10px;
}
.b {
left: 120px;
animation: measure 2s linear 0s infinite alternate;
}
#keyframes measure {
0%, 10% { box-shadow: 0 0 0 0px red; }
10.001%, 20% { box-shadow: 0 0 0 2px red; }
20.001%, 30% { box-shadow: 0 0 0 3px red; }
30.001%, 40% { box-shadow: 0 0 0 4px red; }
40.001%, 50% { box-shadow: 0 0 0 5px red; }
50.001%, 60% { box-shadow: 0 0 0 6px red; }
60.001%, 70% { box-shadow: 0 0 0 7px red; }
70.001%, 80% { box-shadow: 0 0 0 8px red; }
80.001%, 90% { box-shadow: 0 0 0 9px red; }
90.001%, 100% { box-shadow: 0 0 0 10px cyan; }
}
<div class="a">A</div>
<div class="b">B</div>
Other than that, your best option is to use an Extension.
I would recommend Dimensions, a Chrome Extension that will constantly and automatically measure vertical and horizontal space as you move the cursor until it finds an "obstacle", which is way faster and easier than drawing a box to take a measurement, as most of the other measurement/ruler extensions do.
You can use firefox developer tools as it supports measuring pixels and distance out of the box. It does not need any external plugin.
Please check here
Im new with HTML & CSS and this is my first question. I tried to make a box who scales from 1.0 to 0.8 when you hover it with your mouse.
It works fine when you're with the mouse in the middle (0.0 between 0.8) on the box.
But when you are between 0.8 and 1.0 area it goes crazy everytime I move my mouse.
I would like that the box scales to 0.8 when you hover the whole 1.0 area at any time. It should be scale back to 1.0 when I leave the fixed 1.0 area. Not any other area. I cant help myself.
Test it or see it: https://jsfiddle.net/cyLxLbya/
YouTube Video: https://youtu.be/4MT4hrK7DVE
(left is between 0-0.8, right goes crazy between 0.8-1)
The problem is your scroll event triggering and blurring while the element scales. You're detecting a :hover but when the element gets small enough it loses it's :hover state and tries to scale up again. And back again (as it goes into :hover again).
One of the ways to fix this would be to detect the hover on a parent element (that doesn't scale). For example: https://jsfiddle.net/cyLxLbya/1/
.box{
display: inline-block;
position: relative;
cursor: pointer;
box-shadow: inset 0px 0px 83px -8px rgba(0,0,0,0.75);
transition: all 200ms ease;
transition-duration: 0.2s;
}
.hover:hover .box{
transform: scale(0.8);
box-shadow: inset 0px 0px 24px 0px rgba(0,0,0,0.75);
}
It's also advisable to move the transition to the box itself (not the hover state of the box).
I have found lots of posts similar to what I am asking and have been working away at this for hours and finally decided I should probably seek some exterior advice :).
I am trying to shadow 3 sides of an div using box-shadow I want the right side to be shadowless but cannot figure it out there are lots of posts on how to un-shadow the top but after countless efforts i could not even apply this.
Update:
clip-path is now (2020) supported in all major browsers.
Original Answer:
If you're willing to use experimental technology with only partial support, you could use the clip path property.
This will provide you with exactly the effect I believe you are after: a normal box shadow on the top, left and bottom edges and clean cut-off on the right edge. A lot of other SO solutions to this issue result in shadows that "dissipate" as they near the edge that is to have no shadow.
In your case you would use clip-path: inset(px px px px); where the pixel values are calculated from the edge in question (see below).
#container {
box-shadow: 0 0 5px rgba(0,0,0,0.8);
clip-path: inset(-5px 0px -5px -5px);
}
This will clip the div in question at:
5 pixels above the top edge (to include the shadow)
0 pixels from the right edge (to hide the shadow)
5 pixels below the bottom edge (to include the shadow)
5 pixels outside of the left edge (to include the shadow)
Note that no commas are required between pixel values.
The size of the div can be flexible.
I think you have 2 options:
1) Set your shadow's horizontal alignment to the left (negative values).
box-shadow: -30px 0px 10px 10px #888888;
Although this way you won't have the same shadow size in the top and bottom.
2) Use a div inside a div and apply shadow to each one.
.div1
{
box-shadow: -30px 10px 20px 10px #888888;
}
.div2
{
box-shadow: -30px -10px 20px 10px #888888;
}
Then you'll have to ajust the size for the one you want.
Here, have a jsfiddle: http://jsfiddle.net/EwgKF/19/
Use :after pseudo element : http://jsfiddle.net/romiguelangel/YCh6F/
HTML
<ul>
<li>item</li>
<li class="hello">item with after element</li>
</ul>
CSS
li {
display: block;
position: relative;
-webkit-box-shadow: 0 0 2px 1px gray
}
.hello:after{
display: block;
background-color: #f3f5f6;
width: 20px;
height: 38px;
content: " ";
position: absolute;
top: 0;
right: -10px
}
try using this example hasn't right side border:
JsBin Demo
NONE of the above responses will work.
I am assuming you are using bootstrap or a library that has box-shadow in the default buttons. Here is the solution:
.your-btn-class {
box-shadow: none /* Removes the default box-shadow */
box-shadow: -0.1rem 0 0 0.2rem rgba(134, 142, 150, 0.5); /* Add your own */
}
(if you don't remove the initial box-shadow, then when you tried to remove the offset from the right, the left side will be double the size of the top and bottom. That's why you have to remove it. If you are not sure what the default colors of the box-shadow of the library you are using. Just go to the source code and find-out, not hard at all)
If you just need to add box-shadow to you button or input on all side except the right do:
.your-btn-class {
box-shadow: -0.1rem 0 0 0.2rem rgba(134, 142, 150, 0.5);
}
Hi I'm not too sure how to create the attached image effect where the right hand side is my main content and it shades onto my left sidebar which has a gradient effect downwards.
Check this out: CSS3 gradient Generator, pick the colors and generate the code, then add it to the body in your CSS (Or whatever element you want it on).
.body /*or element of your choice*/
-webkit-gradient(
{
linear,
left bottom,
left top,
color-stop(0.02, rgb(91,204,245)),
color-stop(0.76, rgb(5,37,70))
)
-moz-linear-gradient(
center bottom,
rgb(91,204,245) 2%,
rgb(5,37,70) 76%
)
}
For the shadow from your main content use:
.MyElement
{
box-shadow: 10px 10px 5px #888;
}
And also check out CSS3 Box-shadow.
Also, because not every browser supports the box-shadow yet (IE), you can use border images. But IE doesn't suppport that either so, what I did on a site was to just make a 1px high PNG image of the shadow and set it as the background to my wrapper div, repeated it down/up (can't remember if that's X or Y) and it worked fine :)
Hope some of that helps.
img.shady
{
display: inline-block;
webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
padding: 10px;
margin-bottom: 5px !important;
min-height: 240px;
width: 630px;
border: 1px solid #D7D7D7
}
Your sidebar should use a png image that has an opacity/transparency, then the shaded sidebar will work with gradient background. (Note, IE6 wont like this solution, so you have to find an IE6PNG hack solution which can be found almost everywhere nowadays)
For gradient background, either create a background image or use the css3 gradient