How to use Auto Height with Text Layers and Divs?« Back to Questions List

I generated template, but beacuase absolute position I cant auto height of divs when entering more text inside text areas.

I inluded psd and html, css files

What I should do to make working auto height text area with background - with actual possibilities of tool I cant get it.

Robert

Asked by omaticx
Added October 7, 2015 6:56 pm

This question has been resolved, view the correct answer now!

NEW TEMPLATE

New PSD Template now available for download: //exportkit.com/product/photoshop/dynamic-auto-height.

Answer by admin
Answered On May 13, 2016 7:25 pm #
Correct Answer

*IMPORTANT*: Photoshop and HTML are DIFFERENT! DO NOT TRY to force Photoshop to act like HTML – there is no such thing as “auto-height” in Photoshop, you MUST draw the size of your text area.

It may be faster if you take another approach. To do this is possible, but would take CSS adjustments to re-calculate your text + its parent container.

ACTUAL SOLUTION:

Dynamic Height: //exportkit.com/learn/how-to/export-your-psd/export-pages-with-dynamic-height – this measures the size of your *CONTAINERS* and will re-calculate your document size as required. This is only for *FOLDERS* not layers.

Like all other rules, this can bend and be used with layers but we advise caution as miss-use will result in display errors (advanced)

Dynamic (Auto-Height) Text

Something like this should work in the CSS, you can use Code Tag or add this as External CSS:

#your_div{
                display:table!important;
                height:inherit!important; /* or initital for webkit */
}
This should reset your height, and match the size of the container to the contents.

Note that your content *INSIDE* your container must use absolute position (top and left), and you must define a height for the content size. Again, this is where a Javascript output may work better for the “details” of your project – you can then cut-and-paste your JS based on your flags.

QUICK SOLUTION:

Think more on a template level. What you described are 2 distinct templates – (1) has minimal text, (2) has max text allowed. You can use our Page Tag and create multiple pages (or templates in your case) then use the one that is appropriate for your situation: //exportkit.com/learn/how-to/export-your-psd/export-multiple-pages-and-files.

*IMPORTANT:  Do not limit yourself to your solutions*

Try a JS approach:

Create a design for your “maximum text” then use JavaScript or jQuery to get the script render of your “maximum text” design. Add a quick flag in a using Code Tag to check if your characters are greater that XXXXX, if so paste your exported javascript CSS for your “maximum text”.

There are unlimited things you can do with Export Kit – you have to let us know your comfort level and experience and we can better guide you.
Answer by admin
Answered On October 7, 2015 6:56 pm #
Looking for another answer? View other questions in HTML CSS Text or get premium support for guaranteed results.
Asked by omaticx
2002 views
2 answers
Last Answered 9 years ago by admin

Categories

Recent Answers

asked by rihabbenhmida
asked by zaineb khiari
asked by nmax
asked by shanrt
[+] View All Recent Questions

Share Your Knowledge!

Contribute to the community and help other users to benefit from your answer with experience and knowledge.