2

Possuo uma função que seta o plugin WYSIHTML5 em um textarea, esse plugin migra o textarea para um 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>

O resize por padrão vem: rezise:both(Não funciona), estou mudando com:

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

Mas mesmo assim não consigo aplicar a alteração no tamanho, em outros navegadores isso não acontece.

Sabendo que preciso aplicar o resize apenas na vertical, como contornar esse problema ?

2 Respostas 2

2

Apesar da propriedade resize: não ser suportada no Firefox quando usado em iframes, como já dito na outra resposta que foi mencionado no MDN, ainda sim é uma propriedade que vai funcionar perfeitamente em alguns outros elementos.

Não é necessário nenhum hack ou biblioteca mirabolante para conseguir chegar no efeito desejado, basta criar uma <div> e nela você irá adicionar o resize: (recomendo adicionar o display: inline-block;), então coloque o tamanho que desejar e dentro do <div> coloque o seu <iframe>, definindo a largura e altura como 100%

Criei um exemplo que funciona com horizontal, vertical e ambos:

Nota¹: é necessário adicionar o overflow: hidden ou overflow: auto ou overflow: scroll no elemento que deseja usar o resize:, exceto em elementos <textarea> que já tem scroll por padrão (exceto se usar overflow: visible;)

Nota²: é necessário position:relative; para funcionar no Chrome, pois se não o cursor para redimensionar será sobreposto pelo 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>


Alternativa

O unico problema do exemplo é que no Chrome quando o iframe fica pequeno o "cursor" para arrastar some quando o scroll aparece, uma maneira de contornar isto seria descontando a altura dos iframes, assim:

height: calc(100% - 14px);

Um exemplo:

.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>

0
1

Infelizmente isso não é possível, pois o Firefox não tem suporte ao resize em iframes, de acordo com documentação do MDN:

inserir a descrição da imagem aqui

Links:

5
  • Eu vi isso agora pouco :c será que não existe um hack pra isso ? Commented 10/11/2017 às 18:44
  • 1
    @AnthraxisBR Não conheço nenhum, mas tive uma ideia e estou testando um código aqui pra ver se funciona. Se funcionar te mando notícias.
    – Sam
    Commented 10/11/2017 às 18:47
  • 1
    @AnthraxisBR Consegui criar um hack usando jQuery-ui neste JSFiddle: jsfiddle.net/a4y09g68/1 .. não fica 100% perfeito mais funciona :)
    – Sam
    Commented 10/11/2017 às 21:44
  • Queria poder dar mais de uma resposta correta, tem até um mini editor do plugin na sua xD, uma alternativa pra ser analisada, mas a resposta do guilherme foi mais simples e só com css. Commented 10/11/2017 às 21:51
  • funcionou, o importante pra funcionar é setar o 'overflow: hidden;' no elemento que vai receber o 'resize:vertical', e setar o iframe com 'width' e 'height' 100%. Commented 10/11/2017 às 21:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .