Problem with ui-bar?

Question

Hey, could anyone point me to what's going wrong here? I'm just testing things at this stage, so it's just a blank project with some custom styling. The code I have is mostly doing what I'd like it to do.

#story, #ui-bar {
	background-color: rgba(255,255,255,0.9);
	border-radius: 15px;
	margin: 4.5em;
}

http://imgur.com/zB1WBt1

If you have a look at the picture, you can see how the ui-bar is running off the bottom of the screen. I don't get it. It's super super super simple, but it's not working.

If it take out the margin: 4.5em; line, then it defaults back to the standard look of sugarcube, but with properly rounded corners. So... anyone know what's up?

I know it all looks ugly right now. I just want to get some rough ideas of a better UI for my story.

Answer 1

When you supply one value to some CSS properties (margin, padding, etc) it uses that value all the way around the element. From memory, I'm pretty sure the ui bar is always set to sit flush at the side of the window, regardless of where the player has scrolled on the page or the the size of the window. The story element doesn't have any such structure, so if there's extra margin on it (there isn't since its empty anyway), it just overflows and you can scroll down to see it. 

There isn't anywhere for the extra margin on the top and bottom of the ui bar to go, and that seems to be rendering it downward wherever it can. Try this to see if it fixes it: 

#story, #ui-bar {
  background-color: rgba(255,255,255,0.9);
  border-radius: 15px;
}

#story {
  margin: 4.5em;
}

#ui-bar {
  margin: 0 4.5em;
}

/* --or-- */

#story, #ui-bar {
  background-color: rgba(255,255,255,0.9);
  border-radius: 15px;
  margin: 4.5em;
}

#ui-bar {
  margin-top: 0;
  margin-bottom: 0;
}

Alternatively, you can use the padding property to see if that gives you the effect you want, as padding is rendered inside the element. 

Note that this code was written from memory and may contain mistakes. 

Comments

Hey thanks for the help. Your solution wasn't quite what I was after, but I played around with this and that, and came up with something that works, based on what you were suggesting with height.

So, if anyone wanted the full answer:

#story, #ui-bar {
	background-color: rgba(255,255,255,0.9);
	border-radius: 15px;
	margin: 4.5em;
}

#ui-bar {
	height: calc(100% - 9em)
}

#story {
	margin-left: 23em;
}

It's still really rough, but this is the type of look I was after. So, thanks again, Chapel.

---

@kb:  Information about the default relationship between the #ui-bar and #story elements.

By default the #story element has a left margin of 20em so that there is a blank area on the left side of the page for the contents of the #ui-bar element to be display above, that left margin is changed to 4.5em when the side-bar is 'stowed'.

By overriding the default left margin of both of those two elements and making them the same value you end up with the side-bar being display on top of the content of the passage area, as can be seen in the example image you supplied.

As I'm not 100% certain about the visual layout you're aiming for I can't offer a solution to your issue, but I would suggest that you at least give the #ui-bar element a large enough left margin so that the two areas don't overlap, unless you are planing to remove/hide the side-bar completely when stowed, because otherwise it makes the test in that overlapping area hard to read..

---

Well, this is what I have so far:

http://imgur.com/KJrnU5v

And it's based on this css code:

#story, #ui-bar {
	background-color: rgba(255,255,255,0.9);
	border-radius: 15px;
	margin: 4.5em;
}

#ui-bar {
	height: calc(100% - 9em)
}

#story {
	width: 40em;
	margin-left: 23em;
}

It pretty much does what I'd like it to do. But, I wonder if there's a way to make the ui-bar adjust its height based on contents, instead of how I'm currently doing it?

Right now, if I adjust the window size, the ui-bar maintains the exact margin as defined. Which is nice, but could we have it so it grows and shrinks with what content it has? Much like the story content. Does it have something to do with overflows or something?

If you look at this: http://imgur.com/nN8HAD7

You'll see that the story passage has different behavior to what the ui-bar does.

---

If I understand your requirements correctly you want the following:

a. A 4.5em blank area around the four edges of the page. (not the view-port)
b. The height of the side-bar to be the minimum needed to display the contents of the side-bar.
c. The side-bar and the passage areas to both have round corners and a background colour.
d. The passage area to have a width of 40em.

Instead of adding the 4.5em margin to the two elements I would suggest added it to their common parent which is the body element, you can then change the #ui-bar's top and left property to allow for the new blank area around the page.

To fix the #ui-bar's height issue simple change it to inherit.

The following is a starting point which show get you part way to the layout you want.

body {
	margin: 4.5em;
}

#ui-bar, #story {
	background-color: rgba(255,255,255,0.9);
	border-radius: 15px;
}

#ui-bar {
	top: 4.5em;
	left: 4.5em;
	height: inherit;
}

#story {
	width: 40em;
}

 

P.S. One issue you will encounter when you get around to testing the 'stowing' of the side-bar is how it uses the #ui-bar element's left margin to slide the side-bar to the left. Two possible ways to solve this issue are:

a. Alter the 'stowed' left margin value to cater for the changed layout.
b. Change the 'stowing' logic to use the element's width instead of it's left margin.

The following is a starting point to implement point B.

#ui-bar.stowed {
	left: 4.5em;
	width: 2em;
	-webkit-transition: width .2s ease-in;
	-o-transition: width .2s ease-in;
	transition: width .2s ease-in;
}

 

---

Hey, greyelf, before I test your solution, I'd like to show you what I currently have:

http://imgur.com/zhRMt18

http://imgur.com/m1jTXf6

I currently have it set up pretty simply, since I still want the ui-bar to be scrollable on very tiny screens. The way I have it, the entirety of the ui-bar is scrollable, even if it does look ugly (when the scroll bar is present).

The only thing I don't quite like is that the story (passage?) width doesn't stay within the window frame when I bring the width right in. If I could solve that, I think I'd have everything I'd need for a start.

#story, #ui-bar {
	background-color: rgba(255,255,255,0.9);
	border-radius: 15px;
	margin: 3.5em;
}

#ui-bar {
/*	height: calc(100% - 9em);
	height: auto;*/
	height: 80%;
	width: 14.5em;
}

#story {
	width: 65%;
	margin-left: 21em;
}

As for the stowing stuff. I'll work out all that spacing later, once I've decided on a final font. I'm thinking of displaying some ui-bar info even when it's docked. I know I'll have to change some default behavor to make that happen, but I can probably work it out. The idea being... to give those playing on phones the information that's usually displayed on the ui-bar, but in a much more condensed form. We'll see how it goes, but I quite like that I can just have a glimpse of the UI, just to display numbers/stats on it (and not the save/option/title/author stuff).

I wanted to ask this... because you started off with the assumption that:

a. A 4.5em blank area around the four edges of the page. (not the view-port)

I'm not sure. With what I've done with the background picture, it's not quite blank space. Or is it? You tell me?

---

Anyway, I tried out your solution. It worked just as well. There's a slight difference between what fits on a 1280x720 screen between your method and mine, so I think I'll stick with mine. It also has the advantage of allowing scrolling of the ui-bar when the screen is tight. Oh, and the background worked on either version as well. Anyway, I probably have enough to be going on with with this.