+ Start a Discussion
Ranjan SatpathyRanjan Satpathy 

Unable to override SLDS CSS into visualforce page which is a embedded lightning record page

I have a visualforce page but when I moved to lightning experience automatic a horizontal scroll bar is adding to this page which is a embedded in lightning record page.
User-added image
So here I am trying to remove this scroll bar by overriding the CSS but its not working
User-added image
In the above image I want to disable the overflow so that its removing the scroll bar 
User-added image
after removing the overflow in browser inspect it seems to be perfect. but here I need to override this into my page.
My code
<apex:page standardController="Account">
<style>
   oneAlohaPage .conten {
   overflow: hidden;
}
</style>
<div id="InnternalDiv" style="height: 2000px; width: 500px;">
    <apex:Form>
            <apex:pageBlock>
                <apex:pageBlockSection columns="2">
                    <apex:outputLabel value="First one " />
                    <apex:outputLink target="_blank"
                        value="https://www.google.com/maps/d/viewer?mid=1b6zZey5tKiiv6UP3O5xac1AN8I0">https://www.google.com/maps/d/viewer?mid=1b6zZey5tKiiv6UP3O5xac1AN8I0 </apex:outputLink>
                    <apex:outputLabel value="First two " />
                    <apex:outputLink target="_blank"
                        value="https://www.google.com/maps/d/viewer?mid=1kNPIg_2jXtCNRsN_7VcEtrhDUfI">https://www.google.com/maps/d/viewer?mid=1kNPIg_2jXtCNRsN_7VcEtrhDUfI </apex:outputLink>
                </apex:pageBlockSection>
            </apex:pageBlock>           
    </apex:Form>
</div>

 
Raj VakatiRaj Vakati
Try this
 
<apex:page standardController="Account">
<style>
   oneAlohaPage .conten {
   overflow: hidden!important ;
}
</style>
<div id="InnternalDiv" style="height: 2000px; width: 500px;">
    <apex:Form>
            <apex:pageBlock>
                <apex:pageBlockSection columns="2">
                    <apex:outputLabel value="First one " />
                    <apex:outputLink target="_blank"
                        value="https://www.google.com/maps/d/viewer?mid=1b6zZey5tKiiv6UP3O5xac1AN8I0">https://www.google.com/maps/d/viewer?mid=1b6zZey5tKiiv6UP3O5xac1AN8I0 </apex:outputLink>
                    <apex:outputLabel value="First two " />
                    <apex:outputLink target="_blank"
                        value="https://www.google.com/maps/d/viewer?mid=1kNPIg_2jXtCNRsN_7VcEtrhDUfI">https://www.google.com/maps/d/viewer?mid=1kNPIg_2jXtCNRsN_7VcEtrhDUfI </apex:outputLink>
                </apex:pageBlockSection>
            </apex:pageBlock>           
    </apex:Form>
</div>

 
Rishab TyagiRishab Tyagi

Hello Ranjan,

It seems like you have mistyped the spelling of the class in your style tag. It is supposed to be .content instead of .conten

Also, you might need to mark that property important otherwise there is a possibility that it will get overwritten by the standard CSS again.

Hope that answers your question.

Ranjan SatpathyRanjan Satpathy
Hello Rishab 

Still I am not getting results
Rishab TyagiRishab Tyagi
The exact code that you need to use is this:
<apex:page standardController="Account">
<style>
    .oneAlohaPage .content {
    overflow: hidden !important;
    }
</style>
<div id="InnternalDiv" style="height: 2000px; width: 500px;">
    <apex:Form >
            <apex:pageBlock >
                <apex:pageBlockSection columns="2">
                    <apex:outputLabel value="First one " />
                    <apex:outputLink target="_blank"
                        value="https://www.google.com/maps/d/viewer?mid=1b6zZey5tKiiv6UP3O5xac1AN8I0">https://www.google.com/maps/d/viewer?mid=1b6zZey5tKiiv6UP3O5xac1AN8I0 </apex:outputLink>
                    <apex:outputLabel value="First two " />
                    <apex:outputLink target="_blank"
                        value="https://www.google.com/maps/d/viewer?mid=1kNPIg_2jXtCNRsN_7VcEtrhDUfI">https://www.google.com/maps/d/viewer?mid=1kNPIg_2jXtCNRsN_7VcEtrhDUfI </apex:outputLink>
                </apex:pageBlockSection>
            </apex:pageBlock>           
    </apex:Form>
</div>
</apex:page>
Seems like you are missing the '.' before oneAlohaPage while defining the CSS.