Toolbar template images overlap

[Anamika]

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

[Dimitar]

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