6

I have a popup window which appears after clicking on a button. I don't want the pop up window though to be resizeable. I tried using in css resize:none and resizable:none but this does not work for all browsers.

Is there a css element that can be used so that pop window can not resizable in all browsers, or is there a lot of different ressizeable related css elements so that I can use them so eventually all pop up windows are not resizable in all broswers?

I know where to put the css elements, in the window.open function, I just want to know other css ways that can make pop up windows not resizable for all browsers

Browsers using (all latest browsers): IE, Firefox, Google Chrome, safari and Opera

BruceyBandit
  • 3,978
  • 19
  • 72
  • 144
  • 1
    This is not good practice. It is the user who should decide if they want to re-size the window or not. Don't be such a control freak :) – vascowhite Nov 21 '11 at 18:10
  • 1
    How about not using pop-ups? Not to mention that people dislike them, many browsers (on phones, tablets) may even not support them. – Kos Nov 21 '11 at 18:21
  • 2
    Hey, BruceyBandit. Any chance you're ready now, 5 years and 11 months later, to mark my answer as *the* answer :-)? – James Hill Nov 16 '17 at 22:02

3 Answers3

11

You can't do this with CSS - you need to pass the resizable parameter to your window.open() function. If you're using an anchor with the target attribute, you need to use JavaScript instead.

JS Example

window.open ("http://URL","mywin","menubar=1,resizable=0,width=350,height=250");

JS & HTML Example

<a href="#"
  onclick="window.open ('http://URL','mywin','resizable=0,width=350,height=250')">Open</a>

Additional Resources

Take a look at the window.open docs on MDN: https://developer.mozilla.org/en/DOM/window.open

According to MDN, Firefox will not support the resizable attribute:

resizable

If this feature is set to yes, the new secondary window will be resizable. Note: Starting with version 1.4, Mozilla-based browsers have a window resizing grippy at the right end of the status bar, this ensures that users can resize the browser window even if the web author requested this secondary window to be non-resizable. In such case, the maximize/restore icon in the window's titlebar will be disabled and the window's borders won't allow resizing but the window will still be resizable via that grippy in the status bar.

Starting with Firefox 3, secondary windows are always resizable ( bug 177838 )

Community
  • 1
  • 1
James Hill
  • 60,353
  • 20
  • 145
  • 161
  • I know that but what I am saying is resizable and resize does not work on all browsers – BruceyBandit Nov 21 '11 at 18:02
  • Yes I am, I don't mean I am using css to resize the pop up window, it is on javascript in the window.open function, what I am asking is that are there other css elements to resize pop up windows instead of resizable or resize – BruceyBandit Nov 21 '11 at 18:11
  • Chrome is also on board with this user friendly option. – johnathankent Jul 28 '14 at 21:48
  • does not works in chrome `Version 69.0.3497.100 (Official Build) (64-bit)`. – Muhammad Saqib Oct 06 '18 at 20:08
  • @MuhammadSaqib, this is the only convention provided by JS to prevent window resizing. Having said that, it's up to the browser whether said convention is allowed/accepted. Google has decided that this makes for an unfriendly interface for users and ignores the request. See https://stackoverflow.com/questions/15480252/make-window-not-resizable-in-chrome/15481333 for further info. – James Hill Oct 08 '18 at 10:57
  • @JamesHill I mentioned it to notify viewers so they can get aware the hidden problems before publishing their apps. – Muhammad Saqib Oct 08 '18 at 15:58
2

Firefox doesn't support this.

have a look here:

how can we disable resizing of new popup window in firefox?

futher more, it's a bad idea to make it not-resizeable. what if your users are visually impaired have have there settings to have large fonts?

Community
  • 1
  • 1
Patricia
  • 7,752
  • 4
  • 37
  • 70
0

Better late than never. Got this working:

window.addEventListener('load', () => {
  const popup = window;
  console.log(popup);
  popup.addEventListener("resize", () => {
    popup.resizeTo(306, 512);
  })
});
Verminous
  • 490
  • 3
  • 14