How to adjust the size of the text on a button in jQuery mobile using custom

I am facing an issue with my jQuery mobile buttons that are placed inside a fieldset. Specifically, I need to adjust the font-size of one of the buttons. Despite attempting to add an inline style, it did not have the desired effect.

Furthermore, I tried using the following CSS code without success:

.myButton
{
   word-wrap: break-word !important;
   white-space: normal !important;
}

The problem arises on iPhones due to the screen size, causing the "Request Change" button text to be cut off.

Is there a solution that will allow me to modify the font-size of the button text to prevent it from being truncated?


HTML:

<fieldset class="ui-grid-a">
    <div class="ui-block-a">
        <input data-mini="true" type="submit" value="Cancel"  name="Submitbutton" class="button button-link"/>
    </div>
    <div class="ui-block-b">
        <input data-mini="true" data-theme="b" type="submit" value="Request Change" name="Submitbutton" class="button button-link" /> 
    </div>
</fieldset>

I have explored the following resources but have yet to find a suitable solution:

  • jquery mobile button text auto line break
  • Change font size of a jQuery Mobile button at runtime
javascriptjquerycssmobilejquery-mobile

Answer №1

Experiment with the following adjustments to optimize display on the iPhone screen

​

.ui-btn-inner{
    text-overflow: initial; /* Remove ellipsis from text */
    padding-left: 5px; /* Adjust padding for optimal button width usage */
}
.ui-btn-text {
    font-size: 15px; /* Try different font sizes for improved readability */
}

Answer №2

Here is a demonstration:

Javascript Code:

// To set width for all buttons
$('.ui-btn').css('width','50%');

// Modify width for individual buttons
$('#theButton1').parent().css('width', '75%');

// Adjust width for HREF data-role buttons
$('#hrefButton4').css('width', '45%');

// Change font-size for all button texts
$('.ui-btn-text').css('font-size','50px');

// Update font-size for specific element 
$('#hrefButton3').children().children().css('font-size','30px');

If you want to change the font size like this:

$('#hrefButton3').children().children().css('font-size','10px');

HTML Structure:

<div data-role="page" id="home"> 
    <div data-role="content">
        <input type="button" id="theButton1" value="Press Me 1" />
        <input type="button" id="theButton2" value="Press Me 2" />
        <input type="button" id="theButton3" value="Press Me 3" />
        <input type="button" id="theButton4" value="Press Me 4" />
        <br />
        <a href="#" data-role="button" id="hrefButton1">HREF Me 1</a>
        <a href="#" data-role="button" id="hrefButton2">HREF Me 2</a>
        <a href="#" data-role="button" id="hrefButton3">HREF Me 3</a>
        <a href="#" data-role="button" id="hrefButton4">HREF Me 4</a>
    </div>
</div>

Related Information:

  • Guide on resizing a BUTTON through CSS

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JavaScript to Filter JSON Objects

