If I individually load in a div with a width of say 500px and display:inline-block, when it reaches the edge of the document the next start on a new line. Is there a non JS way of making the document expand horizontally (ie. with scrollbars) instead.
Sounds like you need to use min-width instead of width
Also you might want to use white-space:nowrap in order to keep text in one line instead of wrapping to another line.
Related
I have the element like below which is nested within other divs.
'holder' contains content which is larger than it can display. But I want to restrict the content to be only inside of 'holder'. Otherwise when hold the mouse down and drag to the left/right border the content will be moved accordingly and this is not wanted.
So I apply the "overflow:hidden" style. But this only works horizontally not vertically. The content still overflowed downwards.
This is under IE8,9
Any ideas?
<div id="holder" style="background-color:white;"></div>
The issue solved with addition of "overflow:hidden;position:fixed" style.
without specifying "position:fixed" the container will be extended fully to accommodate the whole content. Setting "position:fixed" has no effect since the container already displayed everything.
I'm trying to make an ebook reader. I want each page to scroll sideways (like the Pivot viewer does) but I can't get out how to figure out how many words need to be added to the text box on a screen to before it starts overflowing (I don't want the user to scroll vertically).
Any tips?
Thanks!
There is a Scrollable TextBlock which divide text into blocks of 2048px height. You can use their code to get text that will exactly fit into one page (800px, for example)
Creating Scrollable TextBlock for WP7
If you call the UIElement.Measure(Size) method, then check the UIElement.DesiredSize property, it will tell you the size of an element before it is rendered. You could add text, repeatedly measuring the rendered size.
However ... this will be pretty inefficient. It is much better if you can create a layout that performs what you require automatically.
For some reason a basic unstyled DIV element has extra height tacked onto the bottom when it contains a VIDEO element (and possibly other elements - I haven't tested with many types).
<div><video src="my_movie.ogv"></video></div>
I have the above line of code in a barebones base HTML file. With Firefox or Safari/Chrome's (if I use an .mp4 file instead of course) DOM inspectors on I see that the computed height of the DIV element is anywhere from 2-5 pixels more than the height of the VIDEO element.
This doesn't seem like expected and intentional behavior. If I put a P element in there instead of a VIDEO element, for example, the DIV doesn't have any of the extra height.
Does anyone know why the browsers are rendering this configuration of DOM elements in this way?
If your markup is as above and there are no special styles applied to it, then the behavior you see is required by the CSS box model; the space is the size of the font's descent, because the bottom of the video is placed by default on the baseline, not at the bottom of the text. In particular, see https://bugzilla.mozilla.org/show_bug.cgi?id=22274#c55 for an explanation in spec terms and https://bugzilla.mozilla.org/show_bug.cgi?id=22274#c37 for how to get rid of the space if you want to. You could also set line-height on the block to 0 to get rid of the space; which approach you take should depend on your other design constraints.
I want slickgrid to autosize the columns based on the widest content or header text - whichever is wider. In simpler terms, I want it to simulate the default behavior of regular HTML tables when it comes to column sizing. How can I do it in slickgrid?
When constructing your options, you can use forceFitColumns: true
var options = {
enableCellNavigation: true,
forceFitColumns: true
};
This will make the columns fill the entire width of your grid div.
The OP is looking for columns to grow to match their content. grid.autosizeColumns() grows the cells to fit the parent container, which is not the same thing.
I have added this feature, and it is about as manual as you might imagine. You loop through the displayed cells and measure each one, saving the widest cell and using that width to set the width of your column. SlickGrid gives you good access to the cells in the viewport, so that works nicely.
The measurement algorithm is your big decision. You may put the content off screen and measure it, as #jay suggests. This works, but it is the slowest method, as it requires a repaint to insert, and a repaint when you remove. There may be ways to optimize. The solution I went with is to measure the width of every letter in the alphabet, as well as other typographic characters we come across, and sum them to generate a width. Yes, this sounds absurd. It has many constraints: The font size must be the same, it doesn't support images, there can't be any line returns, and more. If you can live with the constraints though, you can calculate sizes for a huge grid viewport in <5ms, because the character widths are only measured once.
After you get the sizes of the columns, you assign them to your columns using grid.setColumns().
Slickgrid will not support column auto size based on data.You need to write a plugin or fork the slickgrid core to modify.
Here is the link I have created a plugin to handle slickgrid auto size
https://github.com/naresh-n/slickgrid-column-data-autosize
I added this after the grid is drawn and it works fine.
$(window).resize(function() {
var cols = grid.getColumns();
grid.setColumns(cols);
})
You should be able to call the autosizeColumns() method of the grid object.
grid.autosizeColumns();
Make this simple adjustment to Naresh's https://github.com/naresh-n/slickgrid-column-data-autosize, on the init function:
Add $container.ready(resizeAllColumns); to the init function.
This ensures the columns autoresize on initial load
Insert the text into an off-screen element and retrieve the width of the element. This is what excanvas does to measure text. Use this to set the width of the column since it's expecting a pixel value.
I wonder how to define the line spacing in a multi-line lable or text item for pdf output. While increasing the line height within a style works fine, decreasing the height to reduce line spacing doesn't seem to work.
Any suggestions on how to reduce the line pitch?
Thanks
Try removing top and bottom padding. I don't know about labels and text items, and maybe it's not the same, but I had a similar problem in a table with 8pt font in the details. It would look fine in HTML, but in PDF the space between the lines would be huge.
A good trick is to set background colors on the item and the surrounding cell and whatever other elements you have and you'll be able to see which element steals the space.
Then tweak the paddings, line height and font size to reduce the extra space as much as possible. Use the 'Advanced' properties panel (or preferably stylesheets), as line height is not available in 'General' for some elements.
I managed to get my table looking great doing this if I removed ALL top and bottom padding (from row, cell and data element), used a row line height of 10pt and a font size of 8pt.
There seems to be a bug that causes the actual text inside the data element to be somehow padded at the top no matter what in PDF. If you color the data element background and then select the text in the report, you'll see that the text is set too low on the element, overflowing a little at the bottom. Thats the reason 8pt font and 8pt line height wouldn't work for me, it would cut off the bottom of the text.