Validation messages without breaking the layout?

6 posts, 0 answers
  1. Hans
    Hans avatar
    14 posts
    Member since:
    Jul 2013

    Posted 08 Aug 2013 Link to this post

    Is it possible to configure the validation messages to be displayed without breaking the layout? i.e. to be displayed with a z-index or somehow so that things "below" them won't get shifted ? (maybe in the form of sticky tooltips?)

    regards
  2. Petyo
    Admin
    Petyo avatar
    2440 posts

    Posted 12 Aug 2013 Link to this post

    Hi Hans,

    you can customize the messages look and feel using CSS - for example, by setting their position to absolute. A general article about customizing the look of Kendo UI Widgets can be found here. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Hans
    Hans avatar
    14 posts
    Member since:
    Jul 2013

    Posted 12 Aug 2013 Link to this post

    Thank you for your reply.

    >  you can customize the messages look and feel using CSS - for example, by setting their position to absolute
    I tried, but if I use absolute with a width, and display a form in a window, it will introduce a horizontal scroll bar in that window :( , it won't extend over the frame.

    I was hoping more of a default behavior from the side of Kendo UI since this is such a common behavior need in all forms.
    For the Form errors, something like the Bootstrap Popovers:
    http://getbootstrap.com/2.3.2/javascript.html#popovers
    but without the title bar would be much more user friendly.

    > A general article about customizing the look of Kendo UI Widgets can be found here.
    Thanks for the link. I red the entire available docu before posting questions here, but that document is just too vague and is not listing nor explaining all relevant styles IMO.

    regards.
  4. Petyo
    Admin
    Petyo avatar
    2440 posts

    Posted 14 Aug 2013 Link to this post

    Hi,

    I do not think that an element may be visible outside of the frame boundaries; of course I may be wrong, so please correct me if this is not so. In general, the look of the bootstrap popovers (as well as their positioning) may be achieved with CSS, by customizing the validation hints rules. Please take a look at this customized sample as a starting point for the approach.

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Hans
    Hans avatar
    14 posts
    Member since:
    Jul 2013

    Posted 14 Aug 2013 Link to this post

    >> I tried, but if I use absolute with a width, and display a form in a
    >> window, it will introduce a horizontal scroll bar in that window :( , it
    >> won't extend over the frame.
    > I do not think that an element may be visible outside of the frame boundaries;
    Sorry, I mean a modal(or not) Kendo UI Window object's frame. The Form is in a Kendo UI Window, or another Kendo UI Container, and I would not like to introduce scroll bars in that container or break the layout, but display those validation messages over that frame (using a higher z-index?).

    regards.
  6. Petyo
    Admin
    Petyo avatar
    2440 posts

    Posted 15 Aug 2013 Link to this post

    Hi,

    I am afraid that such behavior cannot be achieved using CSS. in order for the validation messages to pop on top of the widget, they should be moved out of the container into the body. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top