AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of Arnold Layne
Arnold Layne
Flag for United States of America asked on

Can't control font sizes

I have a web (browser based) app that I am building for mobile phones. I use jquery ajax to insert results into the page that it gets back from making a get request to a server side page. Everything works great except font sizes. The only font size I specified is in the body tag, and all elements are supposed to inherit this size. They do, except for the dynamic results that jquery inserts. These seem to come back twice the size they should. There is no font-size specification in the html that the jquery is receiving back and loading in the page. So why is this happening?

regular static html page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="driver.aspx.cs" Inherits="driver" %>
<!DOCTYPE html>
<html>
<head runat ="server">
    <title></title>
    <meta name="mobile-web-app-capable" content="yes">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
    <link rel="stylesheet" href="stylesTest.css"/>
</head>
<body>
    <div id="mapContainer">
        <div id="backButton" class="blue borderRad" onclick="hideMap();">LIST</div>
        <div id="map_canvas"></div>
    </div>
    <form runat="server" style="margin:0;padding:0">
    <div style="margin:25px 0 10px 0; text-align:right">
        <asp:Label ID="FullName" runat="server" Text=""/>&nbsp;&nbsp;<asp:Label ID="CompanyName" runat="server" Text=""/>&nbsp;&nbsp;<asp:Button 
            ID="Signout" runat="server" Text="Sign Out" OnClick="Signout_Click" />
    </div>
    <section id="controlsTop">
        <div id="addButton" onclick="addOrderForm();">ADD</div>
        <div id="planButton">PLAN</div>
        <div id="map" onclick="showMap();">MAP</div>
        <div id="settingsButton" onclick="showSettings();">SET</div>
    </section>
    <div id="allData">
        <div id="newOrder">
            <div>PHONE</div>
            <div><input id="phone" type="text" /></div> 
            <div>ADDRESS</div>
            <div><input id="address" type="text" style="width:100%"  list="addresses" onkeyup="getGoogleAddressesNew();" onfocus="getAddressesNew();" />
                <datalist id="addresses"></datalist>
            </div>
            <div>AMOUNT</div>
            <div><input id="amount" type="text" /></div>
            <div><input id="addNew" type="button" value="Add" class="button" style="margin-top:5px" onclick="addItem(); hideNewOrder();" /><input id="addCancel" type="button" value="Cancel" class="button" style="margin-top:5px" onclick="hideNewOrder();" /></div>
        </div>
        <div id="settings">
            <div><b>Dispatch Number</b></div>
            <div style="margin-bottom:15px"><input id="dispatchNum" type="text" /></div>
            <div><b>Default Area Code</b></div>
            <div style="margin-bottom:15px"><input id="areaCode" type="text" /></div>
            <div><b>Planning Options</b></div>
            <div style="margin-bottom:15px"><input id="leastMiles" type="radio" style="margin:5px 5px" />Least Miles<input id="fastestRoute" type="radio" style="margin:5px 5px" />Fastest Time</div>
            <div><input id="vg" type="checkbox" />Voice Guidance</div>
            <div style="margin-bottom:15px"><input id="ds" type="checkbox" />Dispatch Speaker</div>
            <div><b>Alert Customer</b></div>
            <div><input id="wrs" type="checkbox" />When Route Started</div>
            <div><input id="next" type="checkbox" />When Next</div>
            <div style="margin-top:10px"><input id="saveStettings" type="button" value="Save" class="button" style="margin-top:5px" onclick="hideSettings();" /><input id="editCancel" type="button" value="Cancel" class="button" style="margin-top:5px" onclick="hideSettings();" /></div>
        </div>
        <div id="orders"></div>
    </div>
    <section id="controlsBottom">
        <div id="start" onclick="startRoute()">START</div>
        <div id="clearButton"onclick="done();">DONE</div>
        <div id="dispatch">DISPATCH</div>
    </section>
    </form>
    <script type="text/javascript" src="map1.js"></script>
    <script type="text/javascript" src="JavaScript.js"></script>
</body>
</html>

Open in new window


This is the jquery that dynamically loads the get response into the document
$(document).ready(function () {
    $("#orders").load("data.aspx");
});

Open in new window


This is the C# code behind file for data.aspx in the load method above that outputs html to be loaded into the requesting page
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Web.Security;
using System.Runtime.InteropServices;
using System.Security.Principal;

