More flexible box model fixes

[jdfreder]

Also updated the widgets alignment notebook with a fix related to a design change unrelated to the new flexbox model.

I created a test notebook to find the matching flexible box model attributes- download it here: http://nbviewer.ipython.org/gist/jdfreder/8888471
Note: The rendering is screwed up on nbviewer because the classes get applied to the cells too.

[ellisonbg]

@jdfreder I pasted screenshots of the failures I observed into HipChat, but here is a description:

• All buttons take up 100% width.
• When the variable inspector examples is in non-popup mode, it goes past the end of the cell to R.
• Scrolling output bunches together on Chrome (scrolling output is disabled on FF to begin with).

Sorry you have to deal with this on a Saturday. Owe you lunch or coffee :)

[jdfreder]

@ellisonbg I can't replicate the scrolling output problem, but the code I just checked in should fix the button & var inspector problem.

[ellisonbg]

Here is the code that triggers the output scrolling problem for me:

w = ButtonWidget(description='foo')

def on_click(w):
#     clear_output(wait=True)
    1/0
    print "click"

w.on_click(on_click)

But you have to click on the button lots of times...I will test the other
stuff though.

One other question: have you had to change any css classes on our DOM
elements? If so, we may have to update the nbconvert HTML output to match
those changes.

On Sat, Feb 8, 2014 at 8:47 PM, Jonathan Frederic
notifications@github.comwrote:

@ellisonbg https://github.com/ellisonbg I can't replicate the scrolling
output problem, but the code I just checked in should fix the button & var
inspector problem.

Reply to this email directly or view it on GitHubhttps://github.com//pull/5075#issuecomment-34565507
.

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

[ellisonbg]

So I think the buttons are working properly. Here are the screenshots. But one question: didn't the button that generates buttons example used to put the other buttons on the same horizontal line? Just want to make sure there isn't something else lurking.

I also tried out the scrolling output again and it is still there. I tried to look at the CSS to see fi there was anything obvious, but there wasn't. Hmmm.

[jdfreder]

One other question: have you had to change any css classes on our DOM
elements? If so, we may have to update the nbconvert HTML output to match
those changes.

Just the widget subarea.

didn't the button that generates buttons example used to put the other buttons on the same horizontal line? Just want to make sure there isn't something else lurking.

They did, but I'm not sure why... Since the widget subarea is actually a vbox so it should have behaved like this instead.

[ellisonbg]

OK, I guess this is actually a big fix then. Should there be padding/margin
to separate then buttons though? Or are they meant to touch each other?

On Sun, Feb 9, 2014 at 1:46 PM, Jonathan Frederic
notifications@github.comwrote:

One other question: have you had to change any css classes on our DOM
elements? If so, we may have to update the nbconvert HTML output to match
those changes.

Just the widget subarea.

didn't the button that generates buttons example used to put the other
buttons on the same horizontal line? Just want to make sure there isn't
something else lurking.

They did, but I'm not sure why... Since the widget subarea is actually a
vbox so it should have behaved like this instead.

Reply to this email directly or view it on GitHubhttps://github.com//pull/5075#issuecomment-34587983
.

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

[jdfreder]

Or are they meant to touch each other?

When it was displaying so that they were in a row, it didn't look bad, but now vertically it looks weird. I prefer how the bootstrap buttons display in the second screenshot. I uploaded a fix for the output area scrolling. The problem was that the scrolling div was inheriting the flex class... I changed it so the scrolling div is display: block. We will need to make sure this doesn't break things on older browsers.

[ellisonbg]

OK thanks for the clarification and fix for the scrolling output.

One other question about the buttons: what is the difference between the boostrap buttons and the button-that-generates-buttons buttons? Why don't they have the bootstrap styling.

[jdfreder]

Ahh, button.set_css("margin", "5px") in the styles example.