Issue
I am adding a new widget with SVG in it.
I am making it same size as parent, but it results in unwanted scroll to appear.
Fiddle: https://jsfiddle.net/Murval/j1oe6x4b/
.widget-outer {
display: flex;
height: 210px;
width: 400px;
border: 1px solid black;
}
.widget {
overflow-y: auto;
flex: 1;
}
.svg-container {
text-align: center;
display: inline-block;
width: 100%;
height: 100%;
}
.svg {
max-width: 100%;
max-height: 100%;
}
<div class="widget-outer">
<div class="widget">
<div class="svg-container">
<svg class="svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" style="fill: gray;"></circle>
</svg>
</div>
</div>
</div>
As I see, the scroll appears, because there is extra space below svg-container div. But changing display, as was suggested in other posts, has no effect.
Extra considerations:
- I don't want to change styles for widget-outer and widget classes, because they are working fine for other widgets. overflow-y: auto on widget class is required, becuase some other widgets have longer content that should be scrollable.
- I want svg element to take all available space in widget for any combination of height and width on widget-container.
- Decreasing max-height of svg element is helping, but can not be counted as proper solution to this problem.
tl;dr Is it possible to fit svg in widget without scrollbar?
Solution
You need to change both .svg-container
and .svg
to display: block
.widget-outer {
display: flex;
height: 210px;
width: 400px;
border: 1px solid black;
}
.widget {
overflow-y: auto;
flex: 1;
}
.svg-container {
text-align: center;
width: 100%;
height: 100%;
}
.svg {
max-width: 100%;
max-height: 100%;
display: block;
}
<div class="widget-outer">
<div class="widget">
<div class="svg-container">
<svg class="svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" style="fill: gray;"></circle>
</svg>
</div>
</div>
</div>
Answered By - Turnip
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.