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

Recommended way to increase font size

6 Answers 975 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Frederic
Top achievements
Rank 1
Frederic asked on 19 Aug 2013, 08:31 PM
Hello,

I would like the tree view to be much bigger to be used with more ease on mobile.
What is the recommended way to increase the font size and preserving the features like drag & drop, and selected items.

Thank you

6 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 21 Aug 2013, 11:08 AM
Hi Frederic,

You can select the items in the TreeView using the CSS selector .k-item and set custom font-size based on your requirements. This will not break the drag & drop functionality or any of the other features. Please check the following example:

http://jsbin.com/ayeR/2/edit
 
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Frederic
Top achievements
Rank 1
answered on 21 Aug 2013, 12:38 PM
Thank you kiril,

it seems to work but it doesn't scale the "selected" state, and not the text while dragging. 
The expand/collapse target is also to small, and the dragging clue as well.

I have added that that make bigger the clue and selection
.
.k-treeview .k-item, .k-drag-clue {
font-size: 28px;
padding: 0 0 0 32px;
}
.k-treeview .k-in {
line-height: 28px;
}
Do you have a version of the icons in 32px instead of 16px?

thank you by advance

0
Accepted
Kiril Nikolov
Telerik team
answered on 21 Aug 2013, 03:23 PM
Hello Frederic,

Sorry for missing out the selected state and text for dragging, but I am glad that you had it figured out yourself. 

The icons shown in the TreeView are part of a sprite. Fortunately for us there is a sprite with icons two times larger than the normal ones. You can find this sprite in the styles folder and for each theme there is a file named sprite_2x.png. We use these icons when the widgets are shown on high-resolution display (like Retina for example), but will do the trick in our case.

You will need to override the path to the sprite, and then reposition them, so the correct icon is shown. I have prepared a small example showing a possible implementation in the attached file.

I hope this helps!
 
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Frederic
Top achievements
Rank 1
answered on 22 Aug 2013, 08:43 AM
thank you it's much better.

I changed the minus and plus because the arrow was pointing upward.

.k-treeview .k-minus{
            background-position: 0 -445px;
        }

        .k-treeview .k-plus{
            background-position: 0 -383px;
        }

The insertion caret doesn't appears, may be we are missing one more style or offset in the 2x sprite? 
0
Kiril Nikolov
Telerik team
answered on 22 Aug 2013, 10:18 AM
Hello Frederic,

Sorry I missed that. Adding the following rule seems to be fixing the problem:

.k-treeview .k-drop-hint{
        margin-top: -6px;
        width:160px ;
        height:10px;
        background-position: 0px -652px;
    }

I really hope this helps! 

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Frederic
Top achievements
Rank 1
answered on 23 Aug 2013, 09:01 AM
thank you it works
Tags
TreeView
Asked by
Frederic
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Frederic
Top achievements
Rank 1
Share this question
or