Display issues across Browsers & Platforms

Is something not working the way you expect? Enter it here because someone else might have a similar issue.
pv0e
Posts: 7
Joined: Tue Oct 19, 2010 1:55 pm

Display issues across Browsers & Platforms

Postby pv0e » Tue Oct 26, 2010 10:58 am

I'm developing and reviewing my prototype in FireFox and Chrome on the Mac. I'm using the prototype to conduct some informal usability tests, all done remotely using an online conferencing system. So I have don't have control over the platform used by my test subjects, and I've been noticing display inconsistencies during the test, which is not the best time to find these issues. The issue is: the text just about fits in the textbox on my screen (Mac- Firefox/Chrome), during development and review. On the test subject's screen (PC - IE/Chrome), the text does not fit and so is truncated and ugly little scrollbar elements appear next to it.
The only workaround I know for this is to make sure the textbox is longer than the text while I'm building the prototype, but since I'm working blind (no access to PC), it's not foolproof.

Josh Kristof
Posts: 525
Joined: Tue Mar 31, 2009 3:40 pm

Re: Display issues across Browsers & Platforms

Postby Josh Kristof » Wed Oct 27, 2010 11:41 am

What you're seeing is due to how different layout engines render page content. It can vary between browsers and between operating systems. You can manually force scrollbars off on various components by adding CSS to the styles page. For instance, the following CSS will turn off both scrollbars in rich-text components.

Code: Select all

.protoshare-body .RichText {
overflow:hidden;
}


Alternatively you can use overflow-y and overflow-x to control the individual scrollbars. If you want to disable scrollbars from everything this will do that:

Code: Select all

.protoshare-body * {
overflow:hidden;
}

pv0e
Posts: 7
Joined: Tue Oct 19, 2010 1:55 pm

Re: Display issues across Browsers & Platforms

Postby pv0e » Wed Oct 27, 2010 11:44 am

Thanks for that tip! Will that display the overflowing text, or will it still be truncated? I'd love if there was some way to allow the box to grow to accommodate overflowing text.
Thanks,
--pv

Josh Kristof
Posts: 525
Joined: Tue Mar 31, 2009 3:40 pm

Re: Display issues across Browsers & Platforms

Postby Josh Kristof » Wed Oct 27, 2010 12:12 pm

It depends on the text in the component. By default it will wrap text that goes beyond the right side of the component. Anything below will be truncated.

pv0e wrote:Thanks for that tip! Will that display the overflowing text, or will it still be truncated? I'd love if there was some way to allow the box to grow to accommodate overflowing text.
Thanks,
--pv


Return to “Troubleshooting & Bug Reports”

Who is online

Users browsing this forum: No registered users and 3 guests

cron