This is a migrated thread and some comments may be shown as answers.

Toolbar template images overlap

1 Answer 146 Views
Toolbar
This is a migrated thread and some comments may be shown as answers.
Anamika
Top achievements
Rank 1
Anamika asked on 23 May 2017, 11:01 AM

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

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 25 May 2017, 08:25 AM
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.
Tags
Toolbar
Asked by
Anamika
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or