How to align/float the toolbar button

10 posts, 0 answers
  1. Winnie
    Winnie avatar
    7 posts
    Member since:
    Sep 2014

    Posted 30 Oct 2014 Link to this post

    <div id="toolbar"></div>

    <script>
    $("#toolbar").kendoToolBar({
    items: [
    { type: "button", text: "foo", imageUrl: "foo.png" },
    { type: "button", text: "bar", imageUrl: "bar.png" },
    { type: "button", text: "baz", imageUrl: "baz.png" }
    ]
    });
    </script>

    In the above example, I would like to 
    1. Change the image of foo button to the right but keep the image of bar and baz button to the left
    2. Float bar and baz button to right but foo button to left

    Thanks so much for your help.



  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 03 Nov 2014 Link to this post

    Hi Winnie,

    Please check the following example as it demonstrates how this can be achieved.
       - http://dojo.telerik.com/EFeFi

    Regards,
    Alexander Valchev
    Telerik
     
    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
  4. Winnie
    Winnie avatar
    7 posts
    Member since:
    Sep 2014

    Posted 04 Nov 2014 in reply to Alexander Valchev Link to this post

    Thanks Alexander
  5. Nathan
    Nathan avatar
    4 posts
    Member since:
    Nov 2014

    Posted 02 Dec 2014 Link to this post

    Is there any way to do this with a 'template' item?

    I've tried the recommended solution and while it works for things like buttons, I can't get it to work with a template even if my css class includes float: right.

    I think it's because my template is being wrapped inside a div created by Kendo:

    <div data-uid="5d10ddc6-b4c9-4e2d-bf32-634897d3851b" data-overflow="never" style="visibility: visible;" class="ng-scope">
     
    <div class="search">
      <button kendo-button="" class="search-icon k-button k-button-icon" icon=""search"" data-role="button" role="button" aria-disabled="false" tabindex="0">
      <span class="k-icon k-i-search"></span></button><input class="search-input" type="text" placeholder="Search">
    </div>
     
    </div>


    {
      template:
      "<div class='search'>" +
       "<kendo-button class='search-icon' icon='\"search\"'></kendo-button>" +
       "<input class='search-input' type='text' placeholder='Search'>" +
       "</div>",
      attributes: { style: "float: right" }
    },
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 04 Dec 2014 Link to this post

    Hi Nathan,

    Your observation is correct. The template content is wrapped by the ToolBar widget.
    Currently the attributes options are not applied when there is a template because we assume that the developer will write them directly in the template. In your scenario however the float should be applied to the wrapper.

    We will change the behaviour - the attributes options will be set to the template wrapper (for items that have a template). The fix will be published in the next internal build which should be uploaded at the end of the week.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Hannah
    Hannah avatar
    1 posts
    Member since:
    Jul 2014

    Posted 26 Feb 2015 Link to this post

    When adding a few more buttons on the left side to the example above and then adjusting the browser width, the right-float buttons fall out of the grey toolbar background. What is a good way to fix this?

    http://dojo.telerik.com/EFeFi/10
  8. Nate
    Nate avatar
    15 posts
    Member since:
    Dec 2014

    Posted 26 Feb 2015 in reply to Hannah Link to this post

    I'm not sure what your end goal is, but you can "extend the toolbar" by setting the overflow property on the toolbar (at least this works in the example above).  This will push the button down to the right but also keep it contained within the "toolbar".

    try setting the style of your kendo toolbar to use: autoflow:auto.

    Here's an example but you may need to tweak it to get it to work for your particular scenario.

    k-toolbar {
       overflow: auto;
    }
  9. Nate
    Nate avatar
    15 posts
    Member since:
    Dec 2014

    Posted 26 Feb 2015 in reply to Hannah Link to this post

    Try autoflow:auto on the gird.
  10. Nate
    Nate avatar
    15 posts
    Member since:
    Dec 2014

    Posted 26 Feb 2015 Link to this post

    Try using 'overflow: auto' on the toolbar's style.
  11. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 02 Mar 2015 Link to this post

    Hello Hannah,

    the behavior you describe is the default browser one when it comes to floated elements - they do not stretch the container. You may try any of the suggestions provided by this google search.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready