detailbutton position

[axel]

Hello,

is it possible to align the detailbutton in the middle of the red table cell?

<script type="text/x-kendo-template" id="customListViewTemplate">
    <table style="width:100%">
        <tr style="background-color:blue">
            <td style="width:30%">
                <img  src="${url}" />
            </td>
            <td style="background-color:red">
                <h3 style="float-left">${name}</h3>
                <a data-role="detailbutton" data-icon="more"/>
            </td>
        </tr>
        <tr >
            <td colspan="2" style="background-color: gray">
                <div>${description}</div>
            </td>
        </tr>
    </table>
</script>


Kind regards
axel

[Petyo]

Hello Axel,

yes, it is. You should override the default styling of the detail button - see screenshot. 

Regards,
Petyo
Telerik

 

 

[axel]

Hi Petyo.
Unfortunately it doesn't work.
I've created an example . Could you pls show me, how to align switch/detailbutton next to the input?

Thanks again
Axel

[Petyo]

Hello Axel,

the .km-detail button uses `right` CSS property to position itself - use your web browser inspector to verify that. You should override that property value in order to change its position. 

Regards,
Petyo
Telerik

 

 

[axel]

Hi Petyo,

this is only half of the solution. how do I get the button in the middle of the table row?
vertical-align: middle doesn't change anything

    .km-detail{
         position: relative;
         right: 0;
         margin: 0;
    }

and what's css for the switch?

example update

[Petyo]

Hi Axel,

vertical aligning of an element with CSS may be accomplished in various ways, and is by no means specific to the detail button widget (or the Kendo UI framework, for that matter). Feel free to try any of the suggestions google offers. 

I am not sure what you mean by "and what's css for the switch?". Can you please clarify? 

Regards,
Petyo
Telerik

 

 

[axel]

Hello Petyo

thanks for the clue.
The trick is to wrap the button into a div with following styles.

    .km-detail{
         position: relative;
         right: 0;
    }

    .wrapper{
        height:100%;
        vertical-align: middle;
    }

the only thing I need is the equivalent to km-detail for the switch.

Kind regards
axel

[Petyo]

Hello Axel,

Like I suggested previously, you can use your browser inspector to examine the structure and the css classes of the widget - take a look at the screenshot. 

Regards,
Petyo
Telerik