Link to home
Create AccountLog in
Avatar of Arnold Layne
Arnold LayneFlag 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

Avatar of skij
skij
Flag of Canada image

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.
Avatar of 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.
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.
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

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.
Avatar of 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?
ASKER CERTIFIED SOLUTION
Avatar of Arnold Layne
Arnold Layne
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Wow!
B-) Thx for the answer!
Nobody else had the right answer, I found it myself.