How to make the file list appear to the right of to the 'Select' button and dropzone rather than beneath it.

[Murray]

The <ul> containing the list of files by default appears beneath the button and dropzone. How can I move it so it appears to the right instead?

[Georgi]

Hi Murray,

Thank you very much for the details provided.

From what I understood from your question, you are currently utilizing the Kendo UI for Angular FileSelect and are looking for an approach that would allow you to modify the styling of the component in such a manner that the list of files is on the right side of the button and the drop zone:

Please, let me know if I misinterpreted the requirement.

One possible approach that would allow the developer to achieve the desired layout for the FileSelect component would be to utilize the .k-upload CSS selector and set the width to 100% and the display to flex:

.k-upload{
    width: 100%;
    display: flex;
}

Having done that, the developer can then use the .k-dropzone.k-upload-dropzone and the .k-upload-files.k-reset CSS selectors in the NgAfterViewInit lifecycle hook and the event handler of the valueChange event to dynamically adjust the widths of the drop zone and the list of files:

ngAfterViewInit() {
    let dropzone = document.querySelector('.k-dropzone.k-upload-dropzone');
    (dropzone as HTMLElement).style.width = '100%';
  }

public onValueChange(files) {
    if (files !== null) {
      setTimeout(() => {
        let dropzone = document.querySelector('.k-dropzone.k-upload-dropzone');
        let filezone = document.querySelector('.k-upload-files.k-reset');

        (dropzone as HTMLElement).style.width = '50%';
        (filezone as HTMLElement).style.width = '50%';
      });
    } else {
      let dropzone = document.querySelector('.k-dropzone.k-upload-dropzone');
      (dropzone as HTMLElement).style.width = '100%';
    }
}

Additionally, the developer can remove the border width of the list of files element in order to ensure a more coherent layout:

.k-upload-files.k-reset{
    border-width: 0;
}

To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements it:

• https://stackblitz.com/edit/angular-592ony

It is important to mention that the encapsulation meta data should be set to ViewEncapsulation.None:

• https://www.telerik.com/kendo-angular-ui/components/knowledge-base/custom-styles/

I hope this helps. Please, let me know if I am missing out on something.

Regards,
Georgi
Progress Telerik

[Murray]

That's a lot of work! I really think you need to add a flag to the component for the orientation of the file info template.  

In forms the appearance of the file info below the widget messes with form layout.

[Murray]

Also I've noticed that this works if there is just one File Select on the page, but if there are more than one, then the css applied to one file select is having an impact on the others.  Is there a way around this?

[Georgi]

Hi Murray,

Thank you very much for the clarifications and the valuable feedback provided.

I completely understand that the suggested approach for achieving the desired layout modification might not be ideal as it requires a substantial amount of custom logic and JavaScript and CSS code. However, I would like to assure you that, as of now, this is the go-to approach for achieving the desired layout modification.

In case you consider the addition of a designated property for controlling the layout of the component as a valuable enhancement to the Uploads package, what I would suggest would be to log a feature request in our Feedback Portal:

• https://feedback.telerik.com/kendo-angular-ui

This way, our team will be able to track the customer demand for the feature and consider introducing it to the Kendo UI for Angular library in case it gathers substantial popularity.

Regarding the issue with the custom styling being applied to multiple FileSelect components, what I would suggest would be for the developer to apply a custom class to the specific component whose layout should be modified and use this custom class in the suggested CSS selectors. 

To better illustrate such an approach, I am sending you a StackBlitz demo that implements it:

• https://stackblitz.com/edit/angular-592ony-nxbz7t

I hope the provided information helps. Please, let me know if I can further assist you with this case.

Regards,
Georgi
Progress Telerik