Semantic-ui: popups with a too long content don't appear

[deneuxa]

http://jsfiddle.net/CBtm7/

[brigand]

It appears the issue is that it decides the best side to show it on, and doesn't provide a default or fallback. If there's isn't room for it, it doesn't show.

[jlukic]

If a popup cannot fit on a page in any direction it will not appear. I wouldn't recommend using a popup for any content that large.

[deneuxa]

it could maybe trunk the content ?

[jlukic]

Not a planned feature, no way for the plugin to know the correct content size

[seasoup]

Is there any way to force it to appear? The popup works great for my use case unless the element is near the edge of a page. There is a lot of content, but the modal would be way too heavy weight for what I'm looking for. The popup behavior is exactly right except for not opening when it cannot figure out how to fit it.

[Anachron]

Make the content smaller so it fits on the screen? Why would you show a popover that nobody can read completely? And what wall of text is inside? I suggest only 1-3 sentences each popover, and inside the popover a link to a modal that shows the full text.

[seasoup]

The content cannot be made smaller to fit on the screen. I'm already
capping the size at 500px and adding scrollbars to it. The use case is for
data points in a chart, clicking on them to give the data about that point.
The popup interaction is far superior to the modal for this use case. The
popup points at the data point so you know which one it came from. It
shows faster then the modal. The modal takes over the entire screen so you
can no longer see other data points as well.

The default interaction when the popup cannot appear entirely onscreen is
to just throw an error, that's awful from a user perspective. They can't
tell anything happened, they just know that they clicked and nothing
happened. There is no way to force the popup to appear, so that leaves us
having to catch the error and tell the user too bad there is too much data
so you don't get to see it, or catch the error and open it up in a modal
with the aforementioned terrible experience. Usually when it happens that
it appears offscreen its because it appears off by a few pixels, so no or
little content would actually be hidden. Just show the pop up in the
direction that least obscures it and let the user scroll the page if they
have too.

But you seem to be set against anyone using a popup other then the way you
want them too and keep telling people that what they want to use it for is
wrong, so I don't actually have much hope that you will see a need to do
something about this.

On Mon, Mar 31, 2014 at 6:11 AM, Anachron [email protected] wrote:

Make the content smaller so it fits on the screen? Why would you show a
popover that nobody can read completely? And what wall of text is inside? I
suggest only 1-3 sentences each popover, and inside the popover a link to a
modal that shows the full text.

Reply to this email directly or view it on GitHubhttps://github.com/Semantic-Org/Semantic-UI/issues/638#issuecomment-39086087
.

[jdiaz5513]

This doesn't sound like a good UX. If you really must have a lot of content appear it's better to have a div off to the side somewhere that's dedicated to showing extra details on hover/click.

If you don't want to sacrifice space for the graph, you could even do something dynamic where the graph resizes/moves out of the way to make room for the "more details" div.

To me that seems way better than using a popover that needs to scroll; oversized popovers are simply not usable once you start to take into consideration the large variety of screen sizes out there.

(My two cents.)

[Anachron]

First of all, I am generally kinda open to use components for other stuff than they are thought for.

But I have too agree with the last comment, in this case its bad UX and in no way will it be pleasant for the user to interact with the page. What is possible is you could put a second div and make it 20-50% transparent and put it over the chart with the data. Depending on the chart and the data, it can look good.

Another way you could do is enter a full-screen mode that removes the margins from the page.

Last idea I have in mind is actually pull some data out of the chart, which is being selected. This can be by hiding some content of the chart which is not needed or actually just some text to incicate the selected data source. Like "Time: 09:30am / Day: 5/25/14 / Project: Customer1" and then the content data below.

I hope I was able to help you.

[seasoup]

Anachron, it may well be that you are generally open to using components
for stuff other than they are thought of for, but my only experience with
you has been this problem for this component and you do not seem open to
using components differently at all to me.

Everyone wants to seem to discuss the UX repercussions, so I guess we have
to do that. Right now the behavior is that if it cannot find a place to
stick the popup then nothing happens. The default experience is that the
user clicks something and expects a popup and nothing happens, they wait
around for a bit to see if something happens, nothing happens, they click
it again and wait again nothing happens. The default behavior should at
least do something useful to alert the user that there is a problem.

