Develop Reference

How to constrain rendered HTML code inside a div

I have a function that renders the HTML code from a textarea into a div of a certain size. The size of this div is determined when the page loads and is generally about 45% the width of the browser. I would like to know if there is any way to constrain what is rendered to not go out of the bounds of this div, but to instead add scrollbars if the rendered content exceeds the boundaries.
Basically, I'd like this div to behave like a browser window would when you render an HTML web page. Here is the code I have that does the rendering:
$(document).ready(function(){
$("#showmeImg").click(function(){
$("#outputContainer").html($(myEditor.getValue()));
});
});
So when 'showmeImg' is clicked, the contents of 'myEditor' is rendered and place within the 'outputContainer' div tag. All I have for this div tag are basic styling like background color, width, and height.

You should be able to get that effect using CSS. If you are setting the width programatically (as your question seems to suggest), then all you would need to do is set the height and overflow styles to get the desired behavior. Something like this:
#outputContainer {
height: 300px;
overflow: auto;
}
If you want the scrollbars to always be there (regardless of whether or not scrolling is needed for the current content), use overflow: scroll;.

You should add the CSS Rule 'overflow:auto' to the containing div. If the content spills outside of the div, scroll bars will be added automatically.

Have you tried something like this?
#outputContainer {
ovwerflow-y: auto;
}
This will add a vertical scrollbar, when there is enough content inside your container.
There are many nice jQuery plugins for adding nicer scrollbars though :).
http://enscrollplugin.com/ for example.

Increase size of parent div as image gets bigger

My situation is the following: I have page that shows an image but sometimes it's too small, so I need to get the it bigger. I used CSS Transform to do that and works fine.
The problem is that the parent DIV's size does not increase, and there is space in the page for it to do so!
Using overflow on the parent does not help me because it crops the image or add a scroll bar. I need it to grow.
So, I managed to replicate a little what I am talking about here: http://jsfiddle.net/viniciuspaiva/7jJXQ/
When you click in the "Zoom" button, I want the div to grow and the pager below to get down. But I also want the page to load as it is, with the pager on top. Hope it's clear.
As you can see, I use bootstrap on my page. And the zoom button just adds a class to the image:
javascript:var img = $('img.center'); img.addClass('zoom');
Thanks!

Try doing it the other way. Have the image fit to the div, and resize the div instead.
Add this style to the image (assuming .myimg is the class).
.myimg {
display: block;
width: 100%;
}

Try placing this inside of your current div at the end of it before you close your current div. It will force the div to expand to contents.
<div style="clear: both;"></div>
So your div opens, the contents inside, then add the code above, then close the div.

Here's an example of Joseph the Dreamer's implementation. Check it out here. It only relies on setting display: block; and width: 100%;.

How Can I Put An Uneditable Label or Div Inside TinyMCE so that it can scroll with the text?

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>

Input Field Overflow Moves Containing Div

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.

adjusting height of div based on internal div

I have a set of divs like so:
<div id="textArea">
<div id="text"></div>
</div>
CSS properties:
#textArea {
height: auto !important;
min-height: 2em;
overflow: hidden;
}
#text{
display: none;
}
I'm filling in the div with the id of "text" with error messages coming back from a POST request using jQuery. The size of the data coming back is not static, but my problem is that the div is not adjusting.
I am basically trying to mimic the Ruby on Rails default flash message that will push divs further down the page with a dynamically adjusted div.

I think you are simply doing too much - A div should automatically expand to fit the text content inside it, unless you have a specific rule saying otherwise. Do you have a rule that specifies a height for all divs? Is that why you have the height: auto !important here? Are you using a reset stylesheet? Something external to these rules is affecting your divs.
Hope that this points you the right way.

Div's should update height and width automatically unless otherwise told to. What is your jQuery code to update the div? What are you using to reveal the div to the browser (since it's currently set to display:none)? Have you tried using firebug to inspect the elements?