I have been using the SLDS styling and I cannot in anyway get the styling correct for this very simple section.

I have an apex:form with an apex:pageblock with apex:pageblocksection and apex:pageblocksectionitems.

Inside the apex form, a div begins with grid styling slds-grid & slds-col . The pageblocksection has only one column with pageblocksectionitem containing a label and an input field.

I don't know why, but there is a huge padding added to the left of these components and I cannot override them to disable this. On checking in chrome debugging tools, I see that the CSS classes used where the padding occurs are

body .bPageBlock .detailList .labelCol, .slds-vf-scope .bPageBlock 
    .detailList .labelCol {
    text-align: right;
    width: 18%;

Below you can see the image.

Huge padding added to the left How can I override these? I have tried adding each of these classes in and tried overriding them with text-align:left and changing the width. But to no use, When I edit these values in the debugging tool, I see that its applied, but they are just not picked up from my visual force page styling. Any help would be great.

But there should be an easier way to avoid so much whitespace or padding added to the page?


There is you add these properties in classic but as you add slds means hybrid lightning , then this style is not apply there you need to add Lightning style there now. for testing you can once remove the slds devision and then can see your styling working there. So as conclusion you need to add lightning style there.

| improve this answer | |

In Winter’18 Salesforce has introduced a new attribute “LightningStylesheet” for the Visualforce pages in Salesforce. All you need to do is add this as an attribute to the Visualforce pages tag and your Visualforce page turns into a Lightning page.

| improve this answer | |
  • I have tried these unfortunately and does not help. For the moment, I copied all the classes listed in the debugger and added them only for this page and the styling looks better. But its really not that ideal with custom styling hacks lying around in pages. I need to do this better. I am definitely missing something here. – Randomizer Aug 22 '18 at 8:21

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.