Since the way I had initially written my question received some down votes, and the link to the example no longer contains the problem, I'll describe the Chrome-specific issue I was encountering.
When highlighting overflowing text in an input field in chrome, if I dragged my mouse to the right of the page, the containing div would slide to the left. Initially I thought this issue was being caused by the input field, but it turned out that I had a separate div inside the same container that was wider than the container.
#container {
width: 100px;
}
#inputfield {
width: 50px;
}
#otherthing {
width: 300px;
}
HTML:
<div id="container">
<input type="text" value="Null" />
<div id="otherthing"></div>
</div>
Whilst the format of your question looks like link-spam, I clicked on it any way. The reason it's happening is because you're effectively highlighting all the text within that container, which has an element that overflows the right hand bounds. Take a look at <div id="selection"> - it is wider than the container, therefore pushing the total width of all the children beyond the bounding box. The browser is trying to help you by auto-scrolling the content to allow you to see what you're highlighting.
In short: fix your CSS for the #selection element so it doesn't overlap the container.
Related
I have created an auto expanding textarea element that dynamically grows based on the text content within it which works great. I do this by looking at the scroll height and then adding this to the height of the textarea.
The problem I have is when I load text into the same textarea on initial load via the value prop - it reverts back to it's initial height and only auto expands when I focus in on the textarea and hit enter which means it's cropping out a lot of the content (especially where multi-line items are concerned).
I've been trying to come up with a workaround for a while and I haven't managed to find a solution as of yet. Is there a way I can determine the scroll height of the container as if the user had typed something on mount to expand the textarea to the same height?
Edit: Apologies for the confusion, the issue comes when I recall the same text that was entered from a database into the same textfield
(added photos to demonstrate my issue)
Added photos:
Text when added in textarea
Same text on load/mount
(on the second image, you can see that the text area has gone back to it's original height after the text has been saved to a database and injected back into the same textarea)
$("textarea").height( $("textarea")[0].scrollHeight );
textarea {
width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<textarea>
I have created an auto expanding textarea element that dynamically grows based on the text content within it which works great. I do this by looking at the scroll height and then adding this to the height of the textarea.
The problem I have is when I load text into the same textarea on initial load via the value prop - it reverts back to it's initial height and only auto expands when I focus in on the textarea and hit enter which means it's cropping out a lot of the content (especially where multi-line items are concerned).
I've been trying to come up with a workaround for a while and I haven't managed to find a solution as of yet. Is there a way I can determine the scroll height of the container as if the user had typed something on mount to expand the textarea to the same height?
</textarea>
This should work:
let textarea = document.querySelector('textarea')
function auto_grow(element){
element.style.height = (element.scrollHeight) +"px"
}
textarea{
resize: none;
overflow: hidden;
height: 1000px;
font-size: 15px;
line-height: 1.5em;
}
<textarea oninput = "auto_grow(textarea)"></textarea>
this is the code for two divs placed side by side such that on minimizing the first div the second should automatically occupy the remaining space. When the first div is brought back to original position, the second should automatically reduce its size.
One more constraint here is that, the sizes of the divs are not fixed by pixels, they are infact had to be mentioned as percentages. Can any one help in this regards?
<div id="parent" class="parent">
<div class="left"><button class="collapse-expand"></button></div>
<div class="right">
<!--<button class="collapse-expand"></button>-->
</div>
Demo here: http://jsfiddle.net/rams10786/wrv8r91r/
I think I have acomplished what you want by not floating the right div and setting it to always 100%.
.right{
height: 100%;
width: 100%;
background-color: #67b168;
}
Also I commented the size change in the jquery code:
if($('.left').css("width")=='37px'){
$('.left').animate({width:"20%"});
// $('.right').animate({width: "80%"});
}
This is the updated code: http://jsfiddle.net/jfpamqb7/1/
I have created a label for the title of a TinyMCE editor. I would like to have this label be unmovable, uneditable and remain at the very top, inside the textarea so that it flows with the scroll bar if/when it appears. In other words, when the textarea becomes full and someone is writing, the label will eventually be out of sight, but if someone were to scroll back up, they could see it.
In other words, this is what I want:
I have tried a few things:
Put the label on top (and outside) of the textarea instead: The scroll bar does not include the label when it appears.
Same as #1, but remove the scroll bar from the textarea, and let the textarea grow as it becomes full and have the scroll bar appear on the outer div: The javascript is very ugly and acts differently in different browsers. You run into problems with seeing the bottom of the textarea as you type.
All of my attempts to insert the div into the textarea directly: Even if you make the div uneditable, a user can still erase the entire div by hitting backspace a few times. You can create javascript to check if it's still there and put it back but you run into troubles with putting the cursor back to its original position. You also have do strange things with the padding and positioning of it.
Place outside the textarea, but position it inside the textarea padding: The title remains when the textarea becomes full and when you want to scroll down (it should NOT remain). Sometimes the div height may get larger, so that means you also have to readjust the padding.
I feel that I have tried everything here and it's not possible to do what I want. Any help would be appreciated.
The trick is to make a div scrollable instead. By design, the toolbar disappears until you focus on the text. I'll let you figure that out.
<html>
<head><!-- CDN hosted by Cachefly -->
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script>
tinymce.init({selector:'div#editme', theme: 'modern', fixed_toolbar_container: 'div#tbar', inline: true});
</script>
</head>
<body>
<div id="mcewrapper">
<div id="tbar" style="height: 60px; width: 100px;"></div>
<div id="" style="overflow: scroll; height: 400px;">
<h2>title</h2>
<div id="editme" style="border:0; overflow: hidden; background: none; height: 500px;">Your content here.</div>
</div>
</div>
</body>
</html>
I have three divs with display: inline-block. In every div i have div with display: none when im trying to show hiding div with $('#div-id').show(1000) nearest divs 'jump around'
What should i change? I do like to see div under div just draw and the left or right div doesn't change his place.
For example two divs with my problem there (hide div shows up onchange in the textbox)
http://jsfiddle.net/WZCJu/13/
I added this CSS:
#amount-div, #specific-div {
width: 300px;
vertical-align: top
}
Version without the width, you may like it better:
http://jsfiddle.net/WZCJu/15/
Try using css's visibility property instead since it retains the element's position in the flow.
Docs: http://www.w3schools.com/css/pr_class_visibility.asp
Example:
<div id="herp" style="width: 100px; height: 40px; visibility: hidden;">plarp</div>
<div id="derp" style="width: 100px; height: 40px; visibility: visible;">slarp</div>
If you change the divs to use float: left; with a specified width you can avoid the "jump around".
See my updated example at: http://jsfiddle.net/WZCJu/12/
I changed the following:
<div id="amount-div" style="display:inline-block;">
...
<div id="specific-div" style="display:inline-block;">
To use floats with a specified width.
<div id="amount-div" style="float:left;width:220px;">
...
<div id="specific-div" style="float:left;width:220px;">
I also changed the <br> tag which preceeds the submit button so that it will clear the floated divs like so (though, there are better ways of handling that in my opinion):
<br style="clear:both">
display none removes the element completely from the document. there wont be any space reserved for it. so when u bring it back(show) it ll rearrange the nearby divs. so try using visibility:hidden which will retain the space but keep the div hidden..
Changing an HTML element from display: none to display: block or some other value will always cause it to change the flow of other elements around it in the tree. To prevent the DIVs from jumping around, you have a few options. Here are a couple simple ones:
First, you could "pad" the DIV in another DIV with a fixed size. For example:
<div style="width: 100%; height: 2em;">
<div id="js-amount" style="display: none">
<p>You will achieve this goal by:</p>
<p id="achieved-date"> <p>
<p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>
</div>
Secondly, you could use absolute positioning to remove your DIV from the flow of the document:
<div id="js-amount" style="display: none; position: absolute; top: 200px; left: 50px;">
<p>You will achieve this goal by:</p>
<p id="achieved-date"> <p>
<p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>
You must set a fixed size for your divs, so when the new one appears, it's constrained with the given side. I updated your JSFiddle : http://jsfiddle.net/WZCJu/16/
Have a look at how I constrain the size for your divs in the CSS. To improve layout, I took the liberty to add some styling to the submit button, so the HTML is a little bit modified too.
If you have any trouble understanding my solution, ask some questions.
When using display: none, the element does not render at all so it doesn't use any space on the rendered web page. I think you might want to use visibility:hidden to hide your element but still make the space usage calculation.
EDIT: It appears jQuery method works only on the display style so my answer is not applicable and indeed a fixed offset is necessary to avoid side effects in the page flow.
I have a container div element that has overflow:hidden on it. Unfortunately this property is required on it because of the way the site is made.
Inside this div it's all the site content, including some tooltips. These tooltips are displayed with jQuery when you mouse over a link or something.
The problem is that some of these tooltips will display partially hidden because of the overflow thing above, because they are positioned outside the container div...
Is there any way to be able to show a specific element from inside this container, even if it's out of its boundaries? Maybe a javascript solution?
the html looks like this:
<div style="overflow:hidden; position:relative;">
the main content
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>
try this:
<div style="position:relative;">
<div style="overflow:hidden; position: relative; width: {any}; height: {any};">the main content<div>
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>
just place your main content to another div inside the main div and give provided css to hide the content if overflowing...
CSS works like a box, and sometimes, you have elements "flowing out". Setting overflow: hidden on the main element hides contents that flow out of this box.
Consider the following:
HTML
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
<p>This content is outside of the box.</p>
CSS
.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: hidden;
}`
This outputs the following:
Note that the rest of the texts that overflow are hidden.
if overflow:hidden is to contain floats, then there are other ways that would allow tooltips to not be cut off. look foe clearfix:after