Using grid in jQuery Mobile, I have designed a page and now looking to place a block exactly centralized on it.
In the first grid, there are 2 blocks equally positioned. In the next grid, only one block is present and I want it to be centered.
I have tried various techniques such as:
margin: 0 auto
However, none of these methods have been successful so far. How can I align a ui-block in the center with the same width as the two upper blocks?
(codes can be found on jsfiddle)
To customize the JQM ui-block-a class, you can set the block width to match the first grid block. Check out this DEMO for reference.
MODIFICATIONS : Included margin-left:25%; in your second grid block.
Snippet of Code:
<div data-role="page">
<div id="content" data-role="content">
<div class="ui-grid-a" id="mymenu">
<div class="ui-block-a image_class" id="daily_sehri_iftar" style="background:#000000;"><div class="ui-bar ui-bar-a" style="text-align: center">hhh</div></div>
<div class="ui-block-b image_class" id="monthly_sehri_iftar" style="background:#000000;"><div class="ui-bar ui-bar-a" style="text-align: center">aaaa</div></div>
</div>
<div class="ui-grid-a" id="mymenu">
<div class="ui-block-a image_class" id="prayer_time" style="background:#000000;margin-left:25%;"><div class="ui-bar ui-bar-a" style="text-align: center;">aaaaa</div></div>
</div>
</div>
</div>
Take a look at this sample form here: http://jsfiddle.net/GT7fY/ Is there a way to automatically convert all input text to uppercase as the user types? ...
Is there a way to enable CSS autocomplete in JavaScript for VS Code? I can easily work with CSS, but the auto suggestions are not showing up when coding in JS. For instance, when typing document.queryselector("myclass")., nothing shows up after the dot li ...
Recently, I've been trying to update a specific row in my database table. To locate the exact row for updating, I use an email address entered into a form as a search key before inputting the remaining data needed for the update process. However, ther ...
Is there a way to customize the color of helperText in material-UI for highlighting errors in a TextField? I've been struggling to change the color of helperText with no success. I attempted using MuiFormHelperText-root-406 to add CSS styles, but it ...
Here is a picture of what I want, and below I will provide a more detailed description: Link to the image (I cannot paste it here) I am explaining the elements involved. There are three main components: 1) The topmost text "Bla bla bla bla" 2) The butt ...
Hi there, I'm currently working on a project and I'm facing an issue with aligning all the items in the same row. I've attempted to use flexbox but the items end up overlapping each other and I'm unsure of how to resolve this issue. To ...
I have been attempting to incorporate external javascript files into my react component. When I included them in a basic html file using script tags, everything worked smoothly. However, I am unsure of how to achieve this within a react component. < ...
After receiving a JSON response from a PHP file via an AJAX call, I successfully retrieved the data. console.log(data["json"]); [{"value":"23","label":"Assorted Juices"},{"value":"24","label":"Water"},{"value":"25","label":"Beers"},{"value":"26","label": ...
I am currently working on a side menu that contains two buttons. My goal is to display the content of the profile div by default, and when the user clicks on the My reviews button in the sidebar, I want to hide the content of the profile div and show the r ...
Is there a way to achieve space-between alignment when elements are stacked vertically in MUI Grid instead of using flex? I've come across suggestions involving giving flex:1 and height:100%, but I'm specifically interested in achieving this with ...
I need to create a quiz with 10 questions, each having 4 answers with one correct option. The question structure is as follows: 3 easy questions one differential question with two answers leading to different paths based on the user's choice 5 follo ...
I am trying to specify certain iframes by using a class attribute to adjust the width using CSS. The iframes I am working with are google maps embeds, similar to this one: <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0 ...
Desired Outcome https://i.sstatic.net/EjEXG.gif Actual Result https://i.sstatic.net/BmXYG.gif The goal is to toggle the red-background class, so that when hovering over the button-bullet, its background-color changes to #FCC1C5. Avoiding the use of .b ...
I am currently utilizing the Bootstrap framework v3.3.0 for my website. I'm trying to implement an image as a tool-tip when the user hovers their mouse pointer over an icon. Here is the HTML code I have: <div class="col-sm-5"> <div class= ...
I'm looking to create a unique fade reveal text effect for a multi-line H1. The goal is for each line of the text to fade up from its own row, rather than simply revealing from the bottom. Here's an example I've already developed, but it cu ...
Being new to PHP programming, I encountered an issue while trying inputting an HTML tag into a PHP file. This snippet generated an error: <?php $a = "Begin"; $b = 12; echo $b . " " . $a . " " . "This is a PHP file <br/>"; echo strlen($a); echo s ...
After receiving the JSON String from the server as a response, which can be viewed here, I've implemented the following Jquery Code: function loadCategories() { $.ajax({ type: "POST", url: "/Services/ControllerService. ...
I attempted to submit a Laravel form using AJAX. Here is my form: <div class="modal-body"> <form id="addCrewMedical" method="POST"> <div class="input-group mb-4&q ...
I have a snippet of text stored in a JSON file that appears like this "I want a new line\nhere". This is the code I am using to display the text after replacing the \n with a <br />: <p className="subtitle is-5 has-text-w ...
I am having trouble uploading an image as it only takes the file name with extension, not the full path. <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">< ...