<aura:component implements="force:lightningQuickAction,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
<H1> <ui:button label="Web to Lead Form" press="{!c.openActionWindow}"/> </H1>
Css
.THIS {
}
H1.THIS {
font-family: 'calibri';
font-size: 18px;
background-color: White;
border: 5px solid white;
padding: 20px 110px;
text-align: center;
}
Here is the snapshot, where i am not able to move the inside button to center
Did you try to flex the host component if that's an option?
.THIS {
display: flex;
justify-content: center;
}
i just hosted a small portfolio via github pages, and I tried to use media query to make it work on various device size.
The portfolio section includes these flipping card which i've been told are bogus on IOs devices when using chrome.
In fact it seems the back face are diplayed mirror on the Y axis.
I tried to debug by using CrossBrowser but without success.
Here's the repo with the code,
Here's a link to the bogus section.
Here some code should be enough to reproduce the issue (but i would still suggest to consider the repo code since i could miss something here)
html
<figure class="fig-container">
<div class="card">
<div img class="front face" style="background-image: url('http://img.youtube.com/vi/x10dBwZFi2Q/0.jpg');"></div>
<div class="back face">
<p><b>Location:</b> loc</p>
<p><b class="text-medium-big">Description: </b> desc</p>
</div>
</div>
</figure>
css
figure{
margin-bottom: 0px;
}
.fig-container {
max-width: 450px;
min-height: 160px;
/* horizontal center*/
margin-left: auto;
margin-right: auto;
}
.card {
box-sizing: border-box;
min-height: 250px;
transform-style: preserve-3d;
transition: all 0.5s linear;
border: 2px solid white;
border-radius: 20px;
}
.fig-container:hover .card {
transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 17px;
}
.face.front {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
color: white;
font-size: 0.5em;
text-align: justify;
line-height: 1.5;
overflow-y: auto;
}
Anyone is able to see the bug and understand what it could be the problem?
I succesfully implemented featherlight.js plugin on my wordpress blog to display some photos as a lightbox.
By default featherlight.js shows up the nextIcon and previousIcon only when the mouse hovers a certain area of the image.
But I would like the nextIcon/previousIcon to be always visible outside of the image when the lightbox is invoked.
Made some tests with "span.featherlight-next" resp. "span.featherlight-previous" so that the left/right icons are outside of the image...but until now I didn't find out how to do it.
Does someone know how to modify the CSS file so that the nextIcon and previousIcon to be always visible ?
Any help is greatly appreciated.
Thank you for your answer. Well, I came up with a solution which satisfies my needs. In fact I just moved the previous/next navigation icons inside the border of .featherlight-image, and the icons just are just visible on a mouse hover (which is the default).
First I set a bigger white border to the image:
.featherlight .featherlight-image {
max-width: 100%;
border: 32px solid #fff;
}
then I fine tuned .featherlight-next & .featherlight-previous and it's span classes based from featherlight.gallery.css, like this:
.featherlight-next,
.featherlight-previous {
display: block;
position: absolute;
top: 25px;
right: 0px;
bottom: 0;
left: 80%;
cursor: pointer;
/* preventing text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* IE9 hack, otherwise navigation doesn't appear */
background: rgba(0,0,0,0);
}
.featherlight-previous {
left: 0px;
right: 80%;
}
.featherlight-next:hover,
.featherlight-previous:hover {
background: rgba(0,0,0,0.0);
}
.featherlight-next span,
.featherlight-previous span {
display: none;
position: absolute;
top: 50%;
width: 80%;
font-size: 22px;
line-height: 50px;
/* center vertically */
margin-top: -40px;
color: #777;
font-style: normal;
font-weight: normal;
text-shadow: 0px 0px 3px #888;
}
.featherlight-next span {
right: 7px;
left: auto;
text-align: right;
}
.featherlight-previous span {
right: 0px;
left: 7px;
text-align: left;
}
.featherlight-next:hover span,
.featherlight-previous:hover span {
display: inline-block;
}
/* Hide navigation while loading */
.featherlight-loading .featherlight-previous, .featherlight-loading .featherlight-next {
display:none;
}
Putting the background to white could also help hiding the white image border / frame so that the navigation icons are more distinctive when hovering:
.featherlight:last-of-type {
background: rgba(255, 255, 255, 0.6);
}
Hope this helps someone ;-)
Check the source. You'll find how the hide/show is achieved:
.featherlight-next span,
.featherlight-previous span {
display: none;
// ...
}
.featherlight-next:hover span,
.featherlight-previous:hover span {
display: inline-block;
}
So you simply need to override the display: none with your own custom rule.
I'm new to web design and I'm working on a small project, but I'm faced with a problem and I would appreciate any help.
So I have three div containers and I'm using them to show thumbnails of photos inside an album and I've given each one of them a CSS :hover selector and I want all three classes to run at once when the mouse is over any one of the divs. I tried to simulate a mouseover event but it didn't work and I tried to setattribute with javascript didn't work either. Here is my css.
#frame {
border: solid 2px black;
background-image:url(cpHDFLI6_mini.jpg);
background-repeat:no-repeat;
position:absolute;
top:87px;
right:183px;
left:auto;
display: block;
width: 60px;
height: 70px;
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
#frame1 {
border: solid 2px black;
background-image:url(20397.jpg);
background-repeat:no-repeat;
position:absolute;
top:75px;
right:228px;
left:auto;
display: block;
width: 60px;
height: 70px;
z-index:1;
}
#frame2 {
border: solid 2px black;
background-image:url(candle.jpg);
background-repeat:no-repeat;
position:absolute;
top:87px;
right:273px;
left:auto;
display: block;
width: 60px;
height: 70px;
-o-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
transform: rotate(-30deg);
z-index:0;
}
#frame2:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
#frame1:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
#frame:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
If you don't understand what I want I can explain more.
NO Way to do it on CSS only. And Hover is not apply for DIV. Its for A, UL > LI...
You must know about Javascript or jQuery.
Mouse hover on 1 div then $.AddClass ( Active Class ) for ALL DIVS, and When Mouse Out of Div, $.RemoveClass for ALL DIVS.
If you don't know about jQuery or Javascript, you can ask here, we can help.
You can copy and paste it for DIv2 and Div3 about mouse move out and over too. If you understand on DOM, you can try $("div[name=3DIV]"). for shorter code , however I am not sure u understand the script or not, so I posted simple script but long code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" /></script>
<script language="javascript">
$(document).ready(function() {
$("#divID1").mouseover(function() {
$("#divID1").addClass("ACTIVE_CLASS");
$("#divID2").addClass("ACTIVE_CLASS");
$("#divID3").addClass("ACTIVE_CLASS");
});
$("#divID1").mouseout()(function() {
$("#divID1").removeClass("ACTIVE_CLASS");
$("#divID2").removeClass("ACTIVE_CLASS");
$("#divID3").removeClass("ACTIVE_CLASS");
});
});
</script>
Here's my problem: I'm showing an overlay (using this) with a message div that has rounded corners.
Here is my css code for message div:
#modal1
{
margin-left: auto;
margin-right: auto;
display: none;
width: 620px;
height: 150px;
position: relative;
background-color: #FFF;
border: 12px solid #FF771C;
-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
text-align: center;
}
And my problem is that I get a white "border" (if you look closely) in the upper left and right corners. Here is the image so you can see for yourself. Now, I "solved" this by putting top-left and -right border properties of webkit to 0px, but this is not a solution, so I'm asking if you have maybe some ideas? Btw, this is only developed for chrome that's why it's only -webkit up there in the code..
EDIT:
I found the solution on their forum http://flowplayer.org/tools/forum/40/46850
this seems to be the border of another div or element behind your rounded bordered div