Right align multiselect widget

2 posts, 1 answers
  1. Rinck
    Rinck avatar
    23 posts
    Member since:
    Feb 2013

    Posted 03 Apr 2013 Link to this post

    Hi,

    I just started using Kendo UI and am still trying to get my head around the css structure.
    I am trying to make sure a multi select element is aligned to the right of it's parent div ( see image ).

    The HTML code I have is as follows (where the PHP code generates the 2 multiselect widgets) and is used in conjunction with Twitter Bootstrap:
    <div class="row-fluid">
        <div class="span5 tfw-right"><?php echo $this->front_mould_codes; ?></div>
        <div class="span2 tfw-center">mould code(s)</div>
        <div class="span5 tfw-left"><?php echo $this->back_mould_codes; ?></div>
    </div>
    the .tfw-classes are defined as follows:
    div.tfw-left {
        text-align: left;
    }
    div.tfw-right {
        text-align: right;
    }
    div.tfw-center {
        text-align: center;
    }
    I can see using Firebug that this alignment is active, but it's not effective. I also tried changing the display to inline-block, but that didn't have the desired result either.
    Maybe it's just late and I am looking at it all wrong right now, but some help would be greatly appreciated! :)
    Regards,
    Rinck
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 05 Apr 2013 Link to this post

    Hi Rinck,

    In order to right align the Kendo UI MultipleSelect widgets in their parents you can float: right the the .k-multiselect elements. For your convenience I prepared a simple jsBin example which demonstrates the suggested approach in action.
     
    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top