I am using jquery draggable to drag and drop the contents on the table cells that are part of editor. We are allowing users to directly drag and drop content to respective tds and use the template for creating prints and emails.
Whenever user drags over the table-cells of editor, a div with option to replace split and add are shown.
I am appending this div inside hovered td.
<tr>
<td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
<h1><a target="blank" href="http://local.smgt.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a>
<br><br><a target="blank" href="http://local.smgt.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>
<div class="contentdiv" style="position: absolute;">
This will show options replace/split/add new
</div>
</td>
</tr>
The problem is position absolute for this div doesnt work in firefox.
And i can not wrap up the contents of td inside other div having position relative as suggested Here and Here. The reason being for this is i am not sure how complex the dom of td can be as we are allowing user to fully customize the contents inside it.
Link To Fiddle
works perfectly in Chrome though. Any other solution guys??
Instead of using <table> <tr> <td> </td></tr> </table>, try to design div as a table.
For your reference http://snook.ca/archives/html_and_css/getting_your_di . After this try your code, it may help you out.
Design div as table is best approach. This may be used for responsive design too.
<td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
<h1 style="position:absolute;"><a target="blank" href="http://local.amp.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a><br> <br> <a target="blank" href="http://local.amp.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>
<div class="contentdiv"> </div>
</td>
you've given absolute position to <div class="contentdiv"> </div>
Remove absoute position for this and add absolute position for <h1> which is placed above to <div class="contentdiv"> </div>.
I've checked. It's working perfectly.
http://jsfiddle.net/qfquj/69/
The following are I modified.
removed absolute position for
.contentdiv{
height:200px;
width:300px;
background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
color: black;
background-size: 100% 100%;
text-align: center;
top:0;
opacity:.6
}
and added inline css for h1
<h1 style="position:absolute;">
Here is answer for your question. I hope this may help you.
http://jsfiddle.net/qfquj/73/
What I modified is,
Removed top:0 and added float:left
.contentdiv{
height:200px;
width:300px;
background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
color: black;
background-size: 100% 100%;
text-align: center;
position:absolute;
opacity:0.6;
float:left;
}
Added inline css float left for <h1>
<h1 style="float:left">
Firefox has a problem with absolute positioning whenever tables or display: table-cell is involved, where it will ignore the table cells as a relative parent.
It's a 13 year old Gecko bug.
You can fix this by reverting from the table structure and using display: inline-block on your cells for example, or putting another relative div around your table cell.
Related
I have a div that wraps a table with style display: table. Table contains div with height:500px http://jsfiddle.net/9ucm7z9h/:
<div style="width: 400px; display: table; background-color: blue;">
<div style="height: 100px; background-color: green; overflow: scroll">
<table style="width: 100%;">
<tr>
<td>
<div id="test" style="height: 500px; background-color: yellow;"> </div>
</td>
</tr>
</table>
</div>
</div>
This code rendered differently in IE and Chrome/Firefox. It is a Chrome/Firefox bug? What can I do to force it rendered as in IE?
It seems to be a bug which can be eradicated by triggering the layout somehow.
First of all, the child element of one ruled as display:table might turn into display:table-row or display:table-cell by default, even if not written via the CSS rules. Browsers always try to correct or fix things which obviously here do not work out properly.
Trying to trigger layout using float or display:inline-block here looks like it fixes the misbehavior of the parent displayed as table, at least in Firefox.
http://jsfiddle.net/9ucm7z9h/3/
You can find a bug report here.
I inserted a .swf file to my page inside a div, and I tried to make it vertically aligned to the middle of this div, but it didn't work, only horizontally but that's not what I want.
I tried to place this file in another div inside the main div and change the alignment of this div as well.
Any suggestions?
Here is a good way I use to center elements horizontally and vertically:
<div style="position:fixed; top:0; left:0; width:100%; height:100%;">
<div style="height:100%; display:table; margin:0 auto;">
<div style="vertical-align:middle; display:table-cell;">
<div><p>This is a fully-centered div!</p></div>
</div>
</div>
</div>
Hmm... its kinda hard to answer without a code snippet.
Here is an article for creating wrappers around Flash content: http://livedocs.adobe.com/flex/3/html/help.html?content=wrapper_13.html
Scroll down to the table, where they start talking about "align" or just do a page search for the word "align" to see what they have to say.
Here is also a quick idea, I have noooo idea whether or not it works, just food for thought:
div.SWFContainer object, div.SWFContainer embed {
display: inline-block;
margin: auto 0px auto 0px;
width: auto;
vertical-align: middle;
}
If I am in a table cell in a apply the CSS rule vertical-align: middle; to that cell then all the text centers vertically in the cell.
<table>
<tr>
<td style="vertical-align: middle;">
I am vertically centered text!
</td>
</tr>
</table>
However, if I apply this to another element it functions differently or not at all. For example:
<div style="width: 300px; height: 400px; vertical-align: middle;">
I am not vertically centered, but I wish I was :(
</div>
But then if I apply it to an image tag then it adjusts how the image is oriented with other inline elements.
Here is a jsfiddle with examples of all these scenarios.
My question is, how can I accomplish vertical center alignment within a simple DIV just like the way it behaves in a table cell?
Add display: table-cell to your div.
jsFiddle: http://jsfiddle.net/7FYBa/20/
<div class="outer" style="position:absolute;">
<div class="inner" style="display:table-cell; vertical-align:middle;">
I am not vertically centered, but I wish I was :(
</div>
</div>
But of course. Vertical centering is pretty funky in CSS.
I'd suggest you read up on some of the vertical centering techniques out there. Different elements and considerations equate to different methods. Here's an article I'd suggest.
You can try something like this using jQuery http://jsfiddle.net/7FYBa/30/
vertical-align works for none-table-elements when you increase the line-height.
#elem {
vertical-align: middle;
line-height: 100px;
}
But of course layouting is not that easy using line-height.
I have a div with width: 400px and height: 300px
Inside the div I will insert some Text which should be aligned horizontaly and verticaly.
if the text inside the div is bigger than the div, it should show the scrollbars. Here is a picture which shows what i mean:
The following works in webkit & geko & IE8 upwards. Try some of these techniques for vertical centering if you need legacy IE compatibility: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ OR Vertically and Horizontally Center Image inside a Div, if you don't know Image's Size?
<div style="height:300px; overflow-y:auto; border:solid 1px #CCC; width:400px;">
<div style="display:table-cell; vertical-align:middle; height:300px; text-align:center; width:400px;">
test
</div>
</div>
you might want to use on div as a container and then put your text in another div
you might also want to check out jscrollpane
div.container {
overflow: auto;
text-align: center;
}
<div class="container">
<p align="center">
<h2>Heading 1</h1>
<h2>Heading 2</h2>
</p>
</div>
Also try to set a fixed height for your container so you can get the scroll bars
div.container {
max-height: 200px
}
The post by cronoklee works good too u might want to combine the two methods to get exactly what you want
I have a table that is 640px wide seperated in two [TD]'s. The left one is 150px and the right one 490px.
The question is, using CSS or any other method, how do I stop the content from overflowing the size I have set and making the page look like a mess.
I have have tried the css overflow: scroll method and in some cases this works, but not in all. I need something that is going to work everytime. If I could get each TD to scroll if the content is larger that would certainly suffice.
I do not have a link to provide, this is just a general question as I will have many areas on my site that I may need to use something like this.
Thanks
If you're using tables as backbone of you website, then you do it wrong. You should use div elements instead.
Tables should be use for tabular data, not for structure.
Sometimes it's quite hard to get fast the look as when used table, but it's not impossible. For 2-row table you can use something like this
<div id="container">
<div id="left">
<div id="right">
<div class="clr" >
</div>
CSS:
#container{
width: 640px;
}
#left{
width: 150px;
flot: left; /*if you want them to be next to each other */
overflow: scroll; /*or hidden?*/
}
#right{
width: 490px;
float: left;
overflow: scroll;
}
.clr {
clear: both;
}
I agree with both answers so far - the ideal solution is to re-code your layout without the table, but if you don't have time, wrapping your table cell content in a <div> will do the trick:
HTML
<table>
<tr>
<td class="left">
<div>This is your left content</div>
</td>
<td class="right">
<div>This is your right content</div>
</td>
</tr>
</table>
CSS
table {
width: 640px;
}
td div {
overflow: scroll;
}
td.left,
td.left div {
width: 150px;
}
td.right,
td.right div {
width: 490px;
}
The added <div>'s around your content will respect the CSS overflow property and prevent non-breaking content from blowing up your layout.
Since you are using fixed widths, it sounds like you need to set table-layout: fixed on your table element.