1

I am having real difficulty overlaying my button in the bottom right corner of an image in lightning. My code is like so:

Component

<aura:component controller="AMEXCOMMHomePageController" implements="forceCommunity:availableForAllPageTypes"  access="global">
<ltng:require styles="{!join(',', 
                        $Resource.SLDS213 + '/assets/styles/salesforce-lightning-design-system.css')}"
              scripts="{!join(',',
                        $Resource.AMEXCommunityResource  + '/scripts/jquery-3.1.1.min.js')}"
              />
<div class="background">

    <img src="{!$Resource.AMEXCOMM_LandingBannerImg}"/>


            <button class="btn-refer" onclick="{!c.gotoNewApp}">Refer Your Client Now</button>

    </div>

</aura:component>

CSS

.THIS .btn-refer {
    float: right;
    position: absolute;
    margin-right: 20px;
}

.THIS .background {
    padding: 15px 0 15px 0;
    width: 998px;
    height: 248px;
    margin-left: 17px;
}

Image

Button slid over to the left. Needs to be overlayed

EDITT

enter image description here

  • Can you post a picture of your current page? – Martin Lezer Jan 12 '17 at 13:03
  • @MartinLezer added :) – Nebbyyy Jan 12 '17 at 13:05
1

Try This

   .THIS .btn-refer {
       right: 0;
    bottom: 0;
    position: absolute;
    text-align: center;
}

.THIS.background {
    position: absolute;

}
.THIS img {
    position: relative;
}
1

You should try:

.THIS .btn-refer {
    position: absolute;
    right: 20px;
}

.THIS .background {
    position: relative;
    padding: 15px 0 15px 0;
    width: 998px;
    height: 248px;
    margin-left: 17px;
}

.THIS .background img{
    min-width: 100%;
    width: 100%;
}

The position relative on your background container allows us to position the btn-refer inside the container depending on its size.

  • That has just pushed the button even further to the right, off the image :/ – Nebbyyy Jan 12 '17 at 13:52
  • This is because your image doesn't fit the whole container. Do you want the image to take the whole width of its container? – Martin Lezer Jan 12 '17 at 13:54
  • Yeah that would be best – Nebbyyy Jan 12 '17 at 15:42
  • Ok I edited my answer. This should work. If the button is too much on the right you can increase the value of the "right: 20px;" until it's good for you. – Martin Lezer Jan 12 '17 at 15:45
  • Ive edited the original post to show you what its looking like now – Nebbyyy Jan 12 '17 at 15:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.