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
>