How can I adjust the alignment of the text in a select menu in jQuery Mobile?

Exploring the world of jquery for the first time, I am excited about building a mobile web application. Utilizing jquery mobile (1.4.5), I encountered a simple issue - I couldn't figure out how to change the location of the text in the select menu. Despite trying various methods like adding a span with float:right or center styling, the desired outcome remained elusive.

Below is the snippet of my code:

<fieldset data-role="controlgroup" data-type="horizontal">                                          
                        <label for="select-custom-13">Select C</label>
                        <select style="text-align: right;" name="select-custom-13" id="select-custom-13" data-native-menu="false" class="filterable-select" data-icon="false">
                          <span style="float:right; text-align:right;">
                          <option>עיר</option>
                            <option value="#">באר שבע</option>
                            <option value="#">ת"א</option>
                            <option value="#">אילת</option>
                            </span>
                        </select>
                    </fieldset>

The current output appears as below:

My desired appearance is as follows:

As you can see, the text is now aligned to the right and the cursor in the search field is also on the right side.

Seeking advice on how to achieve this specific layout. Grateful in advance for any suggestions!

Answer №1

Consider setting dir="rtl" on the parent element for right-to-left direction.

<fieldset dir="rtl" data-role="controlgroup" data-type="horizontal">
                        <label for="select-custom-11">Select A</label>                      
                        <select name="select-custom-11" id="select-custom-11"  data-native-menu="false" data-icon="false">
                           <option>מועדון</option>
                            <option value="#">פורום</option>
                            <option value="#">אבסנט</option>
                            <option value="#">זיגי</option>
                        </select>

                        <label for="select-custom-12">Select B</label>
                        <select name="select-custom-12" id="select-custom-12" data-role="date" data-native-menu="false" data-icon="false">
                            <option>תאריך</option>              
                                <option value="1">יום ראשון</option>
                                <option value="2">יום שני</option>
                               <option value="3">יום שלישי</option>
                               <option value="4">יום רבעי</option>                             
                        </select>
                        <label for="select-custom-13">Select C</label>
                        <select style="text-align: right;" name="select-custom-13" id="select-custom-13" data-native-menu="false" class="filterable-select" data-icon="false">
                          <span style="float:right; text-align:right;">
                          <option>עיר</option>
                            <option value="#">באר שבע</option>
                            <option value="#">ת"א</option>
                            <option value="#">אילת</option>
                            </span>
                        </select>
                    </fieldset>

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

make changes to the current selection in the drop-down menu

Imagine I have a select list with 3 options: <select> <option>1</option> <option>2</option> <option>3</option> </select> My goal is to create a textfield and button that will allow me to upd ...

The functionality of `req.isAuthenticated()` is never true when using PassportJs with a combination of nodeJS and dynam

I am entering the world of web programming and tasked with creating an Instagram-like platform for my school. The frontend is built in ReactJS and now it's time to develop a server in nodeJS, utilizing passport for authentication and dynamoDb for data ...

Optimizing Performance by Managing Data Loading in JavaScript Frameworks

I am new to JavaScript frameworks like React and Vue, and I have a question about their performance. Do websites built with React or Vue load all data at once? For example, if I have a page with many pictures, are they loaded when the component is used or ...

Utilize Vue to localize the click events of buttons on the webpage

I have a scenario where I have several buttons on a page, and when I click one to toggle its text, all of the buttons change. How can I utilize VUE to isolate functionality and make each button's @click event only affect the clicked button? In the cod ...

Error in Javascript programming | tracking progress bar

After stumbling upon this code snippet at this link, I was eager to delve deeper into the world of JavaScript and jQuery. However, upon implementing these codes, I encountered a perplexing issue. The progress bar and continue buttons seem to be non-funct ...

What steps can I take to stop a browser from triggering a ContextMenu event when a user performs a prolonged touch

