Tips for adjusting the width of a div within a panel to make it full-width

Is there a way to create a full-width div in a side panel using jQuery Mobile?

I attempted it, but the result is not as desired:

https://i.sstatic.net/kfxj7.png

This is my current code snippet:

#profile {
  background-color: green;
  border-bottom: 1px solid #242A37;
  overflow: hidden;
  height: 100px;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

.profile_info {
  position: relative;
  left: 68px;
  top: -49px;
  font-size: 14px;
  color: #C4CCDA;
  text-shadow: 0 0px 0 black;
}
<div data-role="panel" data-display="overlay" id="sidebar" style="background:white;">
  <div id="profile">
    <img src="img/profile.png">
    <div class="profile_info"><strong>User</strong><br><small><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40252d21292c00272d21292c6e232f2d">[email protected]</a></small></div>
  </div>
  <h3>MENU</h3>
</div>

jquerycssjquery-mobile

Answer №1

If you want to make the panel content "full width," you can achieve this by overriding the JQM class .ui-panel-inner:

#profile {
  background-color: green;
  border-bottom: 1px solid #242A37;
  overflow: hidden;
  height: 100px;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

.profile_info {
  position: relative;
  left: 68px;
  font-size: 14px;
  color: #C4CCDA;
  text-shadow: 0 0px 0 black;
}

#sidebar .ui-panel-inner {
  padding: 0;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div id="page-1" data-role="page">
    <div data-role="header">
      <a href="#sidebar" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-bars">Panel</a>
      <span class="ui-title"></span>
    </div>
    <div role="main" class="ui-content">
    </div>
    <div data-role="panel" data-display="overlay" id="sidebar">
      <div id="profile">
        <img src="img/profile.png">
        <div class="profile_info"><strong>User</strong>
          <br><small><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c59515d55507c5b515d5550125f5351">[email protected]</a></small></div>
      </div>
      <h3>MENU</h3>
    </div>
  </div>
</body>

</html>

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

Transferring data through Ajax to PHP with dynamic variables

My current approach involves using the $.ajax function to send data to a PHP page: $.ajax({ type: 'POST', url: "ajax_more.php", data: "userid=1" }); Within the ajax_more.php file, I attempt to access and retrieve the value of the user ID ...

phpjqueryajax

Trigger the onClick event of an element only if it was not clicked on specific child elements

<div onClick={()=>do_stuff()}> <div classname="div-1"></div> <div classname="div-2"></div> <div classname="div-3"></div> <div classname="div-4"></div> ...

javascripthtmlcssreactjsfrontend

Is there a workaround utilizing calc() and vh specifically for Chrome browsers?

Is it possible to find a CSS-only solution for incorporating vh in calc() functions specifically for Chrome browsers? I am trying to implement calc(100vh - 25px) as the top margin in order to make a 25px bar stick to the bottom of the page, but I am facin ...

cssgoogle-chromeviewport-unitscss-calc

Sliding right is done by activating the Switch Function, while sliding to the left can be achieved by deactivating it with the help

My objective is to create a functionality where flipping the switch button will cause it to slide automatically to the right, revealing a red background div. When switched off, it should return to its original position with a yellow background using Jquery ...

jquerycss

Display an element that has been tucked away, and then bring it to life

Is there a way to implement an animation that causes the hidden form to slide from right to left after the .button class is hidden? I have been able to achieve similar effects individually, but struggle with synchronizing their animations. When the butt ...

jqueryhtmlcss

What is the best way to create an adaptive <pre> tag for ASCII art without using media queries?

Currently, my username is displayed as an ASCII art banner/header and I am looking to enhance its responsiveness. Instead of relying solely on media queries, I am exploring the possibility of making it scale within a CSS grid container. This approach would ...

htmlcsscss-grid

The jQuery click event not triggering on ASP.NET control