public partial class data : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        /*string referencepage = HttpContext.Current.Request.UrlReferrer.AbsolutePath.ToString();
        if (referencepage == "/login.aspx")
        {
            Response.Redirect("/driver.aspx");
        }*/
        
        string userID = Session["userID"].ToString();
        string companyID = Session["companyID"].ToString();
        if ((userID != "" && userID != null) && (companyID != "" && companyID != null))   
        {
            string started = Request["started"];
            SqlConnection myConnection = new SqlConnection("server=localhost;" +
                                               "Trusted_Connection=yes;" +
                                               "database=mydb; " +
                                               "connection timeout=30");
            String bg = "blue";
            try
            {
                myConnection.Open();
                SqlDataReader myReader = null;
                SqlCommand temp = new SqlCommand("Select ID, PhoneNumber, Address, DollarAmt, Problem, Next FROM Temp Where Delivered IS NULL AND Deleted IS NULL AND CreatedBy = " + userID, myConnection);
                myReader = temp.ExecuteReader();
                /*if (started == "true")
                {
                    SqlCommand orders = new SqlCommand("Select ID, PhoneNumber, Address, DollarAmt, Problem FROM Orders Where Delivered IS NULL", myConnection);
                    myReader = orders.ExecuteReader();
                }*/
                while (myReader.Read())
                {
                    String ID = myReader["ID"].ToString();
                    String problem = myReader["Problem"].ToString();
                    if (problem != null && problem != "")
                    {
                        bg = "red";
                    }
                    else if (myReader["Next"] != DBNull.Value)
                    {
                        bg = "green";
                    }
                    else
                    {
                        bg = "blue";
                    }
                    Response.Write("<div id='section" + ID + "' class='sectionMargin'>");
                    Response.Write("<ul id='item" + ID + "' class='" + bg + "' onclick='showOptions(\"buttons" + ID + "\");'>");
                    Response.Write("<li>" + myReader["PhoneNumber"].ToString() + "</li>");
                    Response.Write("<li>" + myReader["Address"].ToString() + "</li>");
                    Response.Write("<li>" + myReader["DollarAmt"].ToString() + "</li>");
                    Response.Write("</ul>");
                    Response.Write("<section id='buttons" + ID + "' style='display:none'>");
                    if (myReader["Next"] != DBNull.Value)
                    {
                        Response.Write("<div id='delivered" + ID + "' class='buttons green' onclick='delivered(\"" + ID + "\");'>DELIVERED</div>");
                    }
                    else
                    {
                        Response.Write("<div id='next" + ID + "' class='buttons green' onclick='nextStop(\"" + ID + "\");'>NEXT</div>");
                    }
                    Response.Write("<div id='edit" + ID + "' class='buttons orange' onclick='showEditForm(\"editForm" + ID + "\");'>EDIT</div>");
                    Response.Write("<div id='problem" + ID + "' class='buttons red' onclick='problem(\"" + ID + "\");'>PROBLEM</div>");
                    Response.Write("<div id='delete" + ID + "' class='buttons red' onclick='deleteItem(\"" + ID + "\");'>DELETE</div>");
                    Response.Write("</section>");
                    Response.Write("<div id='editForm" + ID + "' class='orange noDisplay pad20 borderRad'>");
                    Response.Write("<div>PHONE</div>");
                    Response.Write("<div><input id='phone" + ID + "' type='text' value='" + myReader["PhoneNumber"].ToString() + "' /></div>");
                    Response.Write("<div>ADDRESS</div>");
                    Response.Write("<div><input id='address" + ID + "' style='width:100%' type='text' list='editaddresses" + ID + "' onkeyup='getGoogleAddresses(\"" + ID + "\");' onfocus='getAddresses(\"" + ID + "\");' value='" + myReader["Address"].ToString() + "' />");
                    Response.Write("<datalist id='addresses" + ID + "'></datalist>");
                    Response.Write("</div>");
                    Response.Write("<div>AMOUNT</div>");
                    Response.Write("<div><input id='amount" + ID + "' type='text' value='" + myReader["DollarAmt"].ToString() + "' /></div>");
                    Response.Write("<div><input id='addEdit" + ID + "' type='button' value='SAVE' class='button' style='margin-top:5px' onclick='editItem(\"" + ID + "\");hideEditForm(\"editForm" + ID + "\");' /><input id='editCancel" + ID + "' type='button' value='CANCEL' class='button' style='margin-top:5px' onclick='hideEditForm(\"editForm" + ID + "\");' /></div></div></div>");
                }
                myConnection.Close();
            }
            catch (Exception error)
            {
                Response.Write("<p>" + error + "</p>");
                myConnection.Close();
            }
        }    
    }
}

Open in new window


This is the style sheet
html {height:100%}

body {
    background-color:rgb(0,0,0);
    margin:0 auto;
    padding:10px;
    font-family: arial, helvetica,sans-serif;
    color: rgb(255,255,255);
    width:100%;
    overflow-y: scroll;
    border-radius: 8px;
    font-size:36px;
    text-transform: uppercase;
    height:100%;
    position:relative;
}



div {border-radius: 8px;}
ul {border-radius: 8px;}

datalist {
}

input {
    margin:0 10px 10px 0;
    border:0;
    border-radius: 4px;
}


section {
    display:-webkit-flex;
    display:flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

#addresses option {
}

#backButton {
    margin:0 auto;
    position:absolute;
    top:20px;
    left:225px;
    width:50px;
    z-index:100;
    padding:3px;
    cursor:pointer;
    text-align:center;
    border:solid 1px #000;
}

