function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
tulasiram chtulasiram ch 

I have used lightning component in visualforce page. I got this code from one of the website. But flipcard background color is not working please help me...

App:
  1. <aura:application  access="global" extends="ltng:outApp">
  2.     <aura:dependency resource="c:flipCard" />
  3.     
  4. </aura:application>
component:
  1. <aura:component >
  2.     <aura:attribute type="string" name="bgColor" />
  3.     <aura:attribute type="string" name="fontColor" default="#000"/>
  4.     <aura:attribute type="string" name="borderColor" default="#000"/>
  5.     <aura:attribute type="string" name="frontText" />
  6.     <aura:attribute type="string" name="backText" /> 
  7.     <aura:attribute type="boolean" name="isVerticalFlip" default="false" description="By default its Horizontal flip" />
  8. <div class="{! 'slds flip-container ' + (v.isVerticalFlip == false ? 'horizontal' : 'vertical') }" style="{! 'background-color:'+ v.bgColor+'; color: '+ v.fontColor+';border : 1px solid '+ v.borderColor}">
  9. <div class="flipper">
  10. <div class="front">
  11.                 {!v.frontText}
  12.             </div>
  13. <div class="back">
  14.                 {!v.backText}
  15.             </div>
  16.         </div>
  17.     </div>
  18. </aura:component>
Css:
  1. .slds.THIS{
  2.     padding : 10px;
  3.     margin : 10px; 
  4.     display: inline-block;
  5.     border-radius: 15px;
  6.     text-align: center;
  7.     font-size : 2em;
  8. } 
  9.  
  10. .THIS .flip-container {
  11.     perspective: 1000px;
  12. } 
  13. /* hide back while swapping*/
  14. .THIS .front, .THIS .back {
  15.     backface-visibility: hidden; 
  16.     position: absolute;
  17.     top: 0;
  18.     left: 0;
  19. }
  20.  
  21. .THIS.flip-container, .THIS .front, .THIS .back {
  22.     width: 100%;
  23.     height: 100%;
  24. }
  25. .THIS .front {
  26.     z-index: 2;  
  27. }
  28.  
  29. /* Flip Speed */
  30. .THIS .flipper {
  31.     transition: 0.6s;
  32.     transform-style: preserve-3d; 
  33.     position: relative; 
  34. } 
  35.  
  36. .THIS.flip-container.horizontal:hover .flipper, .THIS.flip-container.horizontal.hover .flipper {
  37.         transform: rotateY(180deg);
  38. }
  39.  
  40. .THIS.horizontal .front { 
  41.     transform: rotateY(0deg);
  42. }
  43.  
  44. /* back, initially hidden pane */
  45. .THIS.horizontal .back {
  46.     transform: rotateY(180deg);
  47. }
  48.  
  49. .THIS.flip-container.vertical:hover .flipper, .THIS.flip-container.vertical.hover .flipper {
  50.         transform: rotateX(180deg);
  51. }
  52.  
  53. .THIS.vertical .front { 
  54.     transform: rotateX(0deg);
  55. }
  56.  
  57. /* back, initially hidden pane */
  58. .THIS.vertical .back {
  59.     transform: rotateX(180deg);
  60. }
VF page:
  1. <apex:page >
  2.     <apex:includeLightning />
  3.     <div style="width:50%;height:150px;" id="flipCardId" />
  4.     <script>
  5.     $Lightning.use("c:lightningOutAppContainer",
  6.                    function(){
  7.                    $Lightning.createComponent("c:flipCard",
  8.                           {
  9.                               borderColor: "green",
  10.                               bgColor:"white",
  11.                               fontColor:"red",
  12.                               frontText:"What is a cool about Lightning Component Development",
  13.                               backText:"You do not need to enable Lightning experience, it will work on Classic instance as well"
  14.                          },
  15.                              "flipCardId",
  16.                                function(cmp){
  17.                                console.log('Component created, do something cool here')
  18.                                });
  19.                    });
  20.     </script>
  21. </apex:page>
please help me, why background color of a flipcard is not working.
Best Answer chosen by tulasiram ch
tulasiram chtulasiram ch
User-added image

Oh my god its working now, how it would be like that. Before this i have changed bgcolor to red , green, blue it was always white. now its working why i don't know. Sorry if i was did a mistake on checking.
User-added image

bgColor:"green",.............. its working fine now. Is there any chances that page behaves wrong sometimes. 

All Answers

deepak kumawatdeepak kumawat
Can you attach your screenshot that much is useful to identify what are missed (If works for you) ?

Thanks !!
Deepak Kumawat (Deny)
 
tulasiram chtulasiram ch
User-added image

Oh my god its working now, how it would be like that. Before this i have changed bgcolor to red , green, blue it was always white. now its working why i don't know. Sorry if i was did a mistake on checking.
User-added image

bgColor:"green",.............. its working fine now. Is there any chances that page behaves wrong sometimes. 
This was selected as the best answer