How to vertically align the elements within a DIV in jQuery Mobile

Is there a way to vertically align the content of a jQuery grid's block so that it is centered with another element in the same row?

<div class="ui-grid-a" style="border:1px solid">
<div class="ui-block-a" style="vertical-align:middle" ><span>My Text</span></div>
<div class="ui-block-b" >
<div data-role="fieldcontain">
   <select name="select-choice-1" id="select-choice-1">
    <option value="standard">Standard: 7 day</option>
    <option value="rush">Rush: 3 days</option>
    <option value="express">Express: next day</option>
    <option value="overnight">Overnight</option>
   </select>
  </div>
 </div>
</div><!-- /grid-a -->

http://jsfiddle.net/neilghosh/9HNjf/1/

I am looking for a CSS solution that would allow me to display "My Text" at the center of the box, aligned with the select box on the right. Any suggestions to achieve this without using fixed pixels for top margin, considering browser resizing?

jqueryhtmlcssjquery-mobile

Answer №1

An innovative approach using jQuery to dynamically adjust the position of the text container div:

<div class="ui-grid-a" style="border:1px solid">
    <div class="ui-block-a" style="position:relative">
        <div id="tc" style="position:absolute">My Text</div>
    </div>
    <div class="ui-block-b">
        <div data-role="fieldcontain">
            <select name="select-choice-1" id="select-choice-1">
            <option value="standard">Standard: 7 day</option>
            <option value="rush">Rush: 3 days</option>
            <option value="express">Express: next day</option>
            <option value="overnight">Overnight</option>
            </select>
        </div>
    </div>
</div>

The javascript implementation is as follows:

var rowHeight = $(".ui-block-b").height();
$(".ui-block-a").height(rowHeight);
var tcHeight = $("#tc").height();
var top = rowHeight / 2 - tcHeight / 2;
$("#tc").css('top',top);

To try it out yourself, visit: http://jsfiddle.net/giofiddle/9HNjf/4/

Answer №2

I encountered a similar issue where I had a grid with three boxes, each containing buttons and text. The text in the middle box was aligning to the top while the buttons were vertically centered thanks to JQM. Upon inspecting, I found that the buttons had the class ui-btn-inner applied to them. Here is how I resolved it:

<div class="ui-block-b" style="text-align: center;">
    <div class="ui-btn-inner">my corrected text</div>
</div>

Answer №3

To properly position them, you might have to ensure they are set with the same height (refer to ).

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

Ensure that the dimensions of a div remain consistent across all screen resolutions, specifically for desktops and not mobile devices

Currently I am in the process of creating a highly secure and encrypted social network, but I have hit a stumbling block. I hadn't considered how my website would display on other desktops and laptops (not mobile devices). The issue is that I set all ...

htmlcss

Customize your Bootstrap 4 navbar to align on the right with a button that remains visible on mobile devices

I'm working on setting up a navbar with three elements. I want to have a left-aligned brand, a group of right-aligned links that will collapse on smaller screens, and an additional button that stays visible at all times. To achieve the alignment of t ...

htmlcssbootstrap-4

What is the best way to transform URL images on a webpage into media library images in WordPress?

Having trouble converting HTML Static Sites to WordPress because images are hosted through HTML SRC Code. After conversion, no one can see the images in visual format on pages during editing. Is there a way to convert all image links inside pages to media ...

phphtmlcsswordpress

Sending a key/value object through an AJAX POST request to an MVC 5 Controller action method results in a null value

After spending several hours searching, I finally found it. I have an object filled with key/value pairs of questionIDs and answers. This is how the onCmplete method in survey.js generates questions/answers after the survey is finished. The object that nee ...

c#jqueryasp.netajaxasp.net-mvc

NodeJS async/await not pausing for the completion of the previous request's response

