Toolbar template images overlap

2 posts, 0 answers
  1. Anamika
    Anamika avatar
    150 posts
    Member since:
    Mar 2014

    Posted 23 May Link to this post

    Hello,

    I am using templates with ahref for Kendo toolbar, but the Images dont Show. Only one Show full rest is cut or overlapped i believe

    @(Html.Kendo().ToolBar()
    .Name("ToolBar")
    .Resizable(true)
    .Items(items =>
    {           
                items.Add().Template("<a href='javascript: void(0)' class='abutton save' onclick='GoBack()' title='Speichern' > </a>");

    items.Add().Template("<a href='javascript: void(0)' class='abutton delete' onclick='onDelete()' title='löschen'> </a>");
                   
                 items.Add().Template("<a href='javascript: void(0)' class='abutton goback' onclick='GoBack()' title='Zurück zur Liste' > </a>");

    })
    )

     

    my css

    .abutton.save {
    background: url('@Url.Content("~/Images/Save_new.png")');
    background-repeat: no-repeat;
    height:40px;
    width:40px;
    vertical-align:middle;
    }
    .abutton.goback {
    background: url('@Url.Content("~/Images/arrow_left.png")');
    background-repeat: no-repeat;
    height:40px;
    width:40px;
    vertical-align:middle;
    }
    .abutton.delete {
    background: url('@Url.Content("~/Images/delete.png")');
    background-repeat: no-repeat;
    height:40px;
    width:40px;
    vertical-align:middle;
    }

    What am i doing wrong

     

    Thanks

     

    Anamika

  2. Dimitar
    Admin
    Dimitar avatar
    356 posts

    Posted 25 May Link to this post

    Hello Anamika,

    As anchors are inline elements, they do not accept width and height by default, so your images are not visible. In order to overcome this, you may set them CSS rule display: inline-block. Another approach is to use img tag instead. The following Dojo sample shows both approaches. Besides that, I would suggest you to consider using font icons, which Kendo UI provides since R1 2017. The following Dojo sample shows buttons with icons only. And you may also use templates with icons to define your markup - Dojo sample.

    I hope the above solutions would help you to achieve the desired result.
    Feel free to contact us again, if you have any questions.

    Regards,
    Dimitar
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top