How to allign items in horizontal direction inside listbox

16 posts, 0 answers
  1. jeevitha
    jeevitha avatar
    63 posts
    Member since:
    Sep 2008

    Posted 04 Dec 2009 Link to this post

    Hi,

    I need to allign My listbox items in Horizontal ditection inside listbox. how to do it

    Thsnk,
    Jeevitha
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 07 Dec 2009 Link to this post

    Hi jeevitha,

    I suggest that you try the following CSS:

    <style type="text/css">
            .rlbItem
            {
                float:left !important;
            }
            .rlbGroup, .RadListBox
            {
                width:auto !important;
            }
        </style>

    Greetings,
    Genady Sergeev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 12 Jan 2010 Link to this post

    Can anyone follow up on this?
    Should the proposed answer work as expected?
  5. Vesko
    Vesko avatar
    122 posts
    Member since:
    Mar 2009

    Posted 15 Jan 2010 Link to this post

    It should work, why don't you try it?
  6. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 15 Jan 2010 Link to this post

    I did after which nothing was being rendered in the list box...
  7. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 15 Jan 2010 Link to this post

    Hello guys,

    I have once again tested the provided CSS and on my machine the result was correct. I have attached a screenshot for reference.


    Sincerely yours,
    Genady Sergeev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Sukhi S.S
    Sukhi S.S avatar
    4 posts
    Member since:
    Feb 2010

    Posted 01 Mar 2010 Link to this post

    What is the xaml equivalent of ur CSS style ?pls provide.
    also,

    <ListBox.ItemTemplate > 
     <DataTemplate > 
    <Image Source="{Binding IconPath}" Margin="0 0 3 0" HorizontalAlignment="Center" Width="35" Height="30" Grid.Row="0"/> 
                                  
     <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" Foreground="Gold" Grid.Row="1"/> 
     
     <TextBlock Text="{Binding Author}" HorizontalAlignment="Center"  Foreground="Gold" Grid.Row="2"/> 
     
    </DataTemplate> 
    </ListBox.ItemTemplate> 


    One set of listbox item includes 1 image n 2 textboxes which align vertically in rows 0,1, and 2.
    second set onwards : regular behaviour is items gets added vertically ,
    instead, every set has to align horizontally.ie, next image n textboxes has to adjust in next grid.column dynamically
  9. Devendra
    Devendra avatar
    2 posts
    Member since:
    Jun 2010

    Posted 07 Jul 2010 Link to this post

    <style type="text/css">
            .rlbItem
            {
                float:left !important;
            }
            .rlbGroup, .RadListBox
            {
                width:auto !important;
            }
        </style>

    Hi i tried to your style to align items horizontally inside RadListBox and it works, only problem is if say there are more than one RadListbox and i want to apply the style only to specfic list box how to do I do it.
  10. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 08 Jul 2010 Link to this post

    Hello Devendra,

    You should set CssClass property of the needed listbox for example to "horizontalListbox" and then change your styles like this:

    <style type="text/css">
            .horizontalListbox .rlbItem
            {
                float:left !important;
            }
            .horizontalListbox  .rlbGroup, .RadListBox
            {
                width:auto !important;
            }
        </style>

    the styles will be applied only to this listbox.

    Regards,
    Yana
    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
  11. vivek
    vivek avatar
    24 posts
    Member since:
    Oct 2010

    Posted 09 Nov 2010 Link to this post

    Hi,

    I am populating data in RadListBox at runtime. Problem is the data into the RadListbox ia not left alligned. Could you please help me to align my data from the left. Currently it is center alligned. Is there any property to set. Please provide me sample.

    Thanx in advance
    Vivek
  12. Jerry
    Jerry avatar
    4 posts
    Member since:
    Sep 2012

    Posted 02 Jul 2012 Link to this post

    This style works good.  Is there a way style the drag and drop functionality of list items in a horizontal listbox (similar to column drag and drop in a grid view)? 
    Thanks
    , Jerry
  13. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 03 Jul 2012 Link to this post

    Hi Jerry

    Try the following code snippet to style the dragged item.

    JS:
    <script type="text/javascript">
        function OnClientDragStart(sender, args) {
            args.get_htmlElement().style.backgroundColor = "Red";
        }
    </script>

    Hope this helps.

    Thanks,
    Princy.
  14. Jerry
    Jerry avatar
    4 posts
    Member since:
    Sep 2012

    Posted 03 Jul 2012 Link to this post

    Thanks for the response, though I did not see red effect.  What I'm trying to do is get the reorder arrows to behave horizontally to identify where the item will be dropped.   As it stands the arrows jump around to the left of the horizontal list.  I also can't get the box around the list to go away, but that's not as important.  Below is test code.

    <%@ Page Language="C#" AutoEventWireup="true" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title>test</title>
        <style type="text/css">
            .horizontalListbox {
                border: 0px;
            }
            .horizontalListbox .rlbItem {
                float: left !important;
            }
            .horizontalListbox .rlbGroup, .RadListBox {
                width: auto !important;
            }
        </style>
        <script type="text/javascript">
            function OnClientDragStart(sender, args) {
                args.get_htmlElement().style.backgroundColor = "Red";
            }
        </script>
    </head>
    <body>
        <form runat="server" id="mainForm" method="post">
        <telerik:RadScriptManager ID="RadScriptManager" runat="server" />
            <telerik:RadListBox runat="server" EnableViewState="false" CssClass="horizontalListbox"
                ID="demoListBox" CheckBoxes="true" AllowReorder="true" EnableDragAndDrop="true">
                <ButtonSettings ShowReorder="false" />
                <Items>
                    <telerik:RadListBoxItem Text="Item 1" Checked="true" />
                    <telerik:RadListBoxItem Text="Item 2" Checked="true" />
                    <telerik:RadListBoxItem Text="Item 3" />
                    <telerik:RadListBoxItem Text="Item 4" Checked="true" />
                </Items>
            </telerik:RadListBox>
        </form>
    </body>
    </html>


  15. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 03 Jul 2012 Link to this post

    Hi Jerry,

    After inspecting your code I found that you are not attaching the events to the RadListBox. Here is the full code that I tried.

    CSS:
    <style type="text/css">
        .horizontalListbox
            {
                border: 0px;
            }
        .horizontalListbox .rlbItem
            {
                float: left !important;
            }
        .horizontalListbox .rlbGroup, .RadListBox
            {
                width: auto !important;
            }
    </style>

    ASPX:
    <telerik:RadListBox runat="server" EnableViewState="false" CssClass="horizontalListbox" OnClientDragStart="OnClientDragStart" ID="demoListBox" CheckBoxes="true" AllowReorder="true" EnableDragAndDrop="true" OnClientDropped="OnClientDropped">
          <ButtonSettings ShowReorder="false" />
          <Items>
               <telerik:RadListBoxItem Text="Item 1" Checked="true" />
               <telerik:RadListBoxItem Text="Item 2" Checked="true" />
               <telerik:RadListBoxItem Text="Item 3" />
               <telerik:RadListBoxItem Text="Item 4" Checked="true" />
          </Items>
    </telerik:RadListBox>

    JS:
    <script type="text/javascript">
        function OnClientDragStart(sender, args) {
            args.get_htmlElement().style.backgroundColor = "Red";
        }
        function OnClientDropped(sender, args) {
            args.get_sourceItem()._element.style.backgroundColor = "";
        }
    </script>

    Hope this helps.

    Thanks,
    Princy.
  16. Daniel
    Daniel avatar
    40 posts
    Member since:
    Oct 2007

    Posted 06 Nov 2014 Link to this post

    i have a requirement to align the checkboxes and text in the RadListbox horizontally. I have made it to align using the property below.
            .rlbItem 
            {
                float:left;
            }

    Now the values are aligned, but they look in the below format.

    USA  England   
    INDIA   canada

    want it to be aligned in the below format

    USA     England
    INDIA   Canada

    Can you please help? This is urgent.



    sdf



  17. akshay
    akshay avatar
    1 posts
    Member since:
    May 2016

    Posted 11 May Link to this post

    For the first one row the items are displayed horizontally. But once the items cross the first row, when it enters second row the arrangement changes to vertical. How can i keep the arrangement horizontally?

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017