I have a popup that displays some results, and I want a scroll bar to be display since the results are being cutt off (and I don't want the popup to be too long).
You need to add style="overflow-y:scroll;" to the div tag. (This will force a scrollbar on the vertical).
If you only want a scrollbar when needed, just do overflow-y:auto;
Css class to have a nice Div with scroll
.DivToScroll{
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 4px 0 4px 0;
color: #3B3C3E;
font-size: 12px;
font-weight: bold;
left: -1px;
padding: 10px 7px 5px;
}
.DivWithScroll{
height:120px;
overflow:scroll;
overflow-x:hidden;
}
to add scroll u need to define max-height of your div and then add overflow-y
so do something like this
.my_scroll_div{
overflow-y: auto;
max-height: 100px;
}
If you want to add a scroll bar using jquery the following will work. If your div had a id of 'mydiv' you could us the following jquery id selector with css property:
jQuery('#mydiv').css("overflow-y", "scroll");
<div class="scrollingDiv">foo</div>
div.scrollingDiv
{
overflow:scroll;
}
<head>
<style>
div.scroll
{
background-color:#00FFFF;
width:40%;
height:200PX;
FLOAT: left;
margin-left: 5%;
padding: 1%;
overflow:scroll;
}
</style>
</head>
<body>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better </div>
</body>
</html>
If you have a CSS file, you can define a call for the <div> element and assign the overflow: auto CSS property.
In the HTML file: <div class="container">
In the CSS file you put:
.container{
overflow: "auto";
}
There are multiple ways to achieve a scroller on a div, here find a simple easy way one with an easy explanation.
.my_scroll_div {
overflow-y: auto;
max-height: 100px;
}
Here is a bit explanation of the above code.
overflow-y: auto;
The overflow-y property of CSS adds a scroller when needed, If we want to add the scroller after a specific height (e.g 100px in our case)
Then,
max-height: 100px;
We add the max-height property of CSS so for example to add a scroller after 100px of height then max-height: 100px; is used.
I hope this explanation is helpful in clearing the concepts as well.
Related
I have a menu container that contains <a> tags with various lengths of strings.
When I give my menu container the following CSS, my menu is always statically set to the min-width (in this case, 200px). I want longer strings to push out until the max-width. If I don't set a min-width, The container becomes very small because of the nav-bars width of 50px. navbar is in another React file with a separate CSS file. How can I detach the menu from being controlled by the nav's width?
*the content only expands past it's set min-width with if the <a> contains a string with no spaces/word-breaks.
Here is a codepen with an example of the behavior: https://codepen.io/vee1234/pen/omQxWP
CSS
.nav-bar {
width: 50px;
}
.hover-menu {
display: inline-block
min-width: 200px;
max-width: 400px;
width: 100%
position: relative;
left: 40px;
}
.link a {
line-height: 35px;
color: #d8d8d8;
width: 100%;
height: auto;
}
REACT
<Nav className={navbar}>
<Menu>
<div className={hover-menu}>
<div className={links}>
<a>some text</a>
<a>some longer text that never expands past 200px</a>
</div>
</Menu>
</Nav>
</div>
Try this:
.menu {
display: inline-block;
min-width: 200px;
max-width: 400px;
}
.link a {
display: block;
line-height: 35px;
color: #d8d8d8;
height: auto;
word-wrap: break-word;
}
I think the problem you were having was that all your links were in line. I hope I'm right in assuming that you meant for them to be stacked... If so, making the a tags display block while giving the menu container an inline-block display with the min and max renders the menu as described.
Actually, you can prevent the hover-menu from conforming to the width constraints of the parent by using positions. In this case, the menu tag will have
position:relative;
and the class hover-menu will have
position:absolute;
left:0;
and you might as well specify your other css rules on the hover-menu.
Long story short, I am creating a webpage that has a fixed wrapper <div> across the top and a small amount of "content" underneath it that you can scroll up and down from.
Problem is that my "content" <div> doesn't start from the bottom of the wrapper <div> but further up the page underneath it
Here's an example: jsfiddle
#wrapper {
background-color: #327bb7;
margin: 0 auto;
position:fixed;
color:#FFFFFF;
line-height: 100px;
width:100%;
height:100px;
}
Because of the:
position:fixed;
Add for example:
position: relative;
to #content.
or
position: absolute;
top: 100px;
the last if you want to append the content below the fixed area.
add padding-top : 100px Or whatever you want
but basically the padding will be the height of the wrapper.
#content {
padding-top : 100px;
}
Depending on the requirements of your layout you might want to try something like this.
document.getElementById("content").style.marginTop = document.getElementById("wrapper").style.height;
Just a simple image that uses some jQuery to fade some content over the top when moused over.
Only problem is that when the hover over takes effect, the hover spills into the div gutter making the hover over bigger than the actual container.
each image is layed out like so
<li class="large-4 columns item">
<div class="description"><h1>Image hover</h1></div>
<img class="display" src="http://placehold.it/400x300">
</li>
Can see a live example here.
http://jsfiddle.net/QLUMH/
Any ideas on ways to fix/improve what I am doing here? Cheers
Demo
Here you have live example,
you are giving 100% to width and height.
so that really goes overflow.
Code edited-
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
The issue is that your description fills the entire column, which is wider than your image. If you add an "inner column"/container that collapse to the same width as your image, it will work alright. I've created a fork of your demo that demonstrates this.
I've added a wrapper "ib" (Just stands for inner block. rename this to a proper name) inside each .column.item like so:
<div class="ib">
<div class="description">
<h1>Image hover</h1>
</div>
<img class="display" src="http://placehold.it/400x300">
</div>
And then just created a very simple CSS rule for making this wrapper collapse to its contents:
.ib {
display: inline-block;
position: relative;
}
You did not style your li. The issue is that in foundation.css it is getting padding-left and padding-right. You need to remove that and use margin-left and margin-right instead. And you also need to fix the width of the li. As .description will get its 100% height. So you need to include a small css in your own file (don not modify foundation.css).
#portfolio li.columns{
/* You can use the width in '%' if you want to make the design fluid */
width: 400px;
padding: 0px;
margin: 0px 0.9375em;
}
Fiddle
You'll just have to get rid of the padding on tne li
li{ padding:0 }
or use the the box-sizing property:
`li { box-sizing:border-box; -moz-box-sizing:border-box; }
Change in CSs will help,
I have updated the same in fiddle
with change in CSS,
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
#portfolio .description h1 {
color: white;
opacity: 1;
font-size: 1.4em;
text-transform: uppercase;
text-align: center;
margin-top: 20%;
width:400px;
height:300px;
overflow:hidden;
}
Update:
If the H1 created extra cutter and wrapping issue(for some), please use the DIV tag instead, which should work fine!
I hope this will solve your problem :)
I'm looking for a way to create toolbar buttons uisng jquery ui.
I tried to create button using
<div id='menubar_home' style='vertical-align: middle;width: 20px; height: 20px;'>
</div>
and using
$('#menubar_home').button({
icons: { primary: "ui-icon-home" }
});
But image in button is not centered:
How to center image in button ?
#menubar_home {
display:table-cell;
vertical-align: middle;
text-align: center;
}
I assume there isn't transparent sides in the image.
Adds a border to img to work on positioning: border: 1px solid red;
Then check the image has a display: block; property.
Try to add margin: 0 auto; property, which aims to center a block (your image).
You will perhaps need to add !important to force the property: margin: 0 auto !important;
Hoping to help you (not sure, not easy without manipulating the code myself).
Add a padding:8px; to the button/input style to allow the icon to be properly aligned.
You could also place a span within the div like so:
<div id="menu-bar-home">
<span class="ui-icon ui-icon-home"></span>
</div>
reference it in css and change the position:
div#menu-bar-home {
position:relative;
}
div#menu-bar-home > span {
position: absolute;
left: +or-(n)px; /* so just adjust the position
}
also note you may have to adjust the z-index of the span.
best o' luck, bro.
EDIT: you may still achieve the results you want in this manner, but I though you were creating the button with the div.
As the gentleman below suggests, I would set the css for menu bar as such:
div#menu-bar-home
{
display: table-cell;
vertical-align: middle;
text-align:center;
}
I ended up doing the following in CSS:
#menubar_home {
font-size: 0;
width: 23px; top: 5;
height: 23px;
}
I have a containing div that is NOT restricting the width of its child divs. The divs are stretching all the way to the full width of the screen, when i have a set width on both the container and the child. Why is this happening. I do NOT have any positioning or floating going on.
Please view my HTML:
<ul class="tabs_commentArea">
<li class="">Starstream</li>
<li class="">Comments</li>
</ul>
<div id="paneWrap">
<div class="panes_comments">
<div class="comments">member pane 1</div>
<div class="comments">member pane 2</div>
<div class="comments">member pane 3</div>
</div>
My CSS, the relevant parts of it at least:
#MembersColumnContainer {
width: 590px;
float: left;
padding-right: 0px;
clear: none;
padding-bottom: 20px;
padding-left: 2px;
}
ul.tabs_commentArea {
list-style:none;
margin-top: 2px !important;
padding:0;
border-bottom:0px solid #666;
height:30px;
}
ul.tabs_commentArea li {
text-indent:0;
margin: !important;
list-style-image:none !important;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
float: right;
}
#paneWrap {
border: solid 3px #000000;
}
.panes_comments div {
display: ;
padding: px px;
/*border:medium solid #000000;*/
height:150px;
width: 588px;
background-color: #FFFF99;
}
You could set max-width on either, or both, of the div elements to prevent their expansion:
#containerDiv {
min-width: 400px; /* prevents the div being squashed by an 'extreme' page-resize */
width: 50%; /* defines the normal width of the div */
max-width: 700px; /* prevents the div expanding beyond 700px */
}
It might also be that you're allowing the div's overflowed contents to be visible, as opposed to hidden (or auto). But without specific examples of your mark-up and css it's very difficult to guess.
Generally giving elements layout is pretty straight forward (always assuming you have a good understanding of floating, positioning and the box model), and in most cases you wouldn't have to use max- min-width to control elements on the page.
My two cents: If I was you, I'd start stripping out code (starting with the !important rule), and see when the problem is solved. De-constructing the code like that is a good way to find bugs.
Sorry I couldn't help, but I'm reluctant to give advice since the code you provided shows a lot of other stuff going on elsewhere that might be contributing to your problem (like having to use !important).
:D
I figured out the problem. The file that was calling in the css was conflicting with another external css file that had the same element with the same name in it. Thank you all for your help though.