I'm not saying that the default behavior should be pop it up anyway, but I
should at least have that option open to me. The popup looks awesome, it's
extremely lightweight (modals just feel so much heavier), it doesn't cover
the dot that is clicked on, it doesn't take up space that is not needed
when nothing is selected, it lets someone click on another dot without
closing it first or at least see where some other dots are to click, the
chart doesn't have to move around and change sizes to show data, it doesn't
interrupt the flow of data investigation because it is so quick and easy to
open and close, you can copy/paste the data in the popup easily because it
doesn't close too fast, the only drawback is this edge case. Doing nothing
when the user clicks isn't really ok, which is the default behavior.

Without being able to force it open I'm left with a bunch of even less
ideal options, rearranging the chart size (ick), doing a modal (not doing
for all of the reasons a dialog is better), manually sticking in a
transparent div over the chart (looks like crap compared to the popup and
is not consistent). Honestly, what I expect the user to do if the popup
doesn't fit and they need data off the page is to close the popup, scroll
the chart over, and open it again because they can see that it is sticking
off the page. But most of the time the data they want to see will be on
the page, just the edges of the popup will be sticking off and they can
keep using the chart as normal.

The page margins are already minimized for the app and we are only
targeting desktops and laptops so screen size doesn't have to include
phones and tablets, so we don't have the kind of variety that some apps
need. And maybe this experience would be crap for mobile and tablet, but
for apps that are only targeting desktop it would be nice to have the
option to force it open. In the meantime though, have the popup do
something, just throwing an error is a cop out saying "I don't know what to
do, let's let the developer figure it out." Well, I've figured out what
works for our application and it is forcing it open anyway in the best
possible spot even if some of it is off the page.

On Mon, Mar 31, 2014 at 3:03 PM, Anachron [email protected] wrote:

First of all, I am generally kinda open to use components for other stuff
than they are thought for.

But I have too agree with the last comment, in this case its bad UX and in
no way will it be pleasant for the user to interact with the page. What is
possible is you could put a second div and make it 20-50% transparent and
put it over the chart with the data. Depending on the chart and the data,
it can look good.

Another way you could do is enter a full-screen mode that removes the
margins from the page.

Last idea I have in mind is actually pull some data out of the chart,
which is being selected. This can be by hiding some content of the chart
which is not needed or actually just some text to incicate the selected
data source. Like "Time: 09:30am / Day: 5/25/14 / Project: Customer1" and
then the content data below.

I hope I was able to help you.

Reply to this email directly or view it on GitHubhttps://github.com/Semantic-Org/Semantic-UI/issues/638#issuecomment-39148048
.

[jlukic]

Debug is now disabled by default, but popups will trigger a console.error when no possible placement is available.

$('.popup').popup('setting, 'debug', 'true');

Perhaps it should just choose the last placement for cases where on:hover is not set, and on:click is used. This makes sense because this content can still be seen by using the scroll (which is unavailable with hover)

I will look into this discussion a bit more thoroughly later. In general, I think very large content should consider an alternate display style. My aspiration is ui dropdown will allow for mixed content, not just menu which will provide a good fix for this functionality gap.

[seasoup]

I know, helpful for a developer, but useless for a user.

Josh Powell

On Mar 31, 2014, at 6:02 PM, Jack Lukic [email protected] wrote:

Debug is now disabled by default, but popups will trigger a console.error when no possible placement is available.

$('.popup').popup('setting, 'debug', 'true');

—
Reply to this email directly or view it on GitHub.

[Anachron]

@seasoup once again, it's extremely useless for a user to have different UX-activity going on, in the case that the data is too much. A consistent solution would be a much better handling for the user.

He could not possibly understand why sometimes a popup opens, something a new modal/overlay is exposed to him.

That being said, there is also the solution of adding a paging feature to Popup, so you could just trunkate the text (It's easy to check text length) and add next/back links/buttons.

[seasoup]

We are in complete agreement that a different ux activity would not make sense.

Paging is closer to the right thing but we are sticking a single json structure in the popup. Our users are very technical and know what json is and can read it.

How about scrolling? If the popup is on the right side of the page, pop it up on the left and resize it to fit with overflow:auto. On the left, open right and resize it to fit with overflow:auto.

This would work for our use cases and be better for the user then doing nothing. Would this work for other use cases that you know about?

Josh Powell

On Apr 1, 2014, at 1:21 AM, Anachron [email protected] wrote:

@seasoup once again, it's extremely useless for a user to have different UX-activity going on, in the case that the data is too much. A consistent solution would be a much better handling for the user.

He could not possibly understand why sometimes a popup opens, something a new modal/overlay is exposed to him.

That being said, there is also the solution of adding a paging feature to Popup, so you could just trunkate the text (It's easy to check text length) and add next/back links/buttons.

—
Reply to this email directly or view it on GitHub.