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

Widget Display with changed Font Size

13 Answers 422 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
mgs
Top achievements
Rank 1
mgs asked on 07 May 2013, 06:36 PM
When changing a page's font size, the widgets do not display perfectly. Some parts of the widgets are mis-aligned, and other things happen.

For an example, open http://demos.kendoui.com/web/numerictextbox/index.html. Then with Chrome Developer Tools select the first "input type=text" and as the element's style enter a font size of 16px.
  • The "up/down" buttons will stay at their current location at the top of the span. They should be vertically centered instead.
  • The border at the left side of the "up/down" buttons is too short. There is a gap at the bottom.
What do you suggest? Is it easily possible to change the font size? Can some "magic" be applied globally? Or has this to be done widget for widget?

Michael G. Schneider

13 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 08 May 2013, 07:56 AM
Hello Michael,

Although building auto-adjustable widget layouts is always better and recommended, in some cases this is not feasible. Here is a demo with the NumericTextBox and DateTimePicker that you can use as a reference.

http://jsfiddle.net/dimodi/Mkc9T/


Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
mgs
Top achievements
Rank 1
answered on 08 May 2013, 08:40 AM
Hello Dimo,

thanks a lot for the answer. So each widget has to be looked at and some modification has to be done. I appreciated, if this changed in the future.
  • Either all widgets should be written, so they adjust automatically.
  • Or the adjustment is done by your customers by setting some variables in the LESS and then generating a specific CSS .
With a framework like Bootstrap it is quite common that the font size is 14 pixels or greater. Then delivering a pixel-perfect user interface does not happen automatically.

Michael G. Schneider
0
Kamen Bundev
Telerik team
answered on 14 May 2013, 07:39 AM
Hello Michael,

The Kendo UI Widgets behavior on changing font-size have been updated and the icons and buttons will resize accordingly. The fix will be available with the Q1 service pack that will be released this week.

Kind regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Accepted
mgs
Top achievements
Rank 1
answered on 14 May 2013, 08:26 AM
Hello Kamen,

thanks a lot for the answer. This is really cool that a fix - even with icon resizing - was possible so fast.

Michael G. Schneider
0
mgs
Top achievements
Rank 1
answered on 14 May 2013, 06:24 PM
Hello Kamen,

I tried SP1. There are some improvements. For example, the border on the left side of the up/down arrows isn't broken any more.

However, regarding the icons the situation is the same. They are not positioned correctly. And they do not resize.

Michael G. Schneider
0
Kamen Bundev
Telerik team
answered on 15 May 2013, 04:46 AM
Hi Michael,

We can't resize the icons - this would expose the rest of the sprite in there, so the problem is harder to fix (and yes we are aware of it). The fix that we plan is to move the event handlers to the icon containers, thus covering the whole button on the side. However there are some gotchas like the DateTimePicker where there is one containing element with two icons in it and to support that, we need more careful planning and testing. This is the reason we left it for the next release.

Kind regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
mgs
Top achievements
Rank 1
answered on 15 May 2013, 05:58 AM
Hello Kamen,

thanks a lot for the answer. I think that resizing the icons is not that important. It would be much more important, if the position of the icons were correct (vertically aligned in the middle of the box).

For typical font size, maybe 10px to 24px, the current icon's size looks fine. However, even with fonts in this range the icons don't look good, if they are positioned to the top of the surrounding box.

Michael G. Schneider
0
Kamen Bundev
Telerik team
answered on 15 May 2013, 07:01 AM
Hello Michael,

Are you sure that you're testing with the Q1 2013 SP1 version, since I'm seeing a completely different rendering in our demos - check the attached screenshot. In fact, the NumericTextBox is the only Kendo UI picker Widget that uses separate containers for the icons and its hot zones are now big enough and resized accordingly with different font sizes.

Kind regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
mgs
Top achievements
Rank 1
answered on 15 May 2013, 07:18 AM
Hello Kamen,

thanks a lot for the answer. Yes, I do see the behaviour in SP1. I see it in my own environment and also on the demo website. Actually the screenshot that I sent some minutes ago was produced on the Kendo demo website.

How did you make the font size bigger?

I did as described in my initial post in this thread. Would you please try the steps that I described there.

Michael G. Schneider
0
Kamen Bundev
Telerik team
answered on 15 May 2013, 07:47 AM
Hi Michael,

The steps you describe would not work - our picker Widgets "swallow" the inputs they are instantiated from and since the input is inside the Widget, it can't affect its rendering when you change it from the Chrome Dev Tools. It will work if you change the font-size beforehand - the pickers copy the font properties of the input, or alternatively you can change the font size of one of the containers around the picker (font is inherited through the DOM).

Regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
mgs
Top achievements
Rank 1
answered on 15 May 2013, 07:55 AM
Hello Kamen,

thanks a lot for the answer. I also saw the described behaviour in real-world-example, not only in the Developer Tools. For example, if the font size of all input elements is defined in CSS...
input[type="text"].k-input {
   font-size: 30px;
}
then the icons will be at the top of the surrounding box. But I do understand your point and I will take care of the font-size flowing into the widget from its parents DOM elements.

Michael G. Schneider
0
Kamen Bundev
Telerik team
answered on 15 May 2013, 08:08 AM
Hi Michael,

The reason this CSS rule doesn't work is almost the same as with the Developer Tools - the inputs receive the class .k-input *after* the Widgets are initialized, thus the CSS doesn't have any effect on init. If you change it like this:
input[type="text"] {
     font-size: 30px;
}

it should work.

All the best,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Accepted
mgs
Top achievements
Rank 1
answered on 15 May 2013, 08:39 AM
Hello Kamen,

thanks a lot for the answer. Actually, if the selector is simply
input[type="text"]
the font size won't change at all, as some Kendo styling
.k-input[type="text"] {
   font-size: 100%;
}
overrules my styling. That was the reason why I had put more specificity into my rule. Also when
input[type="text"] {
   font-size: 30px!important;
}
is coded, the font gets bigger, but the icons are not at the correct position.

But now I do understand the actual cause of the problem.

Michael G. Schneider

Tags
General Discussions
Asked by
mgs
Top achievements
Rank 1
Answers by
Dimo
Telerik team
mgs
Top achievements
Rank 1
Kamen Bundev
Telerik team
Share this question
or