This question already has answers here:
How do you add a scroll bar to a div?
(8 answers)
Closed 8 years ago.
I've got a DIV which is supposed to hold multiple DIVs inside it. How can I set a scroll bar to a DIV?
<div id="container"> //need a scroller to this div
<div id="subcontainer1"></div>//created dynamically
<div id="subcontainer2"></div>//created dynamically
<div id="subcontainer3"></div>//created dynamically
more created dynamically....
</div>
Give it a fixed height using the height property and then set overflow:auto or overflow:scroll
Here's the demo http://jsfiddle.net/vinith98/oyug02xz/1/
Add this code to your stylesheet overflow:scroll or overflow:auto
#container{
overflow:auto;
}
Hope it helps
.wrapper-div {
overflow: auto;
width: 12%;
height: 80%;
}
Use the above class(.wrapper-div) for the div for which you want to have scroll bars. specify width and height.
Related
This question already has an answer here:
Change image width by screen size
(1 answer)
Closed 2 years ago.
I tried to solve the problem by myself, but I don't know.
When the width of the screen decreases or expands,
how can I reduce or increase the width of the image in JS?
I had an image in a table and in order to have it adapt to the table I used this class in my css :
.img-fluid {
max-width: 100%;
height: auto;
}
It would be much easier to make the image resize with the window in css rather than js.
If your image looks something like this:
<div class="Somediv">
<img src="somesource" class="Someimage"></img>
</div>
Your css can look like this:
.Somediv {
width: 50%; //the div will take up 50% of the parent element. You can use 50vw to scale by the width of the window
}
.Someimg {
display: block;
width: 100%;
}
If you really want to do it through JS here is the official documentation on element.classList which will help you do what your trying to do.
You don't need Javascript to do this. This can be done through CSS only, You need to set image width to 100% to make it responsive on browser window resize. when you resize your browser window it will automatically takes height according to image width in same aspect ratio.
you need to write a css code like this:
img.img-responsive {
width: 100%;
}
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I am try to make Tic Tac Toe grids in HTML playing with react.js.
I created three rows, each with three buttons with the code below:
<div class='row'>
<button class='square' name='sq1' onClick={this.onBoard}>{this.state.sq1}</button>
<button class='square' name='sq2' onClick={this.onBoard}>{this.state.sq2}</button>
<button class='square' name='sq3' onClick={this.onBoard}>{this.state.sq3}</button>
</div>
There are two problems I can't solved and don't know why:
There is a 3 pixels gap under the buttons inside the row. I set the .square height to 100 px; no padding or margin, and I check the row setting, no padding or margin too. The height of buttons are 100px, while height of row is 103px. Really don't know where these 3px gaps come from.
style:
.square {
height: 100px;
width: 100px;
padding: 0;
margin: 0px;
font-size: 15px;
}
when I use onClick={this.onBoard} to set the this.state.sq1, suddenly the button is shifted down like 40px, and when all three button in the the row are all set with values, then those three buttons are aligned again. That may have something to do with the text, I guess, but I just locate where the problem is.
Thanks heaps in advance.
This question already has answers here:
In a bootstrap responsive page how to center a div
(18 answers)
Closed 6 years ago.
In bootstrap .pull-right for align right .pull-left for align left then What for center ?
Bootstrap's .pull-left and .pull-right, work using css-float.
The way float works is by flowing following inline elements around the floated element.
css-float support: left, right, none. There is no center option. Therefore, there is no .pull-center.
You can align all inline elements within a block element by applying the css: text-align: center to the parent.
If the element is you're trying to center should be inline AND block-like, you should set it to have display: inline-block.
You can see some text-alignment options in bootstrap here:
http://getbootstrap.com/css/#type-alignment
Note that the <p> is a block-type element, and the text within has an implicit text-node which is display: inline.
The center-block class can only be used on images:
http://getbootstrap.com/css/#images
center-block for centering an element in Bootstrap.
You can test by an image:
<img class="center-block" src="xxx.PNG"/ >
try center-block or use grid columns to center your element. If text use text-center
I am applying style qualities to a div containing external javascript, and they seem to be ignored by the browser. The first div works correctly.
http://jsfiddle.net/TxWN3/2/
<div style="text-align:center;">Working center text</div>
<div id="btc-quote" style="text-align:center;"></div>
<script type="text/javascript" src="//cdn-gh.firebase.com/btcquote/embed.js"></script>
The content of the div class="btc-quote" might have some css code not wanting it to center. (I have not read all that code from BTC) To workaround this, you can make the div itself centering, not the content.
A simple trick to do this is add the following css to the div:
width:212px;
margin:auto;
This is a nice workaround found here
If you want to center it, first give it a width and then margin:0 auto:
<div id="btc-quote" style="width:212px;margin:0 auto"></div>
To center your included div, add this CSS:
.btc-box {
margin:0 auto;
}
jsFiddle example
The text-align:center; CSS property is not used in the way you are assuming.
If you check this fiddle, you will see that the default width of a div is the width of the container, and so when you center the text it appears the div is centered. However this is not the case.
To center a Div you can use the Position CSS property :
Add the following CSS attributes :
position:absolute;
left:50%;
margin-left:-106px; /* Half of the width of the div */
And see the following fiddle for the Second Div being center aligned
http://jsfiddle.net/Nunners/TxWN3/7/
This question already has answers here:
Hiding the scroll bar on an HTML page
(22 answers)
Closed 9 years ago.
Is it possible to hide the browser's horizontal and vertical scroll through HTML or Javascript?
I have a listing and for that I have made my own div to div scroller and I want to hide the browser's scroll bars
Thanks in advance
You can apply overflow: hidden to html and/or body in CSS but then, of course, you have to be careful so that your <div> doesn't expand past the browser window.
Example:
html, body
{
overflow: hidden;
}
Set the body tag to overflow: hidden;.
You should be able to set the css for the div to hide the scrollbar. Put everything into a main div and set the css for the main div to this:
height: 100%;
width: 100%;
overflow:hidden;
then use your own scrollbars on the content div.