I am currently developing a C#/Asp application that utilizes jQuery. I am trying to implement a specific function that should be called every time a click event is triggered on an element with a class of "loadingInProgress". However, the code snippet belo ...

javascriptc#jqueryasp.netloader

Triggering form submission through JavaScript by simulating keypress Enter does not work

Looking to incorporate some jQuery script into a website featuring keyword searching. I've encountered an issue where, upon inserting the code below into amazon.com to designate a keyword and simulate pressing the enter key using jQuery, the form fail ...

javascriptjquery

The CSS JSON code I have written is not having any impact on the appearance of my div

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles/common.css"> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type='text/javascript'> ...

cssjsonjsonp

"JQuery enables the dynamic cloning of form elements, allowing for attribute adjustments that can be easily reverted

I've been grappling with a puzzling issue recently. I used jQuery to clone a form and assigned IDs to the form elements to increase incrementally with each clone. However, following server validation errors (using Laravel), the IDs of the elements rev ...

htmljquerylaravelforms

The CSS3 animations using transit do not occur at the same time in Internet Explorer and Firefox

I am currently developing a presentation library to simplify my work. Naturally, animations play a significant role in this project. The library leverages Transit for smooth CSS3 animations. One specific animation involves an element sliding into or out o ...

jqueryhtmlcsscross-browserjquery-transit

Creating a nested structure using JQuery with dynamically generated divs and select tags

My current task involves creating forms and generating corresponding div elements, but my main concern lies elsewhere. What I am seeking guidance on is how to establish a hierarchy among these dynamically generated div elements using the <select> ta ...

jqueryhtml

Failure to trigger jQuery.ajax success function on Windows XP operating system

Snippet: $.ajax({ type: "POST", url: "students/login", data:{"data[Student][email]":_email,"data[Student][password]":_password}, beforeSend: function(){ $("#confirm").text(""); }, error: function (xhr, status) { ale ...

javascriptjqueryajaxcallback

Leveraging jQuery to dynamically load an icon based on the content within a <label> tag

I manage a website that dynamically fetches content from a database, with varying contents for each label. For example, one label may be generated as General:, while another may be generated as TV:. My question is, can jQuery be used to replace the text NA ...

javascriptjqueryhtmlcss

The ASP.NET session encounters difficulties in refreshing itself

I have been given the task of enhancing a web application built on ASP.NET 4.0 Web Forms to alert users before their session expires, and give them the option to either continue the session or end it. To achieve this, I have implemented a confirmation dia ...

javascriptjqueryasp.netsession-timeout

How can I speed up the loading time of my background image?

I have noticed that my background image is loading slowly on my website. I expected it to be cached so that subsequent pages using the same background would load instantly. However, the background image is only loading once the entire page is drawn. My CS ...

htmlcssbackground-image

What is the process for determining the total size of all files uploaded in dropzone?

How can I calculate the total size of all files uploaded in dropzone? For example, if I select 5 files each with a size of 2mb, the total size should be returned as 10mb. Also, I would like to restrict the total size of all files if it exceeds a certain ...

jquerydropzone.js

Animating the height of a div using nested div elements

Below is the code snippet provided: https://jsfiddle.net/wc48jvgt/69/ The situation involves a div with a horizontal layout named #cleaning_card_1, containing embedded divs that act as borders, and a vertical div called #cleaning_card_right_1 with a neste ...

htmljquerycss

Unexpected display issues with CSS shapes in Bootstrap framework

Been experimenting with creating custom shapes in Bootstrap - they display correctly in HTML and CSS, but Bootstrap distorts them. It seems like there are no conflicting classes. Could it be necessary to use '!important' on some of the elements? ...

cssbootstrap-5

Having trouble with integrating or modifying JSON data within an observableArray in knockout.js?

I'm currently learning knockout.js and trying to update my JSON data into an observableArray. I've successfully displayed the JSON data in tabular format using knockout. However, when attempting to insert the JSON data into the observableArray, ...

jqueryjsonknockout.js