+ Start a Discussion
Edwin VijayEdwin Vijay 

New User Interface - Custom CSS Styling Issues

Dear All,


We have an application which consists of a set of Visualforce pages. We have used our own CSS files to apply custom look and feel to the pages.


Now, with the introduction of the new UI, our visualforce pages look messy. I debugged the pages and found out that our visualforce pages have a fixed width and all elements inside the page are aligned relative to the fixed width.


Here is a screenshot




However, the new UI displays a white block and our page does not fix into this white block.



<div id="Wrapper" class="leftbox">


The width of this div is 1200px - fixed in the CSS. If i make the div's width "auto" then all other elements get misaligned, however the white block of the new UI extends to fit my page.



Thanks for any help that you can provide...





Hi Edwin,

Have you tried overriding CSS styles with "!important" or maybe you can arrange it overriding it with jquery.



$('p').addClass('myClass yourClass');



Or please provide some more details of your styles.

I know its obvious, but try using firebug to get to know what properties are overriding your styles.


Good luck, 


Edwin VijayEdwin Vijay

Thank you Bruno for your response,


I used Firebug and found that there is a div called "bodyDiv" in the standard salesforce CSS style sheet. This div has an auto width.


In  our custom CSS stylesheet we have a div called "Wrapper" which has a fixed width 925px. The datatable is inside this "Wrapper" div, and when the table extends the width of "Wrapper" does not extend sice it is fixed.This in turn does not make "bodyDiv" to extend.


I hope i did not confuse.


I made the width of "bodyDiv" to 2000px by default using "!important" clause and it works now.


Anyhow, i dont think that this can be a permanent fix.


Thanks again for any suggestion that you can provide.


- Edwin