Misbehaving Textscrollers

Community Beginner ,
Feb 28, 2022 Feb 28, 2022

Copy link to clipboard

Copied

Hello Team

I have 2 textbox scroller boxes that when tested locally function correctly (Please see Image 1)

When I publish to the Web the textbox scrollers appear on the top left of the screen very small (Plese see  Image 2).

The following is the code for generating the textscrollers:

 

// Create a DIV layer above the canvas

// Accepts ID, X, Y, width, height, HTML content, and CSS styling (optional)

// CSS styling is a CSS-formatted literal string

mkDiv = function(id, x, y, w, h, html, css) {

var d = document.createElement("div");

d.id = id;

d.style.cssText = "position:absolute; left:" + x + "px; top:" + y + "px; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");

d.innerHTML = html;

canvas.parentNode.appendChild(d);

}

mkDiv2 = function(id, x, y, w, h, html, css) {

var e = document.createElement("div");

e.id = id;

e.style.cssText = "position:absolute; left:" + x + "px; top:" + y + "px; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");

e.innerHTML = html;

canvas.parentNode.appendChild(e);

}

// Remove an element by ID name

rmDiv = function(id) {

try {

var elem = document.getElementById(id);

elem.parentNode.removeChild(elem);

}

catch(e) {}

}

mkDiv("mydiv", 10, 30, 125, 125, "<p>A 35-year-old man presents to the emergency department with severe back pain. He states he has been feeling badly for a few weeks. He has lost 15 pounds in that interval due to poor appetite. He has noted fever to 101 almost daily for the last 3 days for which he has taken acetaminophen, an antipyretic. He has also noted enlargement of his abdominal which has occurred over the last few days and increasing shortness of breath. He denies pleuritic symptoms. The back pain is localized to the lower back without sciatic radiation.</p><p><strong>Medical History:</strong> Unremarkable</p><p><strong>Family History:</strong> Parents are alive. Mother, 62, with type 2 diabetes on oral agents; father, 65, with hypertension and h/o MI.</p><p><strong>Medications:</strong> None except for over-the-counter (OTC) acetaminophen.</p> <p><strong>Allergies:</strong> No known drug allergies (NKDA)</p><p><strong>Social History:</strong> Lives with partner. Works as a graphic designer. No children. No recent travel.</p> <p><strong>ROS:</strong> No rash, no cough, no alteration of bowel habits, + lower back pain</p><p><strong>Physical Examination:</strong></p><p><strong>Vital signs:</strong> BP 110/62, pulse 110, temperature 102 °F , O2 saturation 98%</p><p><strong>General:</strong> ill appearing, in distress secondary to pain</p><p><strong>HEENT:</strong> No icterus, dry mucous membranes</p><p><strong>Neck:</strong> No adenopathy in the neck, axilla, or inguinal regions.</p><p><strong>Cardiovascular:</strong> Tachycardia, but no murmurs</p><p><strong>Pulmonary:</strong> Chest with diminished breath sounds at the bases, no rales, wheezes, or rhonchi, absent tactile fremitus</p><p><strong>Abdomen:</strong> Abdomen is distended with large easily palpable mass in the mid abdomen, not moveable.<p><p><strong>Extremities:</strong> Mild LE edema<p><p><strong>Back:</strong> Percussion tenderness over mid lumbar vertebrae</p><p><strong>Neuro:</strong> Normal strength and sensation. No sensory level</p>", "font-family:Arial; font-size: 4px; color:black");
mkDiv2("mydiv2", 149, 30, 125, 115, "<p><strong>Laboratory Tests/Radiology:</strong></p><p><strong>CBC:</strong> Hemoglobin 10 gm/dl, Hematocrit 30%, WBC 8000/mm3 with normal differential, platelets 550,000</p><p>Electrolytes WNL, creatinine 1.9, calcium 9.7, bilirubin 1.2, alkaline phosphatase 145, ALT 34, AST 42, LDH 2000.</p><p>Chest x-ray with bilateral effusions, no parenchymal infiltrates</p><p>Computerized tomography of chest abdomen pelvis demonstrates a large retroperitoneal mass which displaces intraabdominal structures to the periphery. Mild bilateral hydronephrosis. Lytic lesions of the lumbar vertebrae. Bilateral pleural effusions and small posterior mediastinal lymphadenopathy.</p><p>Prior to working with your small group to complete questions 1-2, work individually for a few minutes and write your thoughts on the provided index card. Pass your index card to your closest neighbor to kick off the small group discussion.</p><p>Small group: ~10-15 min</p><p>Large group answer discussion: ~10-15 min</p><p><strong>1. Develop a differential diagnosis.</strong></p><p><strong>2. What ancillary studies should be obtained?</strong></p> ", "font-family:Arial; font-size: 4px; color:black");

 

Any help os greatly appreciated

Views

76

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 08, 2022 Mar 08, 2022

Copy link to clipboard

Copied

neither textfield should appear normal with font-sizes of 4 px.  and having a relatively (to the text length) small width/height may not be what you want, either.

 

(and patient 1 has a serious problem and needs oncology and, most likely, surgical consults.)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 18, 2022 Mar 18, 2022

Copy link to clipboard

Copied

Hello Kglad

 

Thank you.

You have been supporting my learning efforts since Flash.

Glad to still see you around sharing your knowledge.

And so sorry for the "patient" 🙂

I will play with the font sizes.

 

Take care

 

Edwin

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 18, 2022 Mar 18, 2022

Copy link to clipboard

Copied

Increasing the font size makes the text mmore legible but I am concerned for different screen sizes and devices.

Even with size 12 it appears small and not properly located.

When you say "small width/height"" do you mean the textboxes themselves.

Would you know why it appears fine running it locally but totally different when I publish it to the Web? How could I make them remain withing the red box?  (please see attachement)

 

Regards

 

Edwin

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 18, 2022 Mar 18, 2022

Copy link to clipboard

Copied

the x, y, w, h of mkDiv determine the x,y of the textfield with width w and height h. 

 

the first textfield's params should be

 

x1 = this.redbox.x;

y1 = this.redbox.y;

w1 = anything reasonable less then this.redbox.width/2+margin

h1 = anything less than this.redbox.height

 

the 2nd should be

 

x2 =x1+w1 (from above)+margin

y2 = y1

w2 = w1

h2 = h1

 

font size is a design decision (which means no one knows what it should be, especially if you use the same web page for mobile and non-mobile devices.  generally, 16px corresponds to the standard 12 pt printed font so it's a good starting point.  here's more info, Best font size for websites: How to pick the right one for great UX (impactplus.com)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 18, 2022 Mar 18, 2022

Copy link to clipboard

Copied

Awesome KGlad. 

 

Thank you so much!

 

Edwin

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 18, 2022 Mar 18, 2022

Copy link to clipboard

Copied

LATEST

you're welcome.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines