Kendo Upload widget issue

2 posts, 0 answers
  1. Lingampally
    Lingampally avatar
    1 posts
    Member since:
    Sep 2017

    Posted 21 Sep Link to this post

    I am using Kendo JSP upload tag to upload files in my page. When i use Kendo upload button without any styles, it is not coming next to my file to upload label and it is displayed in the bottom of file to upload label. I want both file to upload and select file button align in the same line (please check the attachment). when i add the styles to kendo upload button, which changes the display of other input fields in my page. One more thing, when i use this button i am not able to see the file i selected, which comes default when their is no styles (please see uploadPage.PNG file). But when i add 

    .k-upload{
        display: inline-block;
        min-width: 26em;
        max-width: 26em;
        max-height: 3em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }    

    this css class, it is not showing the file i selected. I want both file to upload and select file in the same line and show the file i selected inside the select file box by restricting user to upload 1 file at a time. Please help me on this, as i am newbie to kendo.

    Please specify is their any reference which we can use to align kendo upload button properly with other buttons and labels by changing its default width/height.

     

    Thanks,

    Srujana

     

     

     

     

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    558 posts

    Posted 25 Sep Link to this post

    Hello Srujana,

    In order to display the Upload widget wrapper on the same line as its label, you will need to set its display CSS property to inline-block:
    .k-upload {
            display: inline-block;
            max-height: 116px;
          }

    With the above, you will also notice, that I have set a max-height for the wrapper.

    Here you will find a simple Dojo, implementing the above suggestion.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    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.
Back to Top