Claretta's Popups: Is there a way to add a scroll bar to them?

Question

In my games inventory screen, it lists everything the player has picked up (including a thoroughly useless plunger). One section of the inventory has Lore items. I wanted to have their content come up in popup windows over the inventory, since moving to a passage and using the return would skip out of inventory entirely.

Unfortunately, the popup windows just stretch off the screen if the content goes too long. I tried limiting the size of the popups in their CSS section, and adding Overflow-y: Auto, but so far, neither of those have had any effect. Is there something I can add to make this work, or am I going to be looking at sneaky, underhanded workarounds? =^^=

CSS:

#ui-body.popup {
	background-color: #0c0c0c;
    max-height: 80%;
  	overflow-y: auto;
}

Javascript:

Macro.add("popup", {
	version : { major: 1, minor: 0, revision: 0 },
	handler : function () {
		if (this.args.length < 2) {
			var errors = [];
			if (this.args.length < 1) { errors.push("link text"); }
			if (this.args.length < 2) { errors.push("passage name"); }
			return this.error("no " + errors.join(" or ") + " specified");
		}

		var	el      = document.createElement("a"),
			passage = this.args[1],
			title;
		el.innerHTML = this.args[0];
		el.className = "link-internal macro-popup";
		el.setAttribute("data-passage", passage);
		title = el.textContent;
		UI.addClickHandler(el, null, function (evt) {
			var	dialog = UI.setup(title, "popup");
			new Wikifier(dialog, tale.get(passage).processText().trim());
		});
		this.output.appendChild(el);
	}
});

...I feel I should point out that while I am slowly learning, Javascript is still brickwalling me harder than the Capra demon.

EDIT: At GreyElf's suggestion, the Twinecode that's calling this up...

<<if $invsdchip>>\
  <<popup "SSD Chip" "inv sdchip">>
<</if>>\

It isn't much, and "inv sdchip" is just straight text at the moment. There's just so much text that it goes off the bottom of the screen.

Answer 1

You have two basic problems:

1. By default, SugarCube's dialogs will not exceed the bounds of the viewport and will show scrollbars if their content overflows that maximum size.
2. That macro and the CSS you're attempting to use with it was written for SugarCube v1, not v2.  The macro itself should work as-is (v2 includes most v1 APIs for the sake of compatibility), but the CSS most certainly will not.

The solution for #1 is not so easy.  You should not be seeing the behavior you are in the first place, so in all likelihood you're either using CSS which is breaking the dialogs or your content is odd, maybe both.  Without knowing exactly what your CSS looks like and what content you're attempting to display, it's hard to know which.

The solution for #2 is easy, I could rewrite the macro for you in my sleep.  Case in point:

/*
	<<popup>> macro for SugarCube v2.
*/
Macro.add('popup', {
	handler : function () {
		if (this.args.length < 2) {
			var errors = [];
			if (this.args.length < 1) { errors.push('link text'); }
			if (this.args.length < 2) { errors.push('passage name'); }
			return this.error('no ' + errors.join(' or ') + ' specified');
		}

		var $el     = jQuery(document.createElement('a'));
		var passage = this.args[1];

		$el
			.attr('data-passage', passage)
			.addClass('link-internal macro-popup')
			.wiki(this.args[0])
			.ariaClick(function (ev) {
				Dialog.setup($(this).text(), 'popup');
				Dialog
					.wiki(Story.get(passage).processText().trim())
					.open();
			})
			.appendTo(this.output);
	}
});

I didn't include any CSS here, since whatever you're currently attempting to use is possibly part of the problem, so it's better to see if your content works with the defaults first (which it should).

Comments

Chapel said the same thing about what version it was written for. It still worked as far as I could tell after changing over, until I had more text in a popup than fit on screen.

The CSS I had in the question was all that was affecting the popups. It was originally just to change their background color (that part still works) to work with a particular class I was using to leave scattered hints of text hidden around some events.

Tested with the popup CSS commented out: No change, aside the background color (way too light).

Tested your macro: hit the same problem. no scrolling, it just vanishes off the bottom of the screen. I must have something else in the CSS or JS that's interfering somehow?

Tested with new macro and no CSS: Still no scrolling.

