I want to edit an absolute positioned DIV which is located within a contenteditable DIV. This works great with IE, Chrome, Safari and Opera, but unfortunately not in Firefox.
This is the code:
<DIV contenteditable="true"
style="border:1px solid #F00; width:220px; height:220px;">
<DIV>
<P>DIV 1, editable</P>
</DIV>
<DIV style="position:absolute; left: 20px; top: 50px;">
<P>DIV 2, not editable in FF !?</P>
</DIV>
</DIV>
I already did a unsuccessful try in http://jsfiddle.net/Jf54f/4/
Is this a bug? Does someone have a workaround? Thank's in advance :-)
Set position:relative on the editable element, so that the positioned div is considered to be inside it.. (most likely a bug in the implementation)
Demo at http://jsfiddle.net/Jf54f/8/
removing contenteditable="true" from the main div and adding it to the two inner divs worked fine.
check it here: http://jsfiddle.net/RASG/Jf54f/10/
Well you should not set contenteditable="true" try just contenteditable. The term just without any value, you can add values like "plain -text-only" for chrome and IE because they allow formatting with ctrl+b and all.
<DIV contenteditable id="">
Though as my friend here said, it works in all browsers. I tried too, it does.
Related
so, i'm an intern on my company, and need to deal with some stuff that i'm not 100%.
The thing is, the last google chrome update crashed some css in my java web app. We do work with a table, based on scrum. Basicly a taskboard, where you can set a task, remove it, set is as "to do, doing and done". But, since 12/12 +/- your task was missing from the taskboard. We didn't knew what was going on at the begining, but after a little research we found out that the style of the 'height:100%' of tr td was crashing, and making everything desapear. It works fine in firefox and also in IE. when we did remove the height, the tasks appeared. But the thing is, without the height:100% the jquery droppable ui, that we use to move the tasks inside the table was set to the height automatically, even when it is with height 100%.
We don't want to set a minimal height, because it was supposed to work pretty fine.
Here is the code, it's a little big to text in here, so i typed it on jsfiddle.
https://jsfiddle.net/rychardgoltara/bvw1hkxg/
<tr data-bind="attr:{id: sequencial}" id="2093" class ="selectable">
<td class ="historia" style="height:1px">
<div class="colapsada" style="display:none;">
</div>
<div class="expandida">
<div class="historiaLayout">
<span id=""></span>
</div>
</div>
</td>
<!-- ko foreach: {data: $root.fases, as : 'fase'} -->
<td data-bind="css : 'fase-' + id" class="fase-7">
<div class="colapsada"></div>
<div class="expandida tarefaExpandida">
<div class="nomeFase fase">
<span class="tamanhoVariavel sh-tooltip" data-bind="text: titulo, attr: {'aria-label': titulo}" aria-label="A Fazer">A Fazer</span>
}
.tabelaQT tbody tr td {
border-right: 1px #ccc solid;
height: 100%;
}
.tarefaExpandida {
margin: 5px;
overflow: auto;
height: 100%;
One of our solutions was setting the height:100% on tr td and also setting it to height:-webkit-calc(0px). So it can work fine on chrome without affecting other browsers. But the thing is, this solution is the real solution? Am i missing something? And if this is the solution, why is it? I don't know how to explain the solution to my boss. Here is a pic of what is looks like, and what should looks like.
https://imgur.com/a/DXthL
I'm trying to have a basic HTML page, split three way, top and bottom panes should have a fixed fix, or autosize, and middle should fill the remaining.
I got it working once using position:fixed, but that is very ugly and doesn't work once things get more dynamic.
I finally got this to work on Chrome using tables and making the height:100% in the middle tr. I celebrated, then tried Firefox, and it does not work.
Here is the fiddle,
https://jsfiddle.net/b1uxcupv/6/
HTML is basically,
<html style="height:100%;width:100%;max-height:100%">
<body style="height:100%;width:100%;">
<table style="height:100%;width:100%;">
<tr><td style="height:50px;width:100%;background-color:blue"></td></tr>
<tr><td style="height:100%;width:100%;background-color:grey">
<div style="overflow:auto;height:100%">
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
</div>
</td></tr>
<tr><td style="height:50px;width:100%;background-color:green"></td></tr>
</table>
</body>
<html>
I have basically two versions of this, one the page should fill the browse window with the middle pane taking all the extra room and scrolling if required.
The second is basically the same but the whole thing is in a fixed sized div inside a page. Both work on Chrome, but Firefox does not give the scrollbar in the middle pane, it just ignores the max-size and keeps filling the page.
Here's probably the easiest, modern way of handling it.
HTML
<div class="container">
<div class="head"></div>
<div class="mid"></div>
<div class="foot"></div>
</div>
CSS
.container {
display:flex;
flex-direction:column;
height:100vh;
width:100%;
}
.head {
background:blue;
min-height:100px;
}
.mid {
background:#eee;
overflow:auto;
flex-grow:1;
}
.foot {
background:green;
min-height:100px;
}
Okay I found a solutions... but is requires JavaScript, which I am finding required to layout things correctly in a web app, CSS really needs to support dynamic web app layouts better.
Here it is,
https://jsfiddle.net/b1uxcupv/15/
<html style="width:100%;height:100%;">
<body style="height:100%;width:100%;padding:0;margin:0">
<table style="height:100%;width:100%;">
<tr><td style="height:50px;width:100%;background-color:blue"></td></tr>
<tr><td style="height:100%;width:100%;background-color:grey">
<div id="scroller" style="max-height:100px;overflow:auto;height:100%">
xxblah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
</div>
</td></tr>
<tr><td style="height:50px;width:100%;background-color:green"></td></tr>
</table>
<script>
var scroller = document.getElementById('scroller');
console.log(scroller);
console.log(scroller.parentNode);
console.log(scroller.parentNode.offsetHeight);
scroller.style.maxHeight = scroller.parentNode.offsetHeight + "px";
var reset = true;
window.onresize = function() {
console.log(scroller.parentNode.offsetHeight - 4);
scroller.style.maxHeight = "100px";
if (reset) {
reset = false;
setTimeout(function() {
reset = true;
scroller.style.maxHeight = scroller.parentNode.offsetHeight + "px";
}, 100);
}
};
</script>
</body>
Basically I set a max-height on the middle scroller to something smallish (100px) then is JavaScript resize the maxHeight to the parent's offestHeight, and register for resize events.
Perhaps not pretty, but it works Chrome, Firefox, IE, and Safari.
I still think there must be a css solution that does not require JavaScript or position:fixed, and works on more than just Chrome. Anybody got an idea?
Thanks for the users who submitted answers, they were good attempts, but did not fill the window, or used static fixed positions.
Based on this SO and this SO, it seems like <td> does not support the overflow attribute. Placing a <div> within the <td>, and also setting a fixed height for the <td> but a height:100% for the <div> got it working for me. Any tag with an overflow attribute should either have a fixed height or be nested within another tag with a fixed height.
Here is my fiddle that works in Chrome and Firefox: https://jsfiddle.net/rgutierrez1014/b1uxcupv/13/
A tooltip library is copying the dom node to insert the html inside a tooltip.
I need to target the element inside the tooltip, but the javascript is always applied to the original element.
<a class="tooltip">Open</a>
<div class="tooltip-html" style="display:none;">
<div id="main-content" class="scroll">
<div class="Content">
<div class="blue">
</div>
</div>
</div>
I have tried using the enter callback of the tooltip, this was not working. And applying things before the html is copied by the tooltip only cosmetically works, the javascript is still looking at the original. I even tried changing the class before I apply anymore javascript. Figuring if I changed the class the original element would no longer be accessible. The class changed, but the javascript was not applied to what was inside the tooltip.
Is there a good way remove a div once it has been copied, or a better method of finding/targeting the correct element.
$(this).find("div.scroll").test();
EDIT:
...Before...
<div id="main-content" class="scroll">
<div class="Content">
...After...
<div id="tiptip_holder" style="max-width: 230px; margin: 23px 0pt 0pt 999px; display: none;" class="tip_left_bottom">
<div id="tiptip_arrow" style="margin-left: 220px; margin-top: -12px;">
<div id="tiptip_content">
<div id="main-content" class="scroll">
<div class="Content">
....
The this was a part of the enter callback for the tooltip library:
var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({ content: tip_html, enter: function(){
$(this).find("div.scroll").test();
}
Also tried using,
$("#main-content.scroll", "#tiptip_content").test();
UPDATE:
As people mentioned naming the parent div like I was should of worked, here's an example of how i'm not able to target inside the tooltip.
jsfiddle.net/mstefanko/pUm5V/24
//$("#main-content", "#tooltip-content").css("background", "red");
$("#main-content", "#tiptip_content").css("background", "blue");
Blue doesn't work, red does. I feel like both lines should work.
Found the main cause of my issue. The following lines in the plugin:
function active_tiptip(){
opts.enter.call(this);
tiptip_content.html(org_title);
the enter call was being called before any of the tooltip content was in the DOM, as much as the wrappers for the tooltip existed, calling main-content when it wasn't in the tooltip yet will obviously fail to work. Not sure i've completely solved my issue, but reversing these lines fixes the question at hand.
Recently, I've been trying to work with Prototype & Scriptaculous to have a rather simple SlideDown & ScrollTo effects to fill out a form for their application. It works fine in FF3, FF4, Chrome, Safari, Opera, IE9, and IE8. I knew IE6 would be an issue, but I thought I could get IE7 to work with a couple slight modifications.
The fix of setting the width of the div did not fix the issue.
Currently, it is not working in IE7 and I'm at a loss for why. I'm not a ninja at JavaScript and would appreciate any help given.
XHTML Structure:
<div id="scrollPoint"></div>
<div id="slideForm" style="display:none;">
<div style="position: relative">
<div class="separator" style="padding:5px 0"></div>
<h3 class="fhgroupblue">Apply for this Position:</h3>
<ucl:ApplicationForm id="WebUserForm" runat="server" />
</div>
</div>
Javascript:
<script type="text/javascript">
function hideDetails() {
if ($('showFormLink').style.visibility != "hidden") {
$('showFormLink').style.visibility = 'hidden'; Effect.SlideDown($('slideForm'));
}
Effect.ScrollTo('scrollPoint'); return false;
}
</script>
Trigger:
<div style="text-align:center;">
<a id="showFormLink" onclick="hideDetails();">Apply!</a>
</div>
CSS:
#jobDetails #slideForm {
padding-right: 10px;
width: 400px;}
Figured this out -- Posting solution for possible other troubled users.
For those that are using SiteCore, don't forget to add:if(!Prototype) to the top of your included Prototype.js file.
This is due to SiteCore rolling in it's own Prototype library with the Web Forms for Marketers.
Here's what we did:
Added if(!Prototype) to the top of
our included Prototype.js file
In /sitecore/shell/controls/lib/{/prototype, /Scriptaculous}, updated the JavaScript libraries to their newest versions.
Magic happened and everything is back to working in IE6 & 7 the way that it was supposed to.
I have a "div" with style: overflow-y: scroll; overflow-x: auto;
I try to dynamicaly add image inside this "div" with absolute or relative position. Everything seems ok until user tries to scroll the "div" content: image stays in fixed position relative to browser window. This problem seems to be only in IE(7), in firefox everything is fine.
Is there any solutions for this?
EDIT (in response to questions raised below): I'm positioning the element because I need it to show in front of another element.
I don't know if it is a bug or a "feature" in IE, but I've run into the same thing before. Luckily there is an easy fix. Just add "position:relative" to the <div> that has scrollable contents.
Wrap everything in a containing div that is positioned relatively on the page:
<div style="display:block; position:relative; width:200px; height:200px; margin:0; padding:0;">
<br />
<img src="_foo_.gif" style="position:absolute; top:0; left:0; z-index:100;" />
<br />
<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px; z-index:10; display:block; position:relative;">
<br />[scrolling content]<br />
</div>
<br />
</div>
Is there a particular reason you need to set a position for the image? It works fine in IE7 without setting a position.
<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px;"><img src=xxx.gif" width="200" height="250" /></div>
Try float:left or float:right with margin
I got the same issue in chrome with position:absolute in a overflow-y: auto;. The divs were getting fixed in there positions- while scrolling.
And a simple solution is using float.
my old code was-
position:absolute; right:10px;
and I replaced with the following and it worked-
float:right; margin-right:10px;
You know what, it might just be easier to wrap the absolute positioned elements in a relatively positioned container element, I think that should be able to scroll...
Things I learned the hard way: For IE6/IE7 it may need to have the image as the last DOM element in the containing DIV to get it to appear on over the scrolling DIV.
You need to use relative positioning if you want it to be able to scroll. The trick is to use negative positioning on the second element.
Let's say you have two elements A and B, and you want to position B in front of A. It would look something like this:
<div id="A" style="position:relative; width:300px; height=240px;">Element A</div>
<div id="B" style="position:relative; width:300px; height=240px; top:-240px;">Element B</div>
Depending on the content, you might have to add additional styles such as "display:block;" etc. A good resource for these is w3schools.com
For a good tutorial on DIV positioning with CSS go to:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Cheers
The declaration position: absolute; means that the element will be displayed relative to the view-port's upper left corner. Using relative instead means that the values you use for left and top will be added to wherever the img would have been normally.