Im currently having an issue where for whatever reason I can't get any Transform CSS attributes to apply to an SVG image inside a div.
Here is the CSS for the code in question:
#interior-map-container {
background-color: white;
width: 1200px;
height: 600px;
overflow: hidden;
border-radius: 25px;
margin-top: 50px;
box-shadow: 0px 0px 21px 3px rgba(0,0,0,0.74);
position: relative;
}
#interior-map {
transform-origin: center;
transform: scale(0.3);
}
I've tested replacing the svg file (which is interior-map) with a JPG and still could not get the transform styles to apply. Other styling applies just fine, it's just transform attributes. Any suggestions would be great, thank you.
Related
I have a simple Dropdown and a sticky container to the right. The dropdown keeps going behind the sticky container as such:
I tried:
changing the right container to position fixed
changing z-index of both divs
However, these did not work. This is my codepen
The dropdown with position absolute is article-actions-dropdown-content
The sticky container is right-sidebar-container.
Sticky element:
.right-sidebar-container {
height: 550px;
width: 98%;
background-color: red;
display: block;
margin-left: auto;
margin-right: auto;
top: 20%;
margin-top: 10px;
position: sticky;
margin-bottom: 20px;
transition: 0.5s;
}
Absolute element:
.article-actions-dropdown-content {
position: absolute;
background-color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
min-width: 160px;
overflow: auto;
border: 1px solid #ebebeb;
border-radius: 4px;
opacity: 0;
transition: opacity 0.1s ease-in;
overflow: hidden;
visibility: hidden;
}
Try adding z-index: 1 to the element with class article-actions-dropdown-wrapper.That is,
.article-actions-dropdown-wrapper{
z-index: 1
}
tried on your codopen, the dropdown menu is nested inside the wrapper that is nested already, just apply the z-index:1000; on the .article-actions-dropdown-wrapper and z-index:0; on .right-sidebar-container
z-index use to start the unit count of a nested element 100 or 10 (don't remember) unit less compared to an higher one then you have to insert higher numbers
You should take z-index:1 for the class .article-actions-dropdown-content because it will prioritize the sticky menu.
I followed a tutorial online that helped me to replace browsers' default dropdown selection arrow with my own image. This has worked fine and you can see the example here.
.headerDropdown {
border-radius: 6px;
border: 2px solid #d4d4d4;
height: 34px;
}
.headerDropdown select {
height: 34px;
line-height: 34px;
padding-left: 10px;
padding-right: 5px;
margin-right: 20px;
font-size: 16px;
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /*Removes default style Firefox*/
background: url("http://enyojs.com/enyo-2.5.1/lib/moonstone/images/caret-black-small-up-icon.png") right no-repeat;
width: 100%;
background-position: 98% 50%;
background-color: white;
text-indent: 0.01px;
text-overflow: "";
transition: 0.2s;
}
.headerDropdown select::-ms-expand {
display: none;
}
.headerDropdown select::-moz-focus-inner {
border: 0;
padding: 0;
}
.rotateCaret {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
It looks a bit stiff so I want to rotate my image when the dropdown is being opened. I found a lot of examples online dealing with the problem but they all solve it when it is actually a separate object (image, for instance, not a background attribute like in my case).
$("#mainnavigation").on("click", function() {
$(this).toggleClass("rotateCaret");
});
My question is - how can I rotate my dropdown selection image without affecting the entire dropdown? I need only the image next to the content, so to say.
Thanks in advance!
PS. Ignore my poor choice of image, I used it only as an example.
Add another element for the caret and rotate it separately. You can create a custom CSS animation and manipulate it as you wish.
https://jsfiddle.net/johnniebenson/xajzuxn4/
I have rendered html div tags with three different size(Small,Large,Medium) in an order like below
my problem is after rendering large tile the remaining small tiles will be coming under large tile by creating white spaces. I need to automatically move the below small tiles to the white spaces when loading div tags. How can I resolve my problem by using CSS? is this default behaviour of css?
Medium Tile CSS
.clsMediumWidget{
width: 39.5%;
height: 245px;
background-color: #f6f6f8;
border: 0.2em solid #E9E9E9;
top: 0px;
left: 0px;
float: left;
}
Small Tile class
.clsSmallWidget{
width: 19.3%;
height: 245px;
background-color: #f6f6f8;
border: 0.2em solid #E9E9E9;
top: 0px;
left: 0px;
float: left;
}
Large Tile CSS
.clsLargeWidget {
width: 39.5%;
height: 494px;
background-color: #f6f6f8;
border: 0.2em solid #E9E9E9;
top: 0px;
left: 0px;
float: left;
}
Any suggestion would be great.
Unless there's some reason you don't want to do this, it should solve the problem mentioned.
Large Tile CSS
float: right;
Fiddle Example Here
I was trying to use this jQuery plugin to show a percentaje donut on a page:
http://larentis.eu/donuts/
When I add the code to the page, it works perfectly and you can see everything is ok:
But when I go to the print preview I don't see the arrow pointing the percentage value on the donut:
After a little research I saw the css used for this plugin and the arrow has the class .donut-arrow and it has the following styles associated:
/* line 38, ../sass/donuts.scss */
.donut .donut-arrow {
height: 1em;
width: .1em;
margin-left: -.05em;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
/* line 49, ../sass/donuts.scss */
.donut .donut-arrow, .donut .donut-arrow:before {
position: absolute;
display: inline-block;
background: #333;
left: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* line 57, ../sass/donuts.scss */
.donut .donut-arrow:before {
content: '';
height: .2em;
width: .2em;
bottom: -.1em;
margin-left: -.1em;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-borderradius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}
What css styling should I add to see this arrow while printing the page?
Any Idea? Thank You very much!
Update: I added the jsfiddle here: http://jsfiddle.net/KRcMg/
The arrow itself is a div with a background-color:
.donut .donut-arrow, .donut .donut-arrow:before {
background: #333;
}
Backgrounds won't display when printing. As such, your best bet will probably be to try and recreate the arrow with the same markup, using borders instead of a background colour.
Something like:
.donut-arrow {
width: 0;
border: .05em solid #000;
}
You'll want to size the borders using em's, as that will let you maintain the different sizes of the arrows according to the parent class.
I know with some border tricks, I could create trapezoid shape. I can also set its border-color to rgba(r,g,b,a) to make it transparent.
But is it possible to create trapezoid that has transparent borders and background ?
See below image for an example,
Currently, I use some png images to achieve this effect，but generating images of different sizes is really boring work，so I'm looking for a css soluation。
Personally, I think it's overkill, but it can be done like this:
demo
HTML:
<div class='outer'>
<div class='content'><!--stuff here--></div>
<div class='label l1'></div>
<div class='label l2'></div>
</div>
CSS:
.outer {
position: relative;
width: 500px; /* whole thing breaks if this is not a multiple of 100px */
border: solid .5em rgba(0,0,255,.5);
border-bottom: solid 0px transparent;
margin: 7em auto 0;
background: rgba(0,0,0,.5);
background-clip: padding-box;
}
.outer:before, .outer:after {
position: absolute;
top: 100%;
height: .5em;
background: rgba(0,0,255,.5);
content: ''
}
.outer:before { left: -.5em; width: 15%; border-left: solid .5em transparent; }
.outer:after { right: -.5em; width: 55%; border-right: solid .5em transparent; }
.content {
padding: .5em;
margin: 1.5em;
border-bottom: solid 1.5em transparent;
background: lightblue;
background-clip: padding-box;
}
.label {
overflow: hidden;
position: absolute;
top: 100%;
width: 15%;
height: 3em;
}
.l1 { left: 15%; }
.l2 { left: 30%; }
.label:before {
position: absolute;
top: -.5em;
width: 100%;
height: 2.5em;
border: solid .5em rgba(0,0,255,.5);
background: rgba(0,0,0,.5);
background-clip: padding-box;
content: '';
}
.l1:before { left: 9%; transform: skewX(30deg); }
.l2:before { right: 9%; transform: skewX(-30deg); }
It works in Firefox, Chrome, Opera and Safari (I was afraid to test it in IE9, though both transform and background-clip work) but only if the width for .outer has a value that's a multiple of 100px.
Unless using a width that's a multiple of 100px, it only works in Firefox and Chrome (there is a little glitch in Chrome - could be fixed by using a WebKit-only left to right linear gradient that sharply goes from transparent to that semitransparent blue really close to the start).
It breaks in Opera and Safari (if using a width that is not a multiple of 100px):
You can make the bg color and border colors transparent, but the borders will not follow the shape of the trapezoid:
http://jsfiddle.net/Kyle_Sevenoaks/UZbJh/1/
So your best bet is to stick with the pngs for now.