How to increase the size of the modal windows?

[SamGG]

Thanks for maintaining this invaluble package.
I notice some discussion about my question, but I didn't a practical way to achieve it.
I just want to change/overload a variable or css code, but I don't know where to search or what to change.
Could you help me?
Best,
Samuel

[vnijs]

Width or Height or both? Also, can you explain your setting and why you need this?

[vnijs]

Now that "detail" will be the default setting for shinyFiles, using a wider modal by default seems to make sense. Try out the new development version using the command below (assumes you have the remotes library installed)

remotes::install_github("thomasp85/shinyFiles")

[SamGG]

Thanks for your answer. Today is full of conf calls, but I will tell you tomorrow.
No problem for installing from github.

[SamGG]

Cool, wider. How to make it higher? Is there a way to set pixel or perentage dimensions by a ShinyJS trick or to make auto-adjust to 70% of height and 50% of width?

[vnijs]

I'm sure it is feasible. However, you would have to dig into inst/www/styles.css to figure out the best way to adjust the various elements. Would be nice to have an option to set the default height (width) from R. Happy to review a PR

[SamGG]

Thanks. I must confess that I doesn't like JS and vice versa. Nevertheless I will have a look.

[vnijs]

Same :) @thomasp85 wrote 99.9999% of the JS in shinyFiles.js. And apparently, he doesn't like JS either.

[SamGG]

How could it be possible???? :-)
I found where it is coded in the CSS and checked it could be changed interactively in the console of the web browser. It's the height of the .sF-fileWindow object. Current 400px sounds a little bit small to me. Now I need to understand ShinyJS to guess how to modify it.

[SamGG]

The current solution consists in adding such a code to ui.R to define the height in the DOM. Do you think it's OK?

    # Hidden division to hold shinyFiles window height
    div(id = "sF-fileWindowCustom", style = "height: 800px; display: none;"),

No shinyJS needed yet.

[vnijs]

Couldn't you add this to your CSS file directly? I'd still be interested in having this as an argument to the different shinyFiles functions.

[SamGG]

Currently, I change the height of the modal dialog once created by a piece of javascript in shinyFiles.js. I did play a little bit with the style, but didn't find a way yet. I didn't find a way to retrieve the height from a style definition neither. So, I have to assign the custom style to an object in the DOM that is not displayed.
I will try to overload the style by assigning a second style to sF-fileWindow, but I don't know if it will work.
You want the customisation to be in the CSS file of the Shiny app?

[vnijs]

CSS would be nice. Setting an argument to, e.g., shinyFilesButton just like we now have for viewtype in the development version on github would be really nice! See link below.

BTW if you set the height like you are doing now, does the viewer still compress if the window becomes smaller?

https://github.com/thomasp85/shinyFiles/blob/master/R/filechoose.R#L400-L429

[SamGG]

I will look into your link tomorrow.
No, the height is in pixels, so it is fixed. It could be "em". I tried "%", but it not considered. In fact, the modal is responsive by definition as far I understand. Its height depends on the content we put in the modal box. So I guess you have to define a rigid size before filling it. Well, this is the current design.

[SamGG]

I don't understand what you to show me with L400-L429. Is it about automatic resizing?

[vnijs]

L400-L429 was just an example of how I've used an argument in R (i.e., viewtype) to pass something to shinyFiles.js and adjust a feature. In this case it was the viewtype which is either "detail", "icon", or "list".

[SamGG]

Today, I started looking as viewport to guess its height. I ended up on a clear explanation of using units relative to viewport https://stackoverflow.com/questions/11516291/css-get-height-of-screen-resolution. So I modified the height of the sF-fileWindow to 60vh, and it does the job. Maybe there should be some @media defintions in the CSS, but it really size down when the display gets smaller.
The bad thing is that it was my first trial yesterday, but I ended up on a page where it is written hv instead of vh, which turns out to be ignored. What a lost of my and others time...
This solution fits my need as I don't need a fine tuning of the height. Moreover, I don't see which function/call should get an extra parameter to set this height as you shown in the shinyButton code.

