This is the code that I have in my page
<fieldset style="width: 60%; border: 1px solid #BBB; margin-left: auto; margin-right: auto; border-radius: 10px; text-align: center;">
<div style="width: 95%; margin: 5px; padding: 6px; margin-left: auto; margin-right: auto; overflow-x: scroll; text-align: center;">
<canvas id="graph" width="1645" height="300"></canvas>
</div>
</fieldset>
As you can see I have a canvas inside a div, which has set the overflow-x: scroll property.
This is the result that I have which is what I am not looking for. As you can see the fieldset (which is width: 60%;) covers the entire screen width and over. The div is scrolling only a little part of the canvas.
This should be the result that I'd like to see:
Here I set the canvas width to 750 just to show what I want to have.
In conclusion, I want to have the fieldset with a width: 60% and a div that scrolls the overflow-x of the canvas. How could I do it?
This is a known issue with the width/min-width of the fieldset element. See this question and it's answer for fixes.
In Webkit you can fix it by simply adding min-width: 0; to your fieldset.
Here a snippet:
fieldset {
width: 60%;
border: 1px solid #BBB;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
text-align: center;
min-width: 0;
}
fieldset div {
width: 95%;
margin: 5px;
padding: 6px;
margin-left: auto;
margin-right: auto;
overflow-x: scroll;
text-align: center;
}
<div>
<fieldset>
<div>
<canvas id="graph" width="1645" height="300"></canvas>
</div>
</fieldset>
</div>
Related
I'm trying to handle two resizeable divs where when I change one, the other div adjusts its size along the grid and vice versa.
I'm able achieve only the resize part. When I go beyond a certain length, the other div moves to the next line which I don't want to happen. Rather I want it to only stay in the same line.
I tried setting the position value to absolute and relative but still was not able to achieve what I want.
This is my Code:
.res {
border: 2px solid;
padding: 20px;
width: 200px;
resize: both;
overflow: auto;
}
.resright {
border: 2px solid;
padding: 20px;
width: 200px;
resize: both;
overflow: auto;
float: left;
position: relative;
}
<body>
<div class="container">
<div class="col-md-9">
<div class="col-md-2 res">
<p>Hello how are u?</p>
</div>
<div class="col-md-2 resright">
<p>ratatatatatata</p>
</div>
</div>
</div>
</body>
Please check this plunkr
Please try the below css
.res, .resright{
border: 2px solid;
box-sizing: border-box;
float: left;
overflow: auto;
max-width: 50%;
padding: 20px;
position: relative;
width: 200px;
resize: both;
}
I had previously thought that both of the code blocks below would correctly center a div (with some issues with older browsers of course). The first method uses text-align: center whereas the second method uses left and right margins of auto. However, the first block of code below does not center the inner div as I was expecting. Any ideas why?
<div style="text-align: center; background-color: red;">
<div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue">Not working</div>
</div>
The following code does center the div:
<div style="background-color: red;">
<div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; margin-left: auto; margin-right: auto">Works</div>
</div>
Here is my JSFiddle
It's a block-level element, its position won't be effected by the text-align property. If you set it to display-inline, it will work.
<div style="text-align: center; background-color: red;">
<div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; display: inline-block;">It will work now</div>
</div>
The div that is centered has margin-left: auto and margin-right: auto, the div that doesn't work lacks any margins.
See this DEMO
On the top box, I added: margin: 0 auto which is shorthand for: margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;
http://jsfiddle.net/k88bqjnj/7/
I'm trying to make a popup window.
Css:
.c1{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 1003;
text-align: center;
padding-top: 49px;
}
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 80%;
max-width: 90%;
}
.c3{
overflow: auto;
}
Html:
<div class="c1">
<div class="c2">
<div>header</div>
<div class="c3">
*long text*
</div>
</div>
</div>
The thing is c3 block goes out of c2 when I want it reach the bottom border of c2 and become scrollable.
I need c2 block size to depend on a browser window size and to keep header on top. The best solution yet is setting max-height to c3 block.
Add height in [.c3][1]
Update Link
.c3{
overflow: auto;
height:180px;
}
you need to add
overflow: scroll;
to c2's CSS
fiddle
You need to add your overflow: auto property to your .c2 intead adding it to your siblings .c3 DEMO
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 200px;
max-width: 90%;
overflow:auto; -->> ADDED
}
"overflow: auto" works if there is constraint (width or height).
In you case, you have applied a overflow on the content (.c3) and not the container (.c2).
Just by moving "overflow: auto" rules to the container (.c2) should make what you expect.
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 80%;
max-width: 90%;
overflow: auto; /* add me */
}
.c3{
/* overflow: auto; delete me*/
}
Here is the result http://jsfiddle.net/vLrjqzcq/
I have two div elements. Second is inside in first element.
In second I display some text. For second div I set height to auto and when I put more text in div height is greater. Also I set height for first div to auto, but first div has always same height.
How I can set height of DIV to be dependable of number of text rows?
<div class="first-div">
<div class="second-div">
</div>
</div>
.first-div {
background-color: #f5f5f5;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
border: 1px solid #b8b8b8;
text-align: justify;
padding: 4px 4px 4px 4px;
word-wrap: break-word;
height: auto;
min-height: 75px;
}
.second-div {
width: 30%;
float: right;
font-size: 9px;
height: auto;
}
Add overflow:hidden to .first-div.
You may want to check out this question: How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?
Demo 1
add overflow: auto to outer div (.first-div)
css
.first-div {
background-color: #f5f5f5;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
border: 1px solid #b8b8b8;
text-align: justify;
padding: 4px 4px 4px 4px;
word-wrap: break-word;
height: 100%;
min-height: 75px;
overflow:auto; /* added */
}
.second-div {
width: 30%;
float: right;
font-size: 9px;
height: auto;
}
Demo 2
or you can add div to the html and set its style as clear: both
css
.clear {
clear: both;
}
html
<div class="first-div">
<div class="second-div"></div>
<div class="clear"></div>
</div>
You can remove the min-height from your .first-div and apply overflow: hidden check out the fiddle, I think this is what you want.
In the .second-div you can change the height with min-height. In the fiddle I have it at 300px.
http://jsfiddle.net/wcnbq9xc/
Hello I had problem positioning a div to the center of the page.
CSS:
.fancyClass{
border: 1px solid #999;
border-radius: 10px;
display: inline-block;
margin: 0 auto;
}
Am I doing something wrong? Also I should mention that this div is inside another div, so could that be a problem? How to avoid it than?
Have you tried to enter the width to be smaller than the outer div?
Something like that:
.fancyClass{
width: 50%;
margin: 0 auto; <!-- that does the actual centering -->
#all the other attributes you have
}
Please Try this and let us know
HTML:
<div class="outterDiv">
<div class="innerDiv">
some thing here
</div>
</div>
CSS:
.outterDiv{
width: 100%;
background-color: #ccc;
padding: 25px;
}
.innerDiv{
width: 50%;
background-color: #eee;
margin: 0 auto;
text-align: center;
}
fiddle EXAMPLE HERE
here you can see the div is horizontally and vertically centered in page. Here is the Demo.
have a look at CSS.
body{margin:0 auto;
text-align:center;
}
.fancyClass{
border: 1px solid #999;
border-radius: 10px;
display: inline-block;
text-align:left;
width: 25%;
height: 25%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
<div class="fancyClass">
this text will be center
</div>
This should do the work:
margin-right:25%;
margin-left:25%;