How can I hide the border and scrollbar of input in Windows?

Hello everyone, I am using a lot of input element on my page to enter text content. I used "border-style: none;" to hide the border of the input element, and it all works perfectly under Mac, but under Windows they appear as borders and scrollbars.

Windows

I guess the reason for these borders and scrollbars is that Hype uses an iframe to introduce the input element, but since it's not directly using the iframe code, I have no control over the iframe style.

Is there a way to make these borders and scrollbars disappear on Windows? Thanks to everyone.

You may be able to solve this in various ways:

  • If you are using a Hype "HTML Widget" element, this may be unnecessary since it is an iframe, and you could just add an unstyled Rectangle as a div instead.
  • If you do need the HTML Widget, then you could select the element and in the Identity Inspector add the Additional HTML Attribute of scrolling with value of no.
  • If you are writing the iframe in code, then add the scrolling="no" attribute in your tag.

If that doesn't provide direction, it would be useful for you to post your exact .hype document with this element since it is a little unclear on your exact element structure and what I assume is Inner HTML. Also let us know what browser on Windows you are using.

Thank you very much for your help, I am using HTML Widget to implement the input function, and I am using Google Chrome and Microsoft Edge browsers on Windows and Mac, and both browsers work exactly the same.
I tried to add the scrolling parameter to Additional HTML Attribute as you suggested, but it still didn't work, I uploaded my .hype file, could you please help me to see if I'm not doing something right, thanks.

iframe.hype.zip (16.3 KB)

Why are you putting the inputs into iFrames? Just add them to the innerHTML of a DIV (called rectangle in Hype). For me, the question seems to be misplaced as many people think the HTML-Widget is the place to add HTML… it is not. It is a way to generate an iFrame but that isn't what most people actually want. They just want to add some HTML to the same page:

  1. Add a rectangle (DIV)
  2. You should see the rectangle in your timeline
  3. Double click the rectangle so the pen appears… edit the innerHTML
2 Likes

Agreed,

A rename would make sense imho. HTML-iFrame , iFrame-embed ,HTML-iFrame-Widget or iFrame-Widget perhaps.. so many possibilities.

2 Likes

Thanks a lot, I'll try again.
The nomenclature is so misleading, I always thought the rectangle feature was used to insert graphic elements, sigh

1 Like

It looks like this is a bug likely OS or Hype version dependent as it doesn't always happen. Basically in some cases HTML Widget iframes wouldn't receive the additional html attributes. I've fixed the bug for the next release.

Agreed - we plan to rename these in a future update. It is definitely a source of issues!

1 Like