0

Following this link:

http://stuff.dan.cx/js/filepicker/google/

a demo of a google picker, one can see that the picker iframe here has a minimum size 566 * 350, even when the browser is resized to dimensions even smaller.

I want this iframe to be always in proportion to the browser being resized, i.e., responsive.

Can anyone help me with where and what change do I need to make this happen? Sorry but I do not know a lot about CSS...

Comm Cinn
  • 1
  • 1
  • What did you try so far, can you post any of your css? – DavidDomain Jun 26 '15 at 11:14
  • I am afraid nothing, since I am unaware of CSS. I want to pick this thing and use it in a Python application... My only findings are the least dimensions it resizes to, mentioned above and that I guess somewhere, some CSS will change it. Any help will be appreciated... All the CSS is available at the link... – Comm Cinn Jun 26 '15 at 11:39
  • From looking at the example, you can tell that the following div with CSS classes `picker modal-dialog-content picker-dialog-content` is the one which you would need to change the `width` and `height` accordingly, but the styles are applied dynamically. So CSS only will not do the trick. The `PickerBuilder` Object has a method `setSize`. Try to use this method to change the size first. Otherwise you would have to overwrite the dynamically applied styles by yourself using javascript. – DavidDomain Jun 26 '15 at 12:03
  • That was very helpful. I am grateful for that. PickerBuilder Object and its SetSize method are, I guess the right solution in my case, where I have a fixed size window, which is smaller than the minimum size mentioned above, that Picker defaults to. Out of curiosity and something to learn further, I'll request you to please share the values of the 'width' and 'height', I'll require applied in this case, directly in the browser for testing, or as you shared, dynamically using 'javascript', to make it fully responsive, even if my window was resizable... – Comm Cinn Jun 26 '15 at 15:56
  • Please see my answer here http://stackoverflow.com/a/33943812/4801755 as to how to solve this using css. – Mark Brewster Nov 27 '15 at 09:54

1 Answers1

2

I solved it by adding these global styles to the page which made the picker spread on the entire page and shrink when the page shrinks dynamically

.picker {
  height: 100% !important;
  width: 100% !important;
  top: 0 !important;
}
MrBar
  • 950
  • 6
  • 15