This is a migrated thread and some comments may be shown as answers.

How to allign items in horizontal direction inside listbox

15 Answers 680 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
jeevitha
Top achievements
Rank 1
jeevitha asked on 04 Dec 2009, 06:41 AM
Hi,

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

Thsnk,
Jeevitha

15 Answers, 1 is accepted

Sort by
0
Genady Sergeev
Telerik team
answered on 07 Dec 2009, 01:50 PM
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.
0
towpse
Top achievements
Rank 2
answered on 12 Jan 2010, 02:34 PM
Can anyone follow up on this?
Should the proposed answer work as expected?
0
Vesko
Top achievements
Rank 2
answered on 15 Jan 2010, 08:08 AM
It should work, why don't you try it?
0
towpse
Top achievements
Rank 2
answered on 15 Jan 2010, 12:43 PM
I did after which nothing was being rendered in the list box...
0
Genady Sergeev
Telerik team
answered on 15 Jan 2010, 02:14 PM
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.
0
Sukhi S.S
Top achievements
Rank 1
answered on 01 Mar 2010, 10:22 AM
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
0
Devendra
Top achievements
Rank 1
answered on 07 Jul 2010, 05:29 PM
<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.
0
Yana
Telerik team
answered on 08 Jul 2010, 08:31 AM
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
0
vivek
Top achievements
Rank 1
answered on 09 Nov 2010, 10:14 AM
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
0
Jerry
Top achievements
Rank 1
answered on 03 Jul 2012, 12:05 AM
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
0
Princy
Top achievements
Rank 2
answered on 03 Jul 2012, 10:20 AM
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.
0
Jerry
Top achievements
Rank 1
answered on 03 Jul 2012, 03:25 PM

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>


0
Princy
Top achievements
Rank 2
answered on 04 Jul 2012, 04:49 AM
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.
0
akshay
Top achievements
Rank 1
answered on 11 May 2016, 01:20 PM

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?

0
ELNG
Top achievements
Rank 1
answered on 15 Mar 2017, 06:09 PM

Hi,

Can anybody advice how to apply width% for the horizontal orientation of the radlistbox, i am using the below css:

       .clsHorizontal .rlbItem
    {
        float: left !important;
    }
    .clsHorizontal .rlbGroup, .clsHorizontal .RadListBox
    {
        width: auto !important;
    }

 

Thank you

Tags
ListBox
Asked by
jeevitha
Top achievements
Rank 1
Answers by
Genady Sergeev
Telerik team
towpse
Top achievements
Rank 2
Vesko
Top achievements
Rank 2
Sukhi S.S
Top achievements
Rank 1
Devendra
Top achievements
Rank 1
Yana
Telerik team
vivek
Top achievements
Rank 1
Jerry
Top achievements
Rank 1
Princy
Top achievements
Rank 2
akshay
Top achievements
Rank 1
ELNG
Top achievements
Rank 1
Share this question
or