I have the following code:
<div style="max-width: 100px; overflow: scroll">
<table>...</table>
</div>
I want to limit the size of the div, but have the table stretch as far as it wants (i.e. ignoring the max-width attribute of the parent div. How do you do this? Currently the browser resizes the table in attempt to follow the max-width...
In CSS file:
div {
overflow: visible;
}
You can't use the position: absolute; for the table element because it doesn't ignore the div...the div ignores IT. If you don't have something filling up the div underneath the table it will not show at all.
PS - I said to put in the CSS file on purpose. I see he has it in his HTML but you should rarely put CSS styles in HTML files. Using a .css centralizes and standardizes across the site and all that has to be set are classes and ids.
Set the position of the table to absolute, then it will not be constrained by the parent div
<div style="max-width: 100px; overflow: scroll">
<table style="position:absolute;">...</table>
</div>
Related
Using Draw2d and the menu selection code from the demo but I don't get the expected result...
In the demo, the menu appears on the right side of the clicked element. In my version the menu appears way off to the top.
This seems to be caused by the fact that I have some HTML directly above the canvas (header, etc...). On the contrary if the canvas is at the very top of the page it works well.
Found a way to fix this.
It's all about where you append the menu's HTML and relative positionning
In the demo there isn't any HTML above the canvas (on the website it's an iframe so what you see above is not really there from the canvas perspective) so it works.
The demo is misleading because in the code they add the HTML menu in the body tag. They can do that simply because their page is composed of only two elements : the body and the canvas.
In my case and probably yours too, doing this results in adding the HTML menu far far far far away from the canvas itself resulting in a position that is wayoff !
What they do is :
$("body").append(this.overlay);
What you should do is append the HTML menu (this.overlay) as a sibling of the canvas. Do NOT add it in the canvas itself. If you do, you won't catch click events anymore.
Your HTML should look like this :
<div id="some-parent">
<div id="gfx_holder">THE CANVAS</div>
</div>
And the code updated to
$("#some-parent").append(this.overlay);
But it's not finished yet. As the menu is added using position: absolute you'll need your parent containers set to position: relative so the the child's absolute position would become relative to the parent and not web page. It's CSS... You know...
Also, the parent should be the exact same size as the child canvas !
So the HTML should evolve to this :
<div id="some-parent" style="position: relative; height: 800px">
<div id="gfx_holder" style="height: 800px">THE CANVAS</div>
</div>
And when the menu's HTML is added it should look like that at runtime :
<div id="some-parent" style="position: relative; height: 800px">
<div id="gfx_holder" style="height: 800px">THE CANVAS</div>
<div class="overlayMenu" style="top: 230px; left: 197.391px;">⊕</div>
</div>
See ? The overlayMenu has position: absolute which allows it to be rendered at a correct position...
hf
I am using a Particle Js Canvas in my site. but the problem is it overflows in my other div .
as shown Below :
Is there any way I can hide it. the problem is that the canvas captures th efull sceen as its background but i want to show it only on paricular div and Hide from others.
THank You
Use overflow: hidden; in your JS Canvas div's parent.
Imagine you have this structure:
<div class="ParentDiv">
<div class="MyJSCanvas"></div>
</div>
Just add this:
.ParentDiv { overflow: hidden; }
I want to embed a dropdown div in a wrapper div that has 0 height, so that it takes no space whether or not it is shown, and when it is shown, it overlays the contents placed below. Suppose that dropdown element is a div with content Foo. I did something like:
HTML
<div class="dropdown_wrapper">
<div id="dropdown_content">Foo</div>
</div>
CSS
.dropdown_wrapper{
height: 0;
overflow: visible;
}
And through Javascript, I switched the #dropdown_content's style between display: block and display: none. When it is the former, I expect the content to be shown, but it is actually not shown, hidden within the wrapper div that has 0 height.
How can this be fixed?
you probably do not want the wrapper to use any space in the document. to use it as an anchor point use
position: absolute;
overflow: visible;
on the wrapper. this way the content will set it's own bounding box.
the rest seems to work as you intended. check this FIDDLE
See this JSFiddle
I want to make the .newslink links all the way to the borders of the .content divs.
I have a slideshow of different content that gets messed up either if I set the a tag around the div or if I apply display:block / display:inline-block to the a element.
Right now the links are only around the image and text because of the 15px padding in .content. You can check this by hovering your mouse over the div (near the border) compared to over the image and text area. I want each link to completely fill the surrounding div.
Is it in this case possible to accomplish without setting the a tag around the div or applying display:block / display:inline-block to the a element?
Working Fiddle: http://jsfiddle.net/8tqryvu5/
Firstly, let's get rid of the Table markup as you're not marking up a table.
<div id="tableNews">
<div class="cell2">
<div id="slideshow">
<div class="content">
<a href="#" id="rightLink1" class="newsLink" target="_blank">
<div class="picDiv">
<img id="rightPic1" class="pic2" src="http://static3.businessinsider.com/image/5238c9c5ecad047f12b2751a/internet-famous-grumpy-cat-just-landed-an-endorsement-deal-with-friskies.jpg"/>
</div>
<div class="text">
<h2 id="title1">title 1</h2>
<p id="rightBoxSubText1">asdasd</p>
</div>
</a>
</div>
</div>
</div>
</div>
To achieve the effect you should apply the padding to the anchor link as this wraps both the images and text (essentially forming the border). Here's the part to take note of:
.newsLink {
display: block;
padding: 15px;
}
As it's an inline element you will need to set it to display:block in order to make it wrap the elements inside it. If you correctly apply the style to the surrounding elements then setting it to display:block will not effect the layout.
Hope that helps.
I am not 100% sure that I got right the whole thing but I think you can achieve this by using
.newsLink{position:absolute;top:0;left:0;bottom:0;right:0;background:red}
It will take the wodth of the slideshow, which is the relative element. If you want it to take the size of the .content and not more you will have to add a wrap in display block around you tag
Here is a jsfiddle: http://jsfiddle.net/8c041xy7/5/
You just need to absolute position anchor tag
.newsLink {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
PROBLEM:
The contents of my div are positioned 'absolute' and the width of the contents are larger than the div.
As required the "extra" contents are clipped using "overflow-x: hidden".
Although, if I try to horizontal scroll using the mouse-scroller, the content get visible.
How do I not let this happen ? I am fine with using a JS or/and a CSS solution
e.g code
<body width='1000px'>
<div style='background-color: blue; width: 1200px'>contents</div>
</body>
Thanks !
I had the same problem, if you place it within a wrapper then it prevents trackpad scrolling.
#wrapper {
position: absolute;
width: 100%;
overflow-x: hidden;
}
I think the default behavior for the document body is to allow scrolling of content that is too big for it. This seems like it might not be too easy to work around.
Instead of specifying a width on your BODY, you could try using one more DIV and putting the width on that instead.
<div style="width:1000px;">
<div style="width:1200px;"></div>
</div>
Is there a reason you have to put width on the BODY tag?
You must use
$("element").on('mousedown', function(e) {}
Just change live to on