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
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;"><!-- .... -->Iliana Nikolova
Telerik
Rank 1
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