Question

My code:

<a data-theme="my-site" data-role="button" onClick="checkReachability()">Online Map</a> 

And when I start an application I got only the button “Map” instead of “Online Map”. I find it very strange. Just to mention that I’m jQuery Mobile beginner.

Application runs on Android phone.

The CSS:

.ui-btn-up-my-site { 
    color: white !important;
    text-overflow: initial;
    font-size:15px !important;       
    border: 1px solid #333;
    padding-top:0 !important;
    margin-top:-25px !important;
    width:100px !important; 
    white-space: normal !important;             
}

Answer 1

You’ve set the font-size and width such that “Online Maps” doesn’t fit on your button

font-size:15px !important;
width:100px !important;

You can either make your font smaller or make your button bigger. You can also make your button width depending on the width of the text using the following

display:inline-block;
# width: 100px !important; Comment out or delete this line.

See it in action – fiddle

As an aside, you should try to avoid using !important. Use CSS specificity and ordering to ensure the right styles are applied to the right elements instead.