function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

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

Page Block / Command Button style

I am going crazy.

 

Here is my VF snippet:

<!-- --------------------------------------- -->
<!-- ---------------- UPLOAD --------------- -->
<!-- --------------------------------------- -->      
<div>  
<apex:form enctype="multipart/form-data">
<apex:pageMessages />
<p>UPLOAD AN ATTACHMENT</p>
        <apex:pageBlock id="buttons">
        <apex:pageBlockButtons >
        <apex:commandButton styleclass="button1" action="{!upload}" value="Upload Document"/>
        </apex:pageBlockButtons>
        </apex:pageBlock>
<apex:outputLabel value="File Name" for="fileName"/><apex:inputFile value="{!attachment.body}" filename="{!attachment.name}" id="file"/>
<apex:inputText value="{!attachment.name}" id="fileName"/><apex:outputLabel value="File Name" for="file"/>
</apex:form> 
</div>                                   
<!-- --------------------------------------- -->
<!-- ------------ END UPLOAD --------------- -->
<!-- --------------------------------------- -->

 Here is my VF view:

 

It looks so painfully ugly.  I know.  I have tried everything I can think of in my styles.

Here are some that have yielded poor results:

 .pbHeader {clear:both!important; text-align: left!important; background-color: #FFFFFF!important;}
    .pbTitle {width: 50%!important}
    .bPageBlock {background-color:#FFFFFF!important; clear:both!important; text-align:left!important; padding: 0px!important; margin: 0px!important; }
    .button1 {background-color:#FFFFFF; clear:both!important; text-align:left!important; padding: 0px!important; margin: 0px!important; }

 What I am looking to do is to justify left my page buttons block of code.  But I can't seem to get down to the heart of css code.

Any thoughts?

Best Answer chosen by Admin (Salesforce Developers) 
GrrrrrrrrrrrrrGrrrrrrrrrrrrr

I found the answer I needed by opening up chrome and firefox's developer tools that allow me to see the CSS names that have been given by Salesforce.  I was then able to alter the css by overriding theirs.

 

Although I do like Firefox, I was impressed by Chrome's csscan ... it really picked in and gave me what I needed.

 

 

All Answers

Shiva Ramesh @ xcdhrShiva Ramesh @ xcdhr

Hi

 

Add style="align:left;" in apex:pageBlockButtons tag like below.

 

<apex:pageBlockButtons style="align:left;">

 
GrrrrrrrrrrrrrGrrrrrrrrrrrrr

Hi Shiva,

   Thank you for the suggestion.  I have tried that before, and just now I tried it again, and it is not working.  There has to be something inside the Salesforce CSS that is overriding whatever styles I name.

   I even used firebug to open up the CSS and find it there.  Here is the code exposed w/ firebug.  Even using these, I am still at a loss as to how I can override Salesforce's code.

 

<div class="apexp">
<div class="individualPalette">
<div class="Custom18Block">
<div id="j_id0:j_id9:buttons" class="bPageBlock brandSecondaryBrd apexDefaultPageBlock secondaryPalette">
<div class="pbHeader">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="pbTitle"> </td>
<td id="j_id0:j_id9:buttons:j_id38" class="pbButton " style="align:left;">
<input class="btn button1" type="submit" value="Upload Document" name="j_id0:j_id9:buttons:j_id38:j_id39">
</td>
</tr>
</tbody>
</table>
</div>
<div class="pbBody"></div>
<div class="pbBottomButtons">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="pbTitle"> </td>
<td id="j_id0:j_id9:buttons:j_id38:bottom" class="pbButtonb " style="align:left;">
<input class="btn button1" type="submit" value="Upload Document" name="j_id0:j_id9:buttons:j_id38:bottom:j_id39">
</td>
</tr>
</tbody>
</table>
</div>
<div class="pbFooter secondaryPalette">
<div class="bg"></div>
</div>
</div>
</div>
</div>
</div>

Is there anyway that I can force it to not put their code into a table?  Or, make it conform to a strict box model that i wrap around their pageBlock code?
GrrrrrrrrrrrrrGrrrrrrrrrrrrr

I found the answer I needed by opening up chrome and firefox's developer tools that allow me to see the CSS names that have been given by Salesforce.  I was then able to alter the css by overriding theirs.

 

Although I do like Firefox, I was impressed by Chrome's csscan ... it really picked in and gave me what I needed.

 

 

This was selected as the best answer