#controlsBottom {
    margin-top:15px;
}

#controlsBottom div {
    width: 28%;
    text-align:center;
    border:0;
    padding:10px 0;
    font-weight:bold;
}

#controlsBottom div:hover {
    cursor:pointer;
}

#controlsTop div {
    width: 24%;
    text-align:center;
    border:0;
    padding:10px 0;    
    font-weight:bold;
}

#controlsTop div:hover {
    cursor:pointer;
}

#addButton {
    background-color:green;
}

#planButton {
    background-color:rgb(0,148,255);
}

#clearButton {
    background-color:rgb(255,255,255);
    color:rgb(0,0,0);
}
 
#settingsButton {
    background-color:rgb(255,106,0);
}

#map_canvas{
    width:100%;
    height:100%;
}

#mapContainer{
    position:absolute;
    width:100%;
    height:100%;
    left: -2000px;
}

#dispatcherMap {
    width:100%;
    height:100%;
    position:relative;
}

#fitButton{
    position: absolute;
    top: 20px;
    left: 50%;
    padding: 20px;
    z-index: 200;
}


#newOrder {
    background-color:green;
    padding:20px;
    margin-top:10px;
    display:none;
    height:100%;
}

#newOrder div {
}

#settings {
    background-color:rgb(255,106,0);
    padding:5px 10px;    
    margin-top:10px;
    display:none;
}

#start {
    background-color:green;
}

#map {
    background-color:rgb(255,219,183);
    color:rgb(0,0,0);
}

#dispatch {
    background-color:red;
}

#orders {
    margin:30px 0;
}

#orders ul li {
    padding:0 2%;
    margin:0 0 10px 0;
    list-style-type:none;
    cursor:pointer;
}

#tables {

}

.blue {
    background-color:rgb(0,148,255);
}

.font1em {
    font-size:1em;
}
.borderRad {
  border-radius: 8px;  
}

.buttons {
    width:22%;
    text-align:center;
    border:0;
    padding:5px 0;
    font-weight:bold;
    background-color:#CCC;
    margin-bottom:25px;
    cursor:pointer;
}

.buttons:hover{cursor:pointer}

.collapsed {
    display:none;
}

.disabled {
    background-color:rgb(128, 128, 128);
}

.green {
    background-color:green;
}

.red {
    background-color:red;
}

.noDisplay {display:none}

.orange {
    background-color:rgb(255,106,0);
}

.pad20{padding:20px}

.phone {
}

.sectionMargin {
    margin-bottom:30px;
}

Open in new window

CSSJavaScriptASP.NET
Avatar of undefined
Last Comment
Arnold Layne
8/22/2022 - Mon
skij
Try adding this CSS:
#orders, #orders * {
 font-size:18px;
}

Open in new window

If the font size is still to big or too small, change 18px to something larger or smaller.
Arnold Layne
ASKER
Hi skij, thanks for the idea. Unfortunately, it still doesn't work. I have even tried using inline style sheet attributes for each line item it outputs, and it just ignores it. I also made all section elements to be flex boxes. Would that cause this weird behavior? The unordered lists are not supposed to be children of any section but rather a sibling.
Arnold Layne
ASKER
For further clarification, my body is set to 36px for font size. I also have no other font-size specs on the style sheet except for this
#orders ul li {
    padding:0 2%;
    margin:0 0 10px 0;
    list-style-type:none;
    cursor:pointer;
    font-size:17px;
}
 And I no longer have any inline styles in the static or dynamic content. So this is the only font specs that I have. When I set #orders ul li to anything under 18px, it works correctly. When I go from 17 to 18, it doubles in size and looks like it's about 36px, which is the body font size and the only other place the font size is specified. If I try .4em, it works correctly. As soon as I go to .5em, it doubles in size. So there is something about being half of 36 whether that is specified in pixels or ems, that causes it to be 36.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
skij
What about this?
#orders ul li {
    padding:0 2%;
    margin:0 0 10px 0;
    list-style-type:none;
    cursor:pointer;
    font-size:10px !important;
}

Open in new window

Arnold Layne
ASKER
Same thing. If I make the value 17px, it works. If I make it 18px, it looks like it is displaying at 48px. I cannot find anywhere in my code where 48px is specified. This is the weirdest thing I have ever seen. How can a px value work correctly, and then, when you increase it by 1px, it doubles in size or more? Seems impossible to me, but apparently it's not.
Bernard Savonet
Is there in jquery something that increases font-size (ie 150% for some text enhancement)?
Can you look at the generated code to check what happens exactly?
Does this happens in other bowsers?

Is there any hidden media-query?
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
ASKER CERTIFIED SOLUTION
Arnold Layne
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Bernard Savonet
Wow!
B-) Thx for the answer!
Arnold Layne
ASKER
Nobody else had the right answer, I found it myself.
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent