Simple RadListView Problem

4 posts, 0 answers
  1. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 21 Oct 2010 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 26 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 01 Nov 2010 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 02 Nov 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top