While touch events are supported by browsers and may trigger mouse events, in certain industrial settings, it is preferred to handle all touch events as click events. Is there a way to globally disable context menu events generated by the browser? Alternat ...

Is there a way to modify the Java class name to consist of two separate words?

(Edited) I am completely new to android app development. My question is: How can I rename a java class with two words instead of one? My main menu consists of 3 options, each linked to a java class: public class Menu extends ListActivity{ String cla ...

in Vue.js, extract the style of an element and apply it to a different element

Currently, I am using VUE.js 2 in my project. Here is my website's DOM structure: <aside :style="{height : height()}" class="col-sm-4 col-md-3 col-lg-3">...</aside> <main class="col-sm-8 col-md-9 col-lg-9" ref="userPanelMainContents" ...

Passing a date string from the Controller to JavaScript using the AJAX method

Below is the controller I have written: [HttpPost] public JsonResult GetTrackList(POS_model item) { //item.item_code //item.track_type if (item.track_type != "Regular") { POS pos = new POS(); ...

Alignment of Card Element at Bottom in Bootstrap 5

Hey there! I'm new to Bootstrap and I'm facing an issue where I want to position a button element at the bottom of a card, even when the body text is minimal. However, no matter what I try, the button does not end up in the bottom right corner as ...

Reduce multiple paragraphs in PHP to a more concise form

Is there a way to trim paragraph content to 100 characters, especially when dealing with multiple paragraphs? For example, consider the following HTML snippet: <div class="div-1"> <div class="section-1"> <p>"Lorem ipsum ...

Are the import and export keywords native to webpack or are they specific to JavaScript syntax?

I am pondering whether the import & export aspects are part of the language itself or simply keywords that webpack adds to the language. Thank you. ...

I am looking to transfer the value of one textbox to another textbox within a dynamic creation of textboxes using JavaScript

var room = 1; function add_fields() { room=$('#row_count').val()-1; room++; var objTo = document.getElementById('education_fields'); var divtest = document.createElement("div"); divtest.setAttribute("class", "form- ...

Show small information box when hovering over custom toggle button

I have developed a unique custom toggle switch feature When I hover my mouse over the switch, it should display a tooltip message as YES if the switch is in the ON position and NO if it's in the OFF position. Is there a way to implement this functio ...

Animated CSS sidemenu (utilized as a filtering panel for a table)

Hi there, I'm having some trouble with CSS Animation. I recently started developing websites and am using Bootstrap 4 along with Animate.css for animations. My goal is to have an icon button expand sideways to reveal a div containing select elements f ...

Choose all the HTML content that falls within two specific tags

Similar Question: jquery - How to select all content between two tags Let's say there is a sample HTML code as follows: <div> <span> <a>Link</a> </span> <p id="start">Foo</p> <!-- lots of random HTML ...

In the realm of JavaScript, the GET request exclusively functions in Internet Explorer

This particular request is specific to Internet Explorer. I've spent the last two days attempting various solutions to make it work, but unfortunately, I have not been successful. Any advice would be greatly appreciated. Pure JavaScript: var xm ...

Ensure that the jQuery datepicker is set with a maximum range of 365 days between the two input fields

Setting Up jQuery Datepicker Inputs I have implemented two jQuery datepicker inputs with default settings as shown below: $("#polis_date_from").datepicker({ uiLibrary: "bootstrap4", changeYear: true, changeMonth: true, dateFormat: "yy.mm.dd", ...

Encountering vuex error when attempting to send data to Django backend

Currently, I am facing an issue while attempting to transmit data from my Vue.js frontend to the backend using Vuex and Vue-axios. Despite establishing a Vuex store and Vue-axios services, I encounter an error that reads [vuex] unknown action type: addGene ...

What is the best way to add a hyperlink to my directory pictures?

Recently, I came across this piece of code: <? include "top.php"; ?> <center> <a href='upload.php'><button>Upload Image</button></a> </center> <br> <?php $www_root = 'http://annexsecurit ...