ID:2417116
 
Code:
/datum/category_item/player_setup_item/occupation/proc/create_job_description(var/mob/user)
if(!job_info_selected_rank)
return

job_desc = "<div class = 'statusDisplay' style = 'min-height:250px; max-height:250px; height:250px;>"

var/datum/job/job = SSjob.GetJob(job_info_selected_rank)
job_desc = ""


job_desc += "<table style='float:left; height = 250px; table-layout: fixed;' cellpadding='0' cellspacing='0'><tr><td>"
job_desc += "<p style='margin-top:0px; background-color: [job.selection_color]'><br><p></td></tr>"



job_desc += "<tr><td>"
//The mannequin and its burrons are in their own little mini table

var/mob/living/carbon/human/dummy/mannequin/mannequin = job.get_job_mannequin()
var/icon/job_icon = getFlatIcon(mannequin, job_icon_dir)
job_icon.Scale(job_icon.Width() * 2, job_icon.Height() * 2)
send_rsc(user, job_icon, "job_icon_[job_icon_dir].png")
job_desc += "<table style='float:left; height = 250px; table-layout: fixed;' cellpadding='0' cellspacing='0'><tr><td><img src=job_icon_[job_icon_dir].png width=200 height=200 style='float:left;'></td></tr>"
job_desc += "<tr><td><center><a href='?src=\ref[src];rotate=right'>&lt;&lt;</a> <a href='?src=\ref[src];rotate=left'>&gt;&gt;</a></center></td></tr></table>"

job_desc += "</td><td>"


if(job.alt_titles)
job_desc += "<i><b>Alternative titles:</b> [english_list(job.alt_titles)].</i>"
if(job.department)
job_desc += "<b>Department:</b> [job.department]."
if(job.head_position)
job_desc += "You are in charge of this department."
job_desc += "<br>"
job_desc += "You answer to <b>[job.supervisors]</b> normally."

job_desc += "<hr>"


Problem description:
Hello all, I'm trying to implement a description feature for jobs in our SS13 server, but i can't get the layout of the content to look right. The above proc contains all the code we're using, the entire contents of the job_desc var are inserted,unaltered, to make the description window



Here is how its supposed to look. This is a mockup i made in photoshop
https://i.imgur.com/GS7SzIJ.png

And here is how it actually looks ingame with my code, this is not what i want
https://i.imgur.com/kCtF6Yr.png

The notable differences here:
1. The whole upper area should be a completely fixed height, with a scrollbar appearing when there's too much text. I don't understand why it's expanding to fit the text, since i've set a 250 pixel height on everything

2. The colored horizontal strip should span the entire area, not just hug one corner. The area it's actually taking up is the same width of the image table

3. The image and arrow buttons should be anchored to the topleft left side, they should not move when the scrollbar is used, nor float around anywhere

So let me explain what the code is (supposed to be) doing and hopefully you guys can explain why its not working as intended

First up, it creates a 250 pixel high div. All my research indicates that setting the height parameter like that should guarantee a fixed size. 250px is the desired height for this whole area

It grabs a job datum to draw data from, not much important there except for a function

Within this main div, a table is created. The idea is to have one long horizontal cell for the colored stripe, and then divide the next row into two cells - one for the image and buttons, then one for the text. So thats done

Then the image and buttons get their own, second, nested table within a cell of the previous table. That part, at least is mostly working. The image displays correctly and so do the buttons.

To the right of that, another TD is created and that's the main text area. most of the text you can see there

Some of the text is generated by calling job.get_description_blurb, that function just creates another div and inserts a bunch of text into it. Sourcecode of it here

This div uses a height of 100% since, i'm hoping, it should inherit the 250px limit from the elements that contain it. But maybe it doesn't


/datum/job/proc/get_description_blurb()
var/job_desc = "<div style = 'overflow: scroll; width: 100%; height: 100%'>"
//Here's the actual content of the description
job_desc += description
job_desc += "<br>"

if (duties)
job_desc += "<h1>Duties:</h1>"
job_desc += "<hr>"
job_desc += duties
job_desc += "<br>"

if (loyalties)
job_desc += "<h1>Loyalties:</h1>"
job_desc += "<hr>"
job_desc += loyalties
job_desc += "<br>"

job_desc += "</div>"
return job_desc
One pro tip is that if you're not including a meta tag in your HTML to force the embedded browser to use the newest IE possible, you should.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Even then however you should be aware that a height of 100% doesn't always mean what it really ought to mean in CSS. Div height is a tricky beast.