Simple RadListView Problem

[Bader]

Hello,

I have a problem with handling a simple radlistview control.
The result must be like Image1.jpg (attached).

My aspx code:

<asp:Panel ID="Panel3" Width="112px" BorderWidth="1px" runat="server">
            <telerik:RadListView runat="server" ID="RadListView1" DataSourceID="SMapXmlDataSource" >
                <ItemTemplate>
                    <asp:Panel class="rlvI" ID="Panel1" BorderWidth="2px" BorderColor="Red" style="vertical-align:middle;"  Height="35px" Width="52px" runat="server">
                        <asp:ImageButton ID="SMapImageButton" runat="server" CommandArgument='<%# XPath("@name") %>' ImageUrl='<%# string.Format("~/Common/Img/Cities/{0}/SmallMaps/{1}.jpg", City, XPath("@name").ToString())  %>'
                                            CommandName="SmallMaps" Height="32px"  BackColor="Blue" OnCommand="CommonSmallMapImageButton_Command" Width="50px" />
                    </asp:Panel>
                </ItemTemplate>
                <LayoutTemplate>
                    <div class="RadListView RadListViewFloated RadListView_<%# Container.Skin %>" >
                        <div  class="rlvFloated rlvAutoScroll">
                            <div id="itemPlaceholder" runat="server">

                            </div>
                        </div>
                    </div>
                </LayoutTemplate>
         </telerik:RadListView>
     </asp:Panel>

The above code result is shown in image2.jpg.

As you can see there is a space above and bellow every small map. how can I remove this space. I tried to play with Panel1 height (I changed it to 32px), but it is not solving the problem but it displays a scroolbars as it shown is Image3.jpg.

Please, what is wrong with my code in order. I need to get the result which is shown in Image1.jpg.
It is apprecited to send me the modified code.

Regards,
Bader

[Dimo]

Hi Bader,

The problem can be easily seen by inspecting the RadListView HTML output with Firebug - the item <div> elements have a default top and bottom padding in the control's base stylesheet. This can be removed with CSS code:

div.MyListView  div.rlvI,
div.MyListView  div.rlvA
{
       padding-top:0;
       padding-bottom:0;
}

MyListView is a custom CSS class, which you can apply, so that the above styles do not affect other RadListViews in your application:

<LayoutTemplate>
    <div class="MyListView RadListView RadListViewFloated RadListView_<%# Container.Skin %>">


Sincerely yours,
Dimo
the Telerik team

[Bader]

Hello,

Thank you very much for your reply, it was very useful,
But I still have a problem with the same control.
After I made the required changes in my code as it is shown bellow, the radlistview still displayed with a white space under every image (within the radlistview item). I think that this is related to the control style.

<telerik:RadListView runat="server" ID="RadListView1" DataSourceID="SMapXmlDataSource" >
                        <ItemTemplate>
                            <asp:Panel class="rlvI" ID="Panel1" BorderWidth="2px" BorderColor="Red" style="vertical-align:middle;"  Height="30px" Width="50px" runat="server">
                                <asp:ImageButton ID="SMapImageButton" runat="server" CommandArgument='<%# XPath("@name") %>' ImageUrl='<%# string.Format("~/Common/Img/Cities/{0}/SmallMaps/{1}.jpg", City, XPath("@name").ToString())  %>'
                                                    CommandName="SmallMaps" Height="27px"  BackColor="Blue" OnCommand="CommonSmallMapImageButton_Command" Width="50px" />
                            </asp:Panel>
                        </ItemTemplate>
                        <LayoutTemplate>
                            <div class="MyListView RadListView RadListViewFloated RadListView_<%# Container.Skin %>">
                                <div  class="rlvFloated rlvAutoScroll">
                                    <div id="itemPlaceholder" runat="server">

                                    </div>
                                </div>
                            </div>
                        </LayoutTemplate>
                    </telerik:RadListView>
                    <asp:XmlDataSource ID="SMapXmlDataSource" runat="server" DataFile="~/Common/xml/SMaps.xml"
                        XPath="SmallMaps/SMap">
                    </asp:XmlDataSource>

Please, I need an explaination about the above issue (removing the white space from the item),
It is appreciated to send me the modified code.

Regards,
Bader

[Dimo]

Hi Bader,

You have a 27px high image button inside a 30px high RadListView item. In addition, you may need to set style="vertical-align:bottom" to the image button, as the default value of "baseline" causes small white space below the button.

Regards,
Dimo
the Telerik team