This is a migrated thread and some comments may be shown as answers.
Vertical Test Align of Button Group Inconsistent
2 Answers 65 Views
This is a migrated thread and some comments may be shown as answers.
Jonathan
Top achievements
Rank 1
Jonathan asked on 23 Jun 2015, 01:38 PM

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 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 25 Jun 2015, 01:30 PM

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!
 
0
Jonathan
Top achievements
Rank 1
answered on 27 Jun 2015, 09:08 AM

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

Asked by
Jonathan
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Jonathan
Top achievements
Rank 1
Share this question
or