( I would post a copy of my project file somewhere if it would help, but I'm a bit embarrassed by some of the content. *hides* )

---

Just to ensure that nothing was broken since the last time I really stress tested the dialogs, I just tried: 14 KiB of lorem ipsum text, an image with dimensions greater than my monitor's, and a combination of both.  In all three tests, the dialogs performed as expected, scrollbars appear as necessary (both vertical and horizontal).

BTW.  What are you testing/seeing this behavior in?  Twine 2's Play or Test modes, a particular browser, everywhere?

 

I must have something else in the CSS or JS that's interfering somehow?

Something within your CSS is possible, without seeing it all no one could say definitively.  As far as other JavaScript goes, it's unlikely (though not impossible, I suppose) that something within it could be the cause.

 

( I would post a copy of my project file somewhere if it would help, but I'm a bit embarrassed by some of the content. *hides* )

Assuming for the moment that the content is probably not what one would consider suitable for all ages, posting it here would likely not be kosher, yes.  I see that you have a DeviantArt account listed in your profile here, so I sent you a message there if you'd like to talk about the content in private.

---

Navigation is handle via an actual imagemap, so I have to publish test builds to test it.

I only have access to Chrome and Internet Exploder from where I am right now. In chrome, this is the only problem I have. In IE, it refuses to load any images at all (which I only JUST found out about when I went to try it in there), so I can't get farther into the game than the front porch...

AHAH!!!

Since I can't adequately test it in IE or FF from here, I added a mass of lorem ipsum to a popup from the front porch, where the game starts.

IT WORKS FINE THERE.

The problem must be something in the passage it's calling in the inventory. ...this is going to be fun to dig innnnnnto, though I think I may know what might be doing it, since this is the case; there IS a line at the top of the popup passage that changes the content (so the player can view several "files" on a hidden SD chip). The changes in content length must be screwing with the poor thing somehow.

---

The changes in content length must be screwing with the poor thing somehow.

Its dimensions upon being opened are calculated based on the content specified at that time (they have to be), so if you change its content while it's still open it will not resize (unless a global resize event is triggered).

UPDATE: Upon testing, I see that altering the content after the fact to something which would need larger dimensions does cause the issue you're seeing.  I'll see if I can make resizing the dialog in this specific case either easy to do or automatic (preferably automatic).

---

Woohoo!

If it doesn't work, I'll just have to monkey around some kind of other means of displaying it all, but if it does work it'll be great! Thank you! =^^=

---

FYI: SugarCube v2.20.0 has been released which should address this issue.

For more details, see:

• SugarCube's website
• SugarCube v2 release notes

---

Confirmed: the 2.20.0 release fixed the problem COMPLETELY! Also, love the way it handles it, by the way.

Thank you!!!

I'd show feline affection, but people always look at me weird when I headbutt their shins. =^.^=

Answer 2

A TwineScript example of how you're using the <<popup>> macro may help the person answering your question, as knowing about the HTML structure around the popup's may influence the solution.

Comments

Thank you; I hadn't thought of that.

And done.

Answer 3

I don't know why that's happening off hand, but, you could just using the dialog API to see if that solves the issue. 

Comments

I actually am not even sure what that does or looks like, let alone how to use it.

If I can't figure out a way to get the popup windows to scroll, I suppose I'll have to figure it out, even if it will mean changing a bunch of other inventory items to match. Thank you.

---

Well, half that macro is written for SugarCube 1, and then it has some of its own stuff going on, and then it uses the Dialog API. I was suggesting that you play with the Dialog API to make sure the problem isn't that; i.e. if the only real problem is in the macro itself, then you could, for example, just switch over to my set of dialog API macros, and they'd probably work, potentially without having to change pretty much anything, or we could help you develop a new macro set using the API. If the dialog API doesn't work for you and the problem persists, then the problem is probably buried somewhere in your style sheet or html structure, and we can start looking there. 

The problem is that there isn't anything obviously wrong, but the macro you're using is made up of about 75% deprecated systems, so that's probably where the problem is. 

I should've been more clear though, by see if it works, i literally meant test it to see if it works and let us know. 

---

Aaah, okay. I had no clue that the dialog API was even part of the popup code, I was just using what I had picked up before. Twine code I get. CSS, I'm learning but it's not difficult to follow. Javascript, I can look at the shape of it, but I don't know enough of the syntax and process to puzzle out yet.

The popup script I have been using usually runs without me putting anything into the CSS sheet for it, but I found out from the old forums that i could use #ui-body.popup to edit its appearance. This one has been working just fine for most things, and I can even slip all kinds of Sugarcube code into the passages it uses as its sources; it's easy to call and easy to use, but this is the first time I've had long pieces of text going into one of these popups.

If I can learn enough code to make my own popup script, it would be great, but I think I'm a LONG ways from that, still. Or just completely misinterpreting what I'm looking at and being a scardy-cat.

If you don't mind me using yours, I'll give it a shot and see if it will work unless/until I learn more... well... more everything.