CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Farhad-Taran
Farhad-Taran

Reputation: 6512

how to limit the size of div to window dimensions?

I have a menubar(div) which houses bookmarks and when too many bookmarks are inserted this menu bar(div) becomes too wide for the preferred page size(1280, 720) and becomes scrollabe, leaving half of the bookmarks out of view.

enter image description here

I want to ensure that all the bookmarks are in view and the best option seems to be that I have to make the extra bookmarks appear on the next line. can someone guide me in the right direction or better yet provide a working sample. Im just learning to use jquery and am finding this very difficult.

Example code in jsfiddle

Upvotes: 0

Views: 381

Answers (3)

HatSoft
HatSoft

Reputation: 11201

You can achieve that by using css overflow-x: auto; please see example http://jsfiddle.net/Xa8yB/6/

Upvotes: 0

Alex Wayne
Alex Wayne

Reputation: 187034

You have this in there on the ul element.

white-space: nowrap;

Which means that that element's contents will never wrap to another line, so it extends out past the edge of the window instead. Remove that rule, and you have something closer to what you want. That is, when you content overflow one line, you want it to wrap to the next line.

http://jsfiddle.net/y9a64/9/

Upvotes: 2

Alex Roe
Alex Roe

Reputation: 586

http://jsfiddle.net/bH8yA/ Are you looking for a solution like that? If so, it's straight CSS.

Upvotes: 0

Related Questions