Vertical Test Align of Button Group Inconsistent

3 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    2 posts
    Member since:
    Nov 2014

    Posted 23 Jun 2015 Link to this post

    I am having difficulty ensuring that the text in my buttongroup widget is consistently vertically aligned with adjacent widgets. 

    For instance I have created my own toolbar to show the problem and displayed it along side the kendo toolbar. I cannot get the text in the buttongroup  to be vertically aligned with the other widgets in my toolbar. However in the Kendo toolbar the text is all consistently vertically aligned. I have tried setting vertical-align and line-height but these failed. Please explain how I can show a buttongroup in my toolbar with the text consistently vertically aligned with the other widgets.

     

    My HTML is:

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head lang="en">
        <meta charset="UTF-8">
        <title>ButtonGroup Test</title>
        <style>
            body { background-color: dimgrey; }
        </style>
    </head>
    <body ng-controller="AppCtrl" style="font-size: 80%; font-family: 'Arial' ">
     
    <div kendo-toolbar k-options="toolbarOptions"></div>
     
    <div style="height: 5px;"></div>
     
    <div style="background-color: white; padding: 5px;">
     
        <select kendo-drop-down-list style='width: 150px;'>
            <option>Paragraph1</option>
            <option>Paragraph2</option>
        </select>
     
        <kendo-button>Button</kendo-button>
     
        <kendo-mobile-button-group style="display: inline-block;">
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
        </kendo-mobile-button-group>
     
        <kendo-button  style="float: right;" sprite-css-class="'k-icon k-i-hbars'" ></kendo-button>
     
    </div>
     
    <script type="text/javascript" src="../vendors/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../vendors/angular/angular.min.js"></script>
    <link rel="stylesheet" href="../vendors/kendo/styles/kendo.common.css" />
    <link rel="stylesheet" href="../vendors/kendo/styles/kendo.default.mobile.css" />
    <link rel="stylesheet" href="../vendors/kendo/styles/kendo.default.css" />
    <script src="../vendors/kendo/js/kendo.all.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
     
    </body>
    </html>

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 25 Jun 2015 Link to this post

    Hi Jonathan,

    Setting line-height to the <div style="background-color: white; padding: 5px;> should help to resolve the issue: 

    <!-- .... -->
    <div style="background-color: white; padding: 5px; line-height: 1.2;">
    <!-- .... -->

    Regards,
    Iliana Nikolova
    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. Jonathan
    Jonathan avatar
    2 posts
    Member since:
    Nov 2014

    Posted 27 Jun 2015 in reply to Iliana Nikolova Link to this post

    Thank you Iliana for your response.

    Unfortunately your suggestion did not work. I have have now removed the kendo-mobile-button-group widget from my toolbar and create my own AngularJS directive buttongroup using non mobile kendo-button widgets. This aligns correctly.

    Thanks for your reply however, it is still appreciated.

    Jonathan

Back to Top