Reputation: 123
I have unlimited length of text, and a fixed height container with no vertical scrollbar option, basically the text overflow the container, but it is hidden.
The requirement is to wrap this text to same height columns like the parent container, container has the option to have horizontal scrollbar.
Al this need to work in responsive layout - what means the text parent container height will be less, and all text columns will be restructured.
E.g. if the current text columns was initial 3 column on smaller devices can go to 4, or 5 column.
I searched Google, but haven't found any possible solution.
Any solution, or guide will be big help - at least to know in which direction to start
Initial has the height auto - click button to set the height/ after the height is set need to wrap the text and set in columns to not exced vertical height, instead will be horizontal aligned columns.
ADD CODE HERE
Upvotes: 1
Views: 126
Reputation: 123
Found an jquery plugin for - http://welcome.totheinter.net/columnizer-jquery-plugin/ . This one solve all what i need.
Upvotes: 0
Reputation: 865
You can wrap your data in another div inside the opendoc and increase its width.
<div class="opendoc"> // width fixed Change Height
<div class="resizablediv"> // Change the width
{{Your data}}
</div>
</div>
Upvotes: 1
Reputation: 172
I have an idea, but not really perfect. Such problems always need a lots of try/fail tests…
You need to have two nested elements:
<div class="opendoc">
<div class="opendoc-inside">
[Content]
</div>
</div>
.opendoc will receive a fixed height. .opendoc-inside will have columns and fixed width;
depending of your device width, you choose a number of columns, I choos 2 for the exemple;
Now with javascript:
This solution generate a reflow on each test. this could become very slow. You need to avoid to launch this operation on each resize event…
Upvotes: 0