[SamGG]

To keep a track of what I did yesterday.
In shinyFiles.js, after creating the modal window variable and before defining the backdrop at line 917

shinyFiles/inst/www/shinyFiles.js

Lines 916 to 918 in 5114986

	).appendTo($('body'));
	var backdrop = $('<div>')

I added (comments to be removed, variables need to be renamed)

	// Update height
	var window = modal.find('.sF-fileWindow')[0];
	//console.log(window);
	//console.log(window.style.height);
	var myDiv = document.getElementById('sF-fileWindowCustom');
	if (myDiv) {
		//console.log(myDiv.style.height);
		window.style.height = myDiv.style.height;
		//console.log(window.style.height);
	}

In my ui.r, at the beginning of the fluidpage function, I added

ui <- fluidPage(
    # Hidden division to hold shinyFiles window height
    div(id = "sF-fileWindowCustom", style = "height: 800px; display: none;"),

[SamGG]

For the directory window, my choices are the following:

.sF-dirWindow {
  height: 60vh;

and

.sF-dirInfo>div {
  height: 58vh;

The directory and file selectors with a height of 60vh reduces nicely down to a view size of 610 px high. Decreasing those 3 values by 10vh allows a nice display down to a view size of 480 px high.
I think those values should be defined as default.
If you know a way to change the those values in the "sF/style.css" using R, let me know. Or maybe this is what you are telling me about, but I didn't understand. My apologizes in that case, but I am not smart enough to achieve your nice solution.

[vnijs]

I tried the below

which produced

@SamGG I really appreciate taking a first crack at this. It looks like lots of elements need to be configured just right to adjust height properly. If you can make it work for your setting then great. Unfortunately, I won't have time any time soon to really dig into this.

[SamGG]

So here is my exact setting. I only changed the 3 values, not the name of the properties. I changed this in the style.css file of the installed shinyFiles package, ie C:\Users\samgg\Documents\R\win-library\3.6\shinyFiles\www\styles.css. My copy of sF-DirWindow was slightly inexact. Could you try it and let let me know? If it does not work for you, could you tell me your browser and OS?

[vnijs]

This is great @SamGG! Personally, I found 60vh a little too large for .sF-fileWindow on smaller screens, even though the modal does adjust of course. I prefer to use 50vh which is still a bunch larger than we had before. You can always adjust the height in your application that uses shinyFiles with an adjustment in the CSS file (e.g., below). Trying to do this from R would take too much time for me to figure out right now. I'll probably use have to use CSS to reduce height in apps such as GitGadget where the directory browser is now really tall overall because it is shown in the Viewer tab in Rstudio which is narrow and you get stacked windows.

Does seem reasonable to you?

.sF-fileWindow {
  height: 60vh !important;
}

[SamGG]

Dear Vincent, I am glad you catch my point. Your changes are perfect, 50vh being sufficient.
In fact, you noticed that Is set the height of the directory window 10vh less than the file window's height. So it's may be correct to reduce the dirWindow by 10 vh if this helps in cases like your last screenshot. Thanks for this great collaboration and thanks sincerely for maintaining this package.

[vnijs]

Thank you for your contribution @SamGG. Much appreciated. I added information to the NEWS file. Updates will go to CRAN shortly.

https://github.com/thomasp85/shinyFiles/blob/master/NEWS.md

[SamGG]

Thanks to you. I wish you have enough energy to maintain this package during the next decade :-)

[vnijs]

Thanks @SamGG. I have a big shiny app (https://github.com/radiant-rstats) that relies heavily on shinyFiles so I'll probably keep this up for a while ... unless you are volunteering :)

[SamGG]

radiant is not big!
radiant is a huge and impressive shiny app.
Congrat.
Not a volunteer, because I already have enough work and ideas for the next decade, things I really want to contribute to my field of research. But if you're stuck on something really important, feel free to mention me, and I'll look forward to it, with pleasure.