Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ThathulaThathula 

How to keep a component without alignment issues , for all resolutions?

Hi all,

i've a compoent and i've used that like this

<c:Country_Only_Component countryLabel="Country of Incorporation" Country="{!Vendor_Registration__c.Country_of_Incorporation__c}" EditMode="true" CountryLabelStyle="color: #4a4a56;font-weight:bold;font-size:11px;margin-left:3%;margin-right:1%" StateLabelStyle="color: #4a4a56;font-weight:bold;font-size:11px;margin-right:20px;margin-left:280px;" CountryCMBStyle="width:152px;" StatesCMBStyle="width:152px;" ></c:Country_Only_Component>

Issue is it looks fine for 1366*768 but for big monitors it doesn't look fine.. Has some allignment issues.

Please, can anyone give me some tips?

I used margin-left : 10% (with percentage too) , but doesn't work for me
James LoghryJames Loghry
Might be a bit of overkill, but have you looked into bootstrap? http://getbootstrap.com/  Bootstrap is "responsive".  This means you can specifiy different layouts for different browsers and resolutions, including mobile layouts and different resolutions.  Beware though, that bootstrap involves adding a lot of css and some javascript to your project.
James LoghryJames Loghry
Also, see this post on the developer blogs on how to get started with VF and bootstrap: https://developer.salesforce.com/blogs/developer-relations/2014/03/twitter-bootstrap-and-visualforce-in-minutes.html