detailbutton position

8 posts, 0 answers
  1. axel
    axel avatar
    57 posts
    Member since:
    Jan 2010

    Posted 15 Jan 2015 Link to this post

    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





  2.
  3. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 19 Jan 2015 Link to this post

    Hello Axel,

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

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. axel
    axel avatar
    57 posts
    Member since:
    Jan 2010

    Posted 19 Jan 2015 in reply to Petyo Link to this post

    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
  7. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 21 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. axel
    axel avatar
    57 posts
    Member since:
    Jan 2010

    Posted 21 Jan 2015 in reply to Petyo Link to this post

    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

  11. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 23 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. axel
    axel avatar
    57 posts
    Member since:
    Jan 2010

    Posted 23 Jan 2015 in reply to Petyo Link to this post

    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

  14.
  15. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 27 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top