CSS/AngularJS Overflow-x

Question

I need some css help.You can see that if you click to add another hexagon on the right side, I want it to overflow to the right. It is jumping down to create a new row. How can I get it to overflow with a scroll x?

Here is the css.

#flow {
    width: 600px;
    height: 250px;
    overflow-x: scroll;
}

Dieter De Mesmaeker · Accepted Answer · 2014-01-30 02:59:04Z

2

This is probably not the most elegant solution, but it seems to do the trick. http://jsfiddle.net/L6pke/5/

#container {
    width: 500px;
    height: 250px;
    overflow-x: auto;
}
#flow {
    width: 800px;
    height:100%;
}

And in your JS code, you update the width of the flow div every time you add an element.

var flow = document.getElementById('flow'),
           current_width = flow.clientWidth;
flow.style.width = current_width + 104 + 'px';

answered Jan 30, 2014 at 2:59

Dieter De Mesmaeker

2,1662 gold badges14 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zack Argyle Over a year ago

So I ended up using ng-style in 'flow' to make it a little more angular like this. ng-style="setWidth()", and in the controller $scope.setWidth = function() { return {width: $scope.things.length * 135 + "px"};} It works great. Thanks again.

GGalizzi · Accepted Answer · 2014-01-30 02:48:51Z

0

Try this:

#flow {
    width: 550px;
    height: 250px;
    overflow-x: scroll;
}

.hex {
    display: inline-block;
    margin-left:3px;
    margin-bottom:-26px;
    text-align:center;
    color:#fff;
    font-size:1.1rem
}

.hex-row {
    clear:left;
    white-space: nowrap;
}

basically:

Make .hex display as inline-block, better than floating for this, besides, with floating it wouldn't work because floating removes from normal flow.

Remove width in .hex-row to make it automatic, and add white-space: nowrap to it to remove wrapping.

http://jsfiddle.net/zargyle/L6pke/3/

answered Jan 30, 2014 at 2:48

GGalizzi

8431 gold badge10 silver badges19 bronze badges

Collectives™ on Stack Overflow

CSS/AngularJS Overflow-x

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related