Jump to content
Sign in to follow this  
Knot

iframe sem scrolling em html5

Recommended Posts

Knot

Boas!

Estive a colocar o meu site todo em HTML5 e consegui fazer tudo sem problemas, excepto o iframe.

Com o HTML4 bastava colocar scrolling="no" e as barras de scroll não apareciam, agora no HTML5 este atributo não é válido.

Existe sim um novo atributo seamless que faz com que a página adicionada por iframe seja considerada como parte da página principal e por isso não mostra as barras de scroll, mas esse atributo ainda não é aceite pelos principais browsers...

Informação aqui:

http://www.w3schools.com/html5/tag_iframe.asp

Ora bem, então a solução passa por utilizar css e utilizei das seguintes formas seguintes e não funciona nem em Chrome nem em IE:

iframe{

background-color: transparent;

border: 0px none transparent;

padding: 0px;

overflow: hidden;

}

iframe{

background-color: transparent;

border: 0px none transparent;

padding: 0px;

overflow-x: hidden;

overflow-y: hidden;

}

Utilizei a seguinte e já funciona, mas ao fazer o validate de CSS 3 não aceita:

iframe::-webkit-scrollbar {

display: none;

}

Alguém tem alguma dica como conseguir meter isto a dar de forma que fique tudo OK com o validate de HTML5 e CSS3 ?

Share this post


Link to post
Share on other sites
HappyHippyHippo

mas esse atributo ainda não é aceite pelos principais browsers...

não sei onde tiraste essa ideia.

acabei de testar a seguinte página http://www.quackit.com/html_5/tags/html_iframe_tag.cfm

em

- chrome

- opera

- safari

- firefox

- IE 9

e correu tudo lindamente

só falhou quando disse ao IE para usar o modo IE8 (nem cheguei a testar o IE7)


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
Knot

É dito aqui:

http://www.w3schools.com/html5/att_iframe_seamless.asp

Eu por acaso já tinha visto essa página, mas se reparares com ou sem o seamless (retiras e fazes o update) o resultado na página é o mesmo, fica sempre sem o scrolling, logo indica que isso não está a funcionar bem, pois sem o seamless era suposto aparecerem as barras de scroll.

Ou experimenta lá no site o seguinte código:

<iframe src="/html_5/tags/html_iframe_tag_example.cfm" width="150" height="150" seamless></iframe>

Vai aparecer o scroll, visto que alterei a medidaa, mas tem lá o seamless, logo não deveria aparecer.

Com este código em html 4, mesmo com a medida menor o scroll não aparece usando o scrolling="no":

<iframe src="/html_5/tags/html_iframe_tag_example.cfm" width="150" height="150" scrolling="no"></iframe>

Testei no Chrome apenas

Edited by Knot

Share this post


Link to post
Share on other sites
HappyHippyHippo

É dito aqui:

http://www.w3schools.com/html5/att_iframe_seamless.asp

Eu por acaso já tinha visto essa página, mas se reparares com ou sem o seamless (retiras e fazes o update) o resultado na página é o mesmo, fica sempre sem o scrolling, logo indica que isso não está a funcionar bem, pois sem o seamless era suposto aparecerem as barras de scroll.

Ou experimenta lá no site o seguinte código:

<iframe src="/html_5/tags/html_iframe_tag_example.cfm" width="150" height="150" seamless></iframe>

Vai aparecer o scroll, visto que alterei a medidaa, mas tem lá o seamless, logo não deveria aparecer.

Com este código em html 4, mesmo com a medida menor o scroll não aparece usando o scrolling="no":

<iframe src="/html_5/tags/html_iframe_tag_example.cfm" width="150" height="150" scrolling="no"></iframe>

Testei no Chrome apenas

confirmado, confiei no exemplo que era dado no site, mas bastou alterar os parâmetros que as scrollbars apareceram


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.