This is a migrated thread and some comments may be shown as answers.

[Solved] Vertical Test Align of Button Group Inconsistent

2 Answers 518 Views

ButtonGroup

This is a migrated thread and some comments may be shown as answers.

Jonathan asked on 23 Jun 2015, 01:38 PM

toolbaralign.zip

buttongroup.png

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>

[Solved] Vertical Test Align of Button Group Inconsistent

2 Answers, 1 is accepted