After making a php ajax call, I have received the following JSON data that needs to be displayed to the users: JSON {"headers":{},"body":"{\"comuni\":[{\"datapresub\":\"08\/08 ...

javascriptjqueryjson

What is the best way to access a document that has the lang attribute set to "en" using JavaScript?

I am working on implementing conditional styling in JavaScript by referencing this line of code located before the opening <head> and <body> tags: <html class="js" lang="en"> I want to set a condition so that if the l ...

javascripthtmlshopify

Fetching JSON data with Ajax is successful, but the information is not being displayed

I am struggling to showcase Json data from a URL in a table using ajax. The aim is for the code to iterate through the data and present it neatly in a table. <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/a ...

jqueryjsonajax

Error encountered in Pokemon API: Trying to access property '0' of undefined

My current challenge involves accessing the abilities of my Pokemon, but I keep encountering a recurring error. In my project development using React hooks, I fetched data from the Pokemon API and stored it in setWildPokemon. Utilizing wildPokemon.name suc ...

javascriptjsonajaxreactjs

Deleting an object with javascript in django: A step-by-step guide

Is there a way to use JavaScript to create a confirmation window before deleting an item? <div class="card-footer"> <a href="{% url 'course_delete' student.slug %}"><button>Delete</button>&l ...

javascripthtmldjangoajax

What are some methods to secure my API keys within my React application?

What steps can I take to secure my api keys in my react application? Should I incorporate something with express? My goal is to avoid creating any server-side components to handle the API calls. Currently, my backend is managed by firebase but I also uti ...

javascriptnode.jsapireactjssecurity

Utilize JavaScript to apply the CSS -moz-transition

Creating a web application and using CSS3 to transform a div, but encountering a challenge with Firefox. Able to make Chrome, Opera, and IE work properly, except for Firefox. Here's how I'm setting up the working browsers: obj.style.WebkitTrans ...

javascriptcssfirefoxstyles

Populate vue-multiselect with links from the router

Is there a way to populate the vue-multiselect dropdown with <router-link> options? Typically, router links are defined declaratively in the <template>, but vue-multiselect relies on binding an array of options. Any suggestions on how to approa ...

javascriptvue.jsvuejs2vue-routervue-multiselect

[server-auth]: The `useSession` function is required to be enclosed within a <SessionProvider /> component to avoid the error occurring in the current JavaScript file

While trying to validate authentication by following the next-auth documentation, I encountered an error stating "[next-auth]: useSession must be wrapped in a SessionProvider". I am using GitHub credentials for the validations. Here is my code: Currently ...

javascriptreactjsnext.jsnext-auth

Struggling to maintain data consistency among controllers in Angular by utilizing the rootScope, only to encounter persistent issues with

I am facing an issue with displaying the admin status at the top of all pages for a user who successfully logs in as an admin. Here is my code snippet: <!-- nav bar --> <div> <span ng-show="$root.isAdmin">(ADMIN)</span> </di ...

javascriptangularjsangularjs-scopeangularjs-serviceangularjs-routing

Ways to get a Discord bot to echo a message?

As a novice in the world of discord.js and bot creation, I am eager to implement a simple magic 8-ball inspired command. This command will allow users to ask the bot a question and receive a random answer in response. const commands = [ new SlashCommandBui ...

javascriptnode.jsdiscorddiscord.jsbots

Struggling to dynamically update array values by comparing two arrays

I am faced with a scenario where I have two arrays within an Angular framework. One of the arrays is a regular array named A, containing values such as ['Stock_Number', 'Model', 'Type', 'Bill_Number'] The other arr ...

javascriptangulartypescript

The function you are trying to use is not a valid jQuery function

Although I've come across this issue in previous posts, none of the solutions worked for me and it's really frustrating. I'm a newbie to javascript and I'm sure the answer is probably simple. I'm attempting to incorporate the rapt ...

javascriptjqueryhtmlfunction

Exclude crypto-browserify from the NextJS build process

I have been dedicated to minimizing the build size of my app as much as possible, and I have observed that the crypto-browserify module is consuming a significant amount of space. While I understand that Next.js polyfills the node module if necessary, I wo ...

javascriptwebpacknext.js

The elements with identical IDs are being superimposed

There are two div elements on my webpage, both assigned the "nav" class. Below is the CSS code: .nav { border-radius: 1em; background-color: #0000BB; color: white; padding: 1em; position: absolute;//Fits size to content. margin: 1em; left: 50%; ...

htmlcssposition

Refresh TR when clicked

I have a HTML table that lists items from SQL, using <tr> and <td>. The table is housed within a div that is refreshed every 30 seconds with jQuery AJAX (hence the unique id on the div). Here is the HTML code: function auto_load() { $.aj ...

javascriptphpjqueryajaxtwitter-bootstrap

Can I modify individual properties of xAxis.labels in HighCharts?

I am seeking to customize the properties of my labels on the x-axis in a unique way (View my query here). I have a clear understanding of how to achieve this for dataLabels: See API reference. This process is akin to what has been explained here. Howeve ...

javascriptjqueryhighcharts

Looking to crop a canvas without changing its dimensions using jQuery

I'm currently working on a project that involves overlaying two images; one uploaded by the user and the other a default image. However, I am facing an issue when the uploaded image is a rectangle instead of a square, causing the canvas to resize it. ...

javascripthtmljquerycanvasoverlay

Issue encountered when attempting to update a specific element within an array using Mongoose

Looking to update a specific object within an array. { "_id": "543e2f8e769ac100008777d0", "createdDate": "2014-10-15 01:25 am", "cancle": false, "eventDateAndTime": "2014-02-12 12:55 am", "eventstatus": true, "userPhone": "44444444 ...

javascriptnode.jsmongodbmongoose

Javascript animation functioning for a singular item within a list

As I continue practicing my skills in Javascript and HTML, I stumbled upon this intriguing list known as "item/adapter", similar to what we refer to as adapters in Android. While the process of adding them programmatically to my div is working smoothly, I& ...

javascriptjqueryhtmlajax