function fetchData(input) { return new Promise((resolve, reject) => { $.post({ url: baseURL, data: input }).done(function (response) { resolve({ statusCode: 200, responseData: response }); ...

jquerynode.jsexpress

Detecting when the "enter" key is pressed using Jquery instead of relying on a mouse click

One issue I am facing is that jQuery is detecting the "enter" key press instead of mouse clicking on the submit button when trying to submit a form. The submit button works fine on the first attempt, but after that it only responds to the "enter" key. He ...

javascriptphpjqueryforms

What is the best way to retrieve the ID of the list item that has been clicked during a button event?

How can I use jQuery to get the ID of a selected list item when clicking a button in my HTML code? <ul id="nav"> <li><a href="#" rel="css/default.css" id="default" > <div class="r1"></div> </a>< ...

javascriptjqueryhtml

When using jQuery AJAX, the script is returning blank values

Facing a frustrating issue here. I'm sending an AJAX request to a PHP file, but when I check Chrome Network Tools, it doesn't return any JSON data. However, when I try posting the same data using POSTMAN in Chrome, it returns correctly. Also, if ...

javascriptphpjquerymysqlajax

Building an Angular 4 app featuring a customized default landing page and URL parameters functionality

I am in the process of developing a web portal that will be embedded within an iFrame. Below is the code snippet I am using to set up the portal: Routes Configuration const routes: Routes = [ { path: '', redirectTo: '/dash ...

htmlangulartypescriptiframeangular-router

Incorporating external content into your website: A guide

Currently, I am in the process of developing a website for personal use (without any intention of making profit). The vision for this website is to serve as a comprehensive "directory" featuring various posts sourced from different websites - similar to a ...

htmlwordpressiframeblogs

Adjust ChartJS yAxes "tick marks"

I'm having trouble adjusting the scales on my yAxes and all the information I find seems to be outdated. My goal is to set my yAxes range from 0 to 100 with steps of 25. Check out this link yAxes: [ { ...

javascripthtmlcsschart.js

The images on my website are not displaying properly on different devices

My attempt at creating a website for fun and testing purposes is facing issues when viewed on mobile devices. The images and specially positioned elements are not displaying correctly, extending beyond the page boundaries. I have tried adding the viewport ...

htmlcssimagepositioncross-browser

Discovering the worth of a selected radio button using JavaScript

I need to extract the value of a radio button without any validation or clicking on a button. My goal is to retrieve the live value as soon as the user changes the selected radio button. I've attempted multiple codes, but none of them have been succ ...

javascriptjquery

The display:block-inline feature seems to be malfunctioning

Even though I've specified the width of columns as 25%, the boxes are still not aligning in a single line: ...

htmlcssfrontend

How do I make an AJAX request in Rails without including a question mark in the data?

Currently, I'm attempting to make a GET request to my /routes/ controller in order to retrieve some data. Here is the code snippet I have so far: function fetchMarker(id) { var data; $.ajax({ type: "GET", url: '/routes/&a ...

jqueryruby-on-railsajaxruby-on-rails-3

How can I prevent the browser's back button from functioning on an AngularJS webpage?

Is there a way to disable the browser's back button and refresh button in Angular? For example, in my source code: Page Source: "use strict"; .controller("wizardSecondController", function($scope, $state, $stateParams, wizardManager) { $scope.$on ...

javascriptjqueryangularjs

What steps can I take to make sure a jQuery Mobile table does not become responsive?

My goal is to make a table responsive by using media queries to hide optional columns on smaller devices. I need to hide two columns based on different screen sizes: @media screen and (max-width: 33em) { th.optional-1, td.optional-1 { display: no ...

cssjquery-mobilemedia-queries

Issues with jQuery fundamentals

For a while now, I've been grappling with jQuery. It's undeniably powerful and offers a plethora of fantastic capabilities. However, my struggle lies in the fact that I tend to incorporate multiple jQuery features simultaneously. For example, on ...

javascriptjqueryjquery-events

The GAS web application is experiencing issues with sorting dates correctly on the Javascript table

I have a food consumption log in a table that I need to sort. When I attempt to sort by the date column, I notice an issue with how it groups numbers together. For example, the sorting places all dates starting with 10 between 1 and 2, then all dates star ...

javascriptjquerygoogle-apps-scriptbootstrap-4web-applications

Execute AJAX function when loading a form populated from a MySQL/PHP database

I am currently working on a drop-down menu that is being populated from a MySQL table using PHP. The goal is to have a second drop-down menu triggered based on the selection made in the first form. This functionality works perfectly when a selection is mad ...

phphtmlmysqlajax