StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhy do scrollbars appear when using a SVG element inside a DIV?
primarykey
Id
4640348
data
AcceptedAnswerId
4642713
AnswerCount
1
ClosedDate
CommentCount
1
CommunityOwnedDate
CreationDate
2011-01-09T16:44:53.733
FavoriteCount
1
LastActivityDate
2011-01-10T00:09:29.377
LastEditDate
LastEditorUserId
0
OwnerUserId
558566
ParentId
0
PostTypeId
1
Score
3
ViewCount
2719
LastEditorDisplayName
text
Body
<p>My aim is to have a <code><div></code> with a fixed size (dynamically set through JavaScript) that is only containing an <code><svg></code> element. When this <code><svg></code> is bigger than the parent <code><div></code> scrollbars should appear. When it's smaller, it's size should be set to those of the parent <code><div></code> - but no scrollbars should appear.</p> <p>This isn't working as expected as a little bit of code can show:</p> <pre><code><?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script type="text/javascript" src="lib/jquery-1.4.4.js"></script> <script type="text/javascript" src="lib/jquery-ui-1.8.7.custom.min.js"></script> <script type="text/javascript" src="lib/jquery.svg.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#editor').svg(); }); </script> </head> <body> <div id="editor" style="width:500px;height:500px;overflow:auto"></div> </body> </html> </code></pre> <p>This will create a nearly empty page, that contains a <code><div></code> with the fixed size of 500x500px - and a <code><svg width="500" height="500"></code> inside. This SVG has scrollbars - although they are not needed as the size would be a perfect fit.</p> <p>That this will only happen with a <code><svg></code> can be easily shown when the demo is modified to</p> <pre><code><?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script type="text/javascript" src="lib/jquery-1.4.4.js"></script> <script type="text/javascript" src="lib/jquery-ui-1.8.7.custom.min.js"></script> <script type="text/javascript" src="lib/jquery.svg.js"></script> </head> <body> <div style="width:500px;height:500px;overflow:auto"><div style="width:500px;height:500px"></div></div> </body> </html> </code></pre> <p>So now a <code><div></code> is inside of the parent <code><div></code> of exactly the same size - and the scrollbars are appearing.</p> <p>Can someone enlighten me, why the <code><div></code> and the <code><svg></code> are behaving differently?</p> <p>And how I can embed an SVG inside the parent <code><div></code> without appearing scrollbars when the size is the same (and with appearing ones when the size gets bigger?)</p> <p>Note: This is tested with Firefox and Chromium.</p>
Tags
<jquery><html><svg>
Title
Why do scrollbars appear when using a SVG element inside a DIV?
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USChris
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POWhy do scrollbars appear when using a SVG element inside a DIV?
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  POWhy do scrollbars appear when using a SVG element inside a DIV?
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. COWhat if you wrap the editor like this? `<div style="width:500px;height:500px;overflow:auto"><div id="editor"></div></div>`
  singulars
  PostPostId
  POWhy do scrollbars appear when using a SVG element inside a DIV?
  UserUserId
  USShadow Wizard

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.