Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Reshmi SmijuReshmi Smiju 

How to Align the Two page blocks in th Top Side of a Panel Grid

Hi,

I am having an Issue. I want to allign two pageblocks in the Top Part of panel Grid. One a Pageblock contains some Search Parameters, and another is a page block contains Google Map.  Now, Serach Paramerts Page block coming in the Center Position of the Panel Grid .

User-added image

How to make it in the Top side , along the Google Map .
This is my Panel Grid Code
<apex:panelGrid columns="2" id="theGrid" width="100%" columnClasses="colstyle" style="vertical-align:top;" >
</apex: panelGrid>
Thanks in Advance
Reshmi
Chandra Sekhar CH N VChandra Sekhar CH N V
Try changing the 'columns' attribute to 1 instead of 2
Tarun_KhandelwalTarun_Khandelwal
Hi Reshmi,

You are using page block and in pageBlock there is no attribute like style or styleClasses. So we have to put css forcefully on that element. You can use either JQuery or Javascript. But for JQuery, you have to added its library. So better is to use Javascript. Put the following script in your code -
  
<script>
var allTdElement = document.getElementsByTagName('td');
for(var i = 0; i < allTdElement.length; i++) {
	var ele = allTdElement[i];
	ele.style.verticalAlign = 'Top';
}
</script>
This is vertically aligned your page block. Let me know in case of any Query.

Thanks,
Tarun Khandelwal,
SkypeId - tarun.khandelwal26 
 
Reshmi SmijuReshmi Smiju
Hi Tarun,
I have tried your code. But there no change to my layout.  :(
Tarun_KhandelwalTarun_Khandelwal
Hi Reshmi,

Please can you share your whole code so that i can give better solution?
tommundytommundy
Try this:

<style type="text/css">
    td{
        vertical-align: top;
    }
</style>

Works for me! :)
Hannah Holbrook 1Hannah Holbrook 1
Hello,
I am using Pageblock and can't get them to align with the code given above. do you put the code in above <apex:pageblock>?