Iframe does not support the "resize:" property in Mozilla Firefox

Question

I have a function that arrow the WYSIHTML5 plugin in a textarea, this plugin migrates the textarea to an iframe:

<iframe 
    class="wysihtml5-sandbox" 
    security="restricted" 
    allowtransparency="true" 
    marginwidth="0" 
    marginheight="0" 
    style="resize: vertical !important; 
           background-color: rgb(255, 255, 255); 
           border-collapse: separate; 
           border-color: rgb(194, 202, 216); 
           border-style: solid; 
           border-width: 1.25px; 
           clear: none; 
           display: block; 
           float: none; 
           margin: 0px; 
           outline: 0px none rgb(85, 85, 85); 
           outline-offset: 0px; 
           padding: 6px 12px; 
           position: static; 
           top: auto;            
           left: auto;            
           right: auto; 
           bottom: auto; 
           z-index: auto; 
           vertical-align: text-bottom;            
           text-align: start; 
           box-sizing: border-box; 
           box-shadow: none; 
           border-radius: 0px; 
           width: 100%; 
           height: auto;" 
   width="0" 
   height="0" 
   frameborder="0">
</iframe>

The resize by default comes: rezise:both(It doesn’t work), I’m changing with:

$('.wysihtml5-sandbox').prop('style', 'resize: vertical !important');

But even so I can not apply the change in size, in other browsers it does not happen.

Knowing that I need to apply resize only vertically, how to get around this problem ?

Answer 1

Despite the property resize: not be supported in Firefox when used in iframes, as already stated in the other reply that was mentioned in the MDN, yet it is a property that will work perfectly in some other elements.

No need for any hack or library wild to achieve the desired effect, simply create a <div> and in it you will add the resize: (recommend adding the display: inline-block;), then put the size you want and inside the <div> put your <iframe>, defining width and height as 100%

I created an example that works with horizontal, vertical and both:

Note¹: it is necessary to add the overflow: hidden or overflow: auto or overflow: scroll in the element you want to use resize:, except in elements <textarea> which already has scroll by default (except if using overflow: visible;)

Note²: it is necessary position:relative; to work in Chrome, because if the resize cursor is not, it will be overwritten by the iframe

.resize, .resize-v, .resize-h {
    position: relative;
    display: inline-block;
    overflow: hidden;
    min-width: 50px;  /* define largura minima */
    min-height: 50px; /* define altura minima */
    width: 200px;  /* define largura padrão/inicial */
    height: 200px; /* define altura padrão/inicial */
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
   background-color: transparent;
   width: 100%;
   height: 100%;
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
    background-color: #f00;
}

.resize-v {
    background-color: #00f;
}

.resize-h {
    background-color: #fc0;
}

<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>

---

Alternative

The only problem with the example is that in Chrome when the iframe is small the "cursor" to drag some when the scroll appears, one way around this would be to discount the height of the iframes, thus:

height: calc(100% - 14px);

An example:

.resize, .resize-v, .resize-h {
    position: relative;
    display: inline-block;
    overflow: hidden;
    min-width: 50px;  /* define largura minima */
    min-height: 50px; /* define altura minima */
    width: 200px;  /* define largura padrão/inicial */
    height: 200px; /* define altura padrão/inicial */
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
   background-color: transparent;
   width: 100%;
   height: calc(100% - 14px);
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
    background-color: #f00;
}

.resize-v {
    background-color: #00f;
}

.resize-h {
    background-color: #fc0;
}

<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>

Answer 2

Unfortunately this is not possible as Firefox does not support resize in iframes, according to MDN documentation:

Links:

• Documentation of resize on MDN
• Bug 680823