Having trouble positioning grouped buttons in jQuery Mobile?

In the controlgroup container, I have included the data-type="horizontal" attribute. This container contains a select menu and a plus icon, giving the user the option to select an existing category or add a new one. I am looking to position the "+" icon in the top right corner, with the select box occupying the remaining space. Below is the code:

<div data-role="controlgroup" data-type="horizontal">
    <select name="select-choice-1" id="select-choice-1">
        <option value="Select Category">Select Category</option>
    </select>
    <a href="" data-role="button" data-icon="plus" data-iconpos="notext">Add</a>
</div>

Attached is a screenshot of how the above code currently appears. Is there a way to ensure that the "+" symbol is fixed in the top right margin at its default icon size?

jquerycssjquery-uijquery-mobile

Answer №1

To achieve this, you can utilize absolute positioning in your CSS:

.ui-controlgroup-controls {
    width: 100%;
    margin-bottom: 42px;
}
.ui-controlgroup-controls .ui-select{
    position: absolute;
    left: 15px;
    right: 73px;
}
.ui-controlgroup-controls a.ui-btn{
    position: absolute;
    right: 15px; left: auto;   
}

Check out the DEMO here!

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

Experiencing difficulty with loading elements into their respective containers

My goal is to limit the number of alert elements loaded in each .content container to a maximum of 9, but currently I am grouping every 10 items together and discarding any remaining items! For instance, if a random value is 8, then no content will be dis ...

javascriptjquery

Find the closest multiple of 3 for the given number

In our coding project, we have encountered a scenario where the input must be divisible by 3. For instance, if someone enters the number 9, everything works perfectly as expected. However, when a user inputs the number 7, the program returns the result wit ...

javascriptjqueryhtml

Tips for updating the content of multiple tabs in a container with just one tab in Bootstrap 4.x

I am attempting to create two tab containers, where one is used to describe the content of a set of files and the other is used as a list of download links for the described files. Initially, I tried controlling the two containers using just one tab. I ca ...

javascriptjquerytwitter-bootstrapbootstrap-4

Table with expanded width, cut off cell content

As I work on building an HTML table, I've encountered a challenge. The table code looks like this: This is the structure of my table: <table class="table" style="font-size:22px; width:100%"> I want to ensure that everything fits within the pa ...

htmlcsstwitter-bootstrap

When the md-menu is clicked, the Top Nav shifts upwards along with the mdDialog buttons

Currently, I am in the process of developing a website using AngularJS and ASP.NET, incorporating Angular Material. However, I encountered an issue where scrolling on the page causes the top navigation to move up the body or essentially "disappear" when cl ...

htmlcssangularjsangularjs-material

Obtaining a particular tweet on Twitter

I've been attempting to retrieve the information from a particular status using the status URL, such as http://twitter.com/#!/jquery/status/36102693709680640, and also obtain the username linked to that status. For example, @jquery. Is there a method ...

phpjquery

Ways of extracting specific information from a JSON file with the help of jQuery

I am currently attempting to parse a JSON file that is stored locally on my system using jQuery. I am specifically interested in retrieving certain data from the file, which is structured like this: {"statements":[{"subject":{"uriString":"A","localNameIdx ...

javascriptjqueryjson

Tips for stopping a drop-down box from changing its size

Currently working with C# and jquery. I've implemented a dropdown box containing 20 elements, each sized according to the largest element's text length. In addition, there is a checkbox that, when clicked by the user, removes all selections from ...

c#jqueryhtml

Personalized FileInput within a card - Bootstrap 5

I am attempting to incorporate a custom file selection feature within a Bootstrap card: Here is my attempt: <style> label { cursor: pointer; } .custom-input-image { opacity: 0; position: absolute; z-index: -1; } </style> <div ...

htmlcssbootstrap-5

Is there a way to add zebra striping to a gridview that is already using jquery tablesorter?

I have a GridView in my asp.net application that utilizes the tablesorter plugin: $(document).ready(function() { $("[id$='_myGridView']").tablesorter({ sortList: [[0, 0]] }); }); Is there a way to implement zebra striping that updates ...

asp.netjquerygridviewtablesorterzebra-striping

Await the resolution of multiple individual promises

I am working with Angular promises in multiple controllers, and I need to trigger a function once all of them have completed. Is there a way to achieve this using events or promises? ...

javascriptjqueryangularjseventsangular-promise

Looking for a simple method to generate a text-only dropdown link in Bootstrap 4 without using a button?

Is there a simple method to create a text-only dropdown link in Bootstrap 4 without using a button? Or do I have to adjust the padding and buttons using CSS to make the "Delivery" dropdown blend in with the rest of the text? I've searched online and ...

htmlcssbootstrap-4

What is the process for utilizing Angular's emulated encapsulation attributes on HTML elements that are dynamically added to an Angular component?

Within my custom Angular component, a third-party library is dynamically adding an HTML element. I am seeking a solution that can apply Angular's encapsulation attributes to these elements regardless of the specific third-party library being used. If ...

cssangularangular-components

division of vertical space

Is there a way to ensure that the column containing bbb + ccc is the same height as the aaa and ddd columns? <html><body> <div style="width:500px;height:500px;background-color:yellow"> <div style="float:left;height:100%;background-co ...

csshtml

dispatching divisional content via email

My form has inputs for a name and email address. Here is the code: <form role="form" method="post" action="email.php"> <input type="text" class="sendmail" name="name" placeholder="Your name" /> <input type="text" class="sendmail" name ...

jqueryhtmlajaxforms

Switching the orientation of an iPhone on Chrome can lead to content being cut off

Currently, I am conducting testing on an iPhone XS running iOS 15.6.1 The website seems to function properly on iOS Safari (although untested on Android), however, a problem arises when using Chrome and rotating the screen from landscape to portrait mode. ...

javascripthtmlcssiosorientation-changes

Div content with a unique angle

I need to create a website with slanted div elements that must meet the following criteria: The sections should have a height of approximately 400px when displayed side by side, and about 800px when they stack vertically. It would be ideal if this could ...

htmlcssrotation

Tips on modifying the interface based on the selected entry using jQuery

I am attempting to display a text when different options are selected from the dropdown list. Here is the code for the drop-down list: <div class="dropdown"> <select class="form-control" id="ltype" name="ltype"> <option value=""&g ...

javascriptjquery

Is there a way to dynamically replace a section of a link with the current URL using JavaScript or jQuery?

I have a link that appears on multiple pages, and I want to dynamically change part of the link based on the current URL* of the page being visited. (*current URL refers to the web address shown in the browser's address bar) How can I use JavaScript ...

javascriptjquery

When dealing with JSON in relationships, using jQuery to locate a DOM element may not be the most logical approach

Even though my code is functioning correctly, I am struggling to comprehend why it works. It seems like it shouldn't. Can someone please provide some clarification? Within a div element on my page, I have JSON data stored in the rel attribute, specif ...

javascriptjqueryjson