toolbar items won't show

7 posts, 0 answers
  1. Phil
    Phil avatar
    18 posts
    Member since:
    Nov 2012

    Posted 11 May 2015 Link to this post

    I'm creating a toolbar with Kendo UI Mobile.  None of the items set to overlow:always will show up.  What am I doing wrong?

     <div data-role="toolbar" data-items='[  
     {
    id:"btnAdd",
    type:"button",
    align:"right",
    overflow:"never",
    icon:"add",
    text:"Add"
     },
     {
    id:"btnSearch",
    type:"button",
    align:"right",
    icon:"search",
    text:"Search",
    overflow:"auto"
     },
     {
    id:"btnCampus",
    type:"button",
    align:"right",
    icon:"home",
    text:"Switch Campus",
    overflow:"always"
     },
     {
    id:"btnLogout",
    type:"button",
    align:"right",
    icon:"reply",
    text:"Logout",
    overflow:"always"
     }

    ]'>
    </div>

     

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 14 May 2015 Link to this post

    Hello Phil,

    I prepared an example based on your code:
    The tools with overflow: "always" are located in the overflow popup, because overflow: "always" says that they should always stay in the overflow popup.

    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. Phil
    Phil avatar
    18 posts
    Member since:
    Nov 2012

    Posted 14 May 2015 Link to this post

    So, based on my testing, this seems to be an iPad issue.  It works on the iPhone and I see that your example works on the web, but when I use this on an iPad or even the iPad simulator, the overflow buttons are gone.  The menu icon (3 dots) does not even generate and so there is no way to get to the buttons.  Is this intentional?
  4. Phil
    Phil avatar
    18 posts
    Member since:
    Nov 2012

    Posted 14 May 2015 Link to this post

    So, based on my testing, this seems to be an iPad issue.  When I first run in the simulator, the overflow menu does not show.  I click "Refresh" and the menu now shows.  On a physical device, the menu NEVER shows.  This is the same code shown above.
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 19 May 2015 Link to this post

    Hi Phil,

    Could you please provide a Kendo Dojo test page where I can reproduce the issue?
    The Dojo example which I provided in my previous post seems to be working as expected.

    Looking forward to your reply.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Phil
    Phil avatar
    18 posts
    Member since:
    Nov 2012

    Posted 19 May 2015 in reply to Alexander Valchev Link to this post

    I modified the dojo post at http://dojo.telerik.com/OZOwA/2 to show exactly what I am doing.  I also found the issue while I was at it.  

     If I specify 

    new kendo.mobile.Application(document.body, {           
                transition: 'slide',
                initial: 'index.html'            
            });

     then I do not see the overflow menu.  If I specify

    new kendo.mobile.Application(document.body, {           
                transition: 'slide'          
            });

     then I DO see the overflow menu.  Somehow specifying the "initial" parameter changes the behavior.  I am not sure how to do this in the dojo sample as I don't really have an HTML page name, but this works 100% of the time in the AppBuilder simulator.

  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 22 May 2015 Link to this post

    Hello Phil,

    I prepared example which uses remote initial View but did not manage to reproduce the issue.
    Could you please check the attached files and let me know what I am missing.

    In order to run the example you should host it on a local server and open it with an iPad.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top