How to set div text height in percent

I created a Fiddle script: FiddleScript

I’m trying to position the ‘1000’ text vertically within it’s div as a percentage of the vertical height. I’m doing this because I want to display the values higher or lower in the div, depending on it’s value.

So I may want to display the value 20% from the top one time, 40% another time, etc.

But I can’t figure out how to control the vertical position as a percentage.

Thank you…

You can’t really base a percentage height on something unless the parent has a height other than auto. If the parent has a percentage height them there needs to be an unbroken chain of percentage heights back to :root.

You could absolutely place the text in relation to the parent that has position:relative but it will be awkward taking into account padding and other variables to get them to line up. Of course using absolute positioning on the second cell content causes the cell to shrink to zero because the absolute element is removed from the flow and you would have to give the cell a width to hold the content open…

As I don’t know the full scope of your layout I would first suggest that you try something simpler using a transform to move the element in relation to itself. To move it down to the next line would be 100% and then 200% and so on.

Here is a quick example.

Note that I put your numbers in a list so that they make semantic sense and wrap to a new line automatically. You had simply given the column a ‘magic number’ width and force the items to wrap. That approach is bad and prone to failure especially if a user resizes their text.

As I said above it may be that your layout requires something different to the above if you are trying to do it automatically in some way or perhaps dynamically.

Also try and use the correct html elements for the job in hand and I’m guessing that this isn’t really tabular data and a table would not be the correct choice unless you have a correlation that makes sense between cells. Indeed for this to be tabular data I guess you would need 10 rows and then you could simply drop the right hand text into the correct cell as required and get your correlation between cells.

Anyway I hope the above is of some use.

Thank you Paul for that effort. I might be able to change my number list to li structure. The reason I made a ‘list’ using labels is because on iOS they have no dropdown lists that stay open. I wanted a list that would stay open so the user could just touch the value they want and not have to touch to open the list each time. I’m sure I can get the li version to behave the way I need.

In regards to the vertical positioning, I was avoiding using CSS because I need to insert a variable to control the vertical position of that value (‘1000’ in this simple example). I only have one table but can appreciate seeing how different values work with your multiple tables. They do work!

Recall my goal was to display my value lower in the div when the values were ‘smaller’ and higher in the div when the values were higher, thus the need to have a variable to determine the placement.

So I think I can get my code to work using li’s now but am not sure how to insert a variable to control the height position?

Thank you…

In your example you were attempting to use css to move the text so I don’t quite understand when you say you don’t want to use css as such.

How are you going to move the item if you don’t use css to move it:?

If you meant you want inline css then you can do the same with my example if you are adding inline css dynamically.

I may be misunderstanding what you are attempting to do but you should be able to convert my example and just dynamically add the transform value into an inline rule.

Back tomorrow now :slight_smile:

Ahhh yes, I think I can make it all work now.

Much thanks Paul for your help.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.