extra space between quick search and gird

[danh]

My grid is rendering with an extra space under the quick search and above the grid.

In FireBug it shows a <br> and if I delete it, the space goes away, but can't figure out where its coming from...

Any ideas how to get rid of that extra space?

[Davidk]

Re: extra space between quick search and gird

If I move my Grid Record count to below the grid then my Search Part is sitting directly on top of my Grid part. What does your screen look like - post an image.

[danh]

Re: extra space between quick search and gird

I opted to put the quick search 'In Grid', so got what I want for this case. So don't spend a lot of time on it, but would like to figure it out "just so I know".

It doesn't seem to make any difference where the record count is for me - above or below, I still get the extra space.

FWIW, this grid has a tree control too, so it uses a master layout template. But I can't see any line break in there that would be causing it.

[Charles Hoens]

Re: extra space between quick search and gird

Yeah...I see the same thing here. I was hoping you had the answer!

[Davidk]

Re: extra space between quick search and gird

You can get rid of this <br> tag... but it's a little complicated... and involves jQuery... and it's kinda cheating (because we don't actually prevent the <br>) so if you don't mind getting a bit messy... here goes...

Normally, the jQuery statement

jQuery('#GRD_PRODUC.GRID_PART.FORM_CONTAINER_DIV br').remove();

should work... but it doesn't. I think it's because there is something in this div id that is interferring with jQuery.
(EDIT: It's the periods in the div id that jQuery doesn't like. Neither here nor there, but nice to know.)

So... we need to wrap this div inside another simple div. I went into my Custom Master layout template and this is what I had...

<table>
<tr><td></td><td>{grid.Search_Part}</td></tr>
<tr><td valign="top" ><br/>{ExternalNavigator:TREENAVIGATOR}</td><td valign="top" >{grid.Grid_Part}</td></tr>
<tr><td></td><td>{grid.DetailView_Part}</td></tr>
</table>

To wrap your grid in a simple div, put a new div tag before the {grid.Grid_Part}, so it will look like this...

<table>
<tr><td></td><td>{grid.Search_Part}</td></tr>
<tr><td valign="top" ><br/>{ExternalNavigator:TREENAVIGATOR}</td><td valign="top" >[COLOR="#FF0000"]<div id="delbr">[/COLOR]{grid.Grid_Part}[COLOR="#FF0000"]</div>[/COLOR]</td></tr>
<tr><td></td><td>{grid.DetailView_Part}</td></tr>
</table>

with my new div id being "delbr"

Now, I put the following code into the Grid's Client Side event onGridRenderComplete

jQuery('#delbr br').remove();

So... this finds my delbr div id and gets rid of all the br tags inside it.

Very cool that this can be done... and most likely way over the top... but it can be done. Remember to make sure your jQuery libraries are available.

[Charles Hoens]

Re: extra space between quick search and gird

Wow!

I'm blown away!

[Davidk]

Re: extra space between quick search and gird

To go a little bit further, Dan mentioned that he also has a Tree Control which also has a <br /> line break just above the tree. This one you can delete from the Custom layout. However, if you don't want to delete it there, and you have a relatively simple page, you can delete all the <br> tags from the page with...

jQuery('br').remove();

This can be dangerous because you don't really know where they are going to occur... but again... it can be done.

Finally... let's say you have two <br> line breaks in the div... but you only want to get rid of the first one... use the jQuery "less than" selector...

jQuery('#delbr br:lt(1)').remove();