Widget Display with changed Font Size

14 posts, 2 answers
  1. mgs
    mgs avatar
    163 posts
    Member since:
    Jan 2011

    Posted 07 May 2013 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 08 May 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. mgs
    mgs avatar
    163 posts
    Member since:
    Jan 2011

    Posted 08 May 2013 Link to this post

    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
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 14 May 2013 Link to this post

    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!
  6. Answer
    mgs
    mgs avatar
    163 posts
    Member since:
    Jan 2011

    Posted 14 May 2013 Link to this post

    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
  7. mgs
    mgs avatar
    163 posts
    Member since:
    Jan 2011

    Posted 14 May 2013 Link to this post

    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
  8. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 14 May 2013 Link to this post

    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!
  9. mgs
    mgs avatar
    163 posts
    Member since:
    Jan 2011

    Posted 15 May 2013 Link to this post

    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
  10. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 May 2013 Link to this post

    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!
  11. mgs
    mgs avatar
    163 posts
    Member since:
    Jan 2011

    Posted 15 May 2013 Link to this post

    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
  12. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 May 2013 Link to this post

    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!
  13. mgs
    mgs avatar
    163 posts
    Member since:
    Jan 2011

    Posted 15 May 2013 Link to this post

    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
  14. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 May 2013 Link to this post

    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!
  15. Answer
    mgs
    mgs avatar
    163 posts
    Member since:
    Jan 2011

    Posted 15 May 2013 Link to this post

    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

Back to Top
Kendo UI is VS 2017 Ready