The text on the menu is not adjusting properly for small screens

Check out the jsFiddle link. The issue arises when the Result screen is set to the width of a mobile's screen. Instead of wrapping the text, it gets replaced by dots and cannot be scrolled to view the full content.

Here is the code snippet:

<a href="#popupNested" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-info ui-btn-icon-left ui-btn-b" data-transition="slidedown">Info</a>
  <div data-role="popup" id="popupNested" data-theme="none">
    <div data-role="collapsibleset" data-theme="b" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0;">
      <div data-role="collapsible" data-inset="false">
        <h2>Must save</h2>
        <ul data-role="listview" data-icon="false">
          <li><a href="#" data-rel="dialog">If you don't save, changes won't apply!</a></li>
        </ul>
      </div><!-- /collapsible -->
    </div><!-- /collapsible set -->
  </div><!-- /popup -->

In an attempt to resolve this issue, I tried using

data-mode="reflow" class="ui-responsive table-stroke"
, inspired by a solution for tables, but it was unsuccessful. Can anyone provide guidance on how to fix this problem?

Answer №1

To improve the formatting of your text, try inserting a <br> tag in the middle of your sentence and adjust the overflow to visible while setting text-overflow to clip (the default value). Alternatively, you can use the initial value. Feel free to check out this interactive demo. Hopefully, this suggestion proves useful!

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

Change the color of a c3js chart when it loads

I have been searching for a way to customize the color of a scatter chart's plot, and I came across an example that uses d3 code within the chart http://jsfiddle.net/ot19Lyt8/9/ onmouseover: function (d) { d3.select(d3.selectAll("circle ...

In a bootstrap column containing an inner element with a wide width that is taking up more space than intended

I am attempting to create two columns of equal size, containing nested elements with large dimensions and adding overflow: scroll;. However, the column width is defaulting to 100%. Interestingly, when I apply a small width to the column (), the issue is re ...

Table of Wordpress posts

There has been a question on how to easily add tables to blog posts without having to use HTML. While some are comfortable inserting the code directly into the blog, others like my friend prefer alternatives that don't involve coding. Is there a simpl ...

The padding of elements changes accordingly as the dimensions (width/height) of the header are adjusted

Currently, I'm tackling the challenges of working on my website and trying to understand JavaScript better. I am facing an issue where I want my aside menu's padding to adjust when my header shrinks in height. Furthermore, at the end of the web ...

A linear gradient effect originating from the center/middle of the background

Is it possible to create a linear-gradient background that starts from the center or middle of the screen? This is the CSS I am currently using: body { display: table; width: 100%; height: 100%; margin: 0 auto; background-repeat: no-r ...

Having trouble getting the "save adjustments" button to become enabled after using the jQuery datepicker

It's puzzling that my code doesn't respond to the selection of a date using the jQuery date picker to re-enable the "save changes" button. Interestingly, changing values in other input boxes seems to work perfectly fine. I'm struggling to gr ...

Leverage the power of jQuery to fetch data from a PHP script connected to a MySQL database

It might be a bit confusing, so let me clarify. I'm working on a form where users input a ticket and it gets assigned to a technician based on the service they offer. I have 3 text fields: username, email, and description of the problem. The next fie ...

A step-by-step guide on incorporating a dynamic data series into a line chart using the powerful tool

The data retrieved from a webservice is processed using the BindTrend method and then converted to a JSON object before being applied to the chart. The code for this process is as follows: var plot; var itemdata = []; var chart; var data = [] ...

Positioning Google Chart in HTML

I'm attempting to arrange three distinct Google pie charts in a horizontal layout. At present, I have applied inline CSS for formatting purposes. Oddly enough, the third chart always ends up on a separate line. Could anyone kindly point out my error? ...

The fine balance between a horizontal <img> and a <div> element

Can't seem to get rid of the thin white line between a black image and a div with a black background on a page where the body background is set to white. I've tried setting border: 0 !important among other things, but it just won't go away. ...

Updating the state of a React Component using data from 2 input fields

I am facing an issue with two input fields of type "file" in a React component. My goal is to load a JSON file into each input field, save the data from both files into separate variables, and update the state of the component. However, I have noticed that ...

Expanding image in card to fit device width using Ionic

Currently utilizing the ionic framework and attempting to expand the image within the card to fit the device width. Referencing the example provided here, here is my current code progress. <div class="list card"> <div class="item item-avatar" ...

Compact selection box, vast information

My dilemma is having restricted space for a dropdown containing a considerable amount of text. Is it feasible to keep the dropdown width small while expanding the list popup size? Update: My browser of choice is Internet Explorer. ...

Can you provide a database of words for different cities, towns, and countries in MongoDB (or in JSON

Currently, I am in the process of developing an application that utilizes MongoDB. One specific feature I am working on implementing is an 'auto-suggest' functionality on the front-end. For example, as a user begins to type the first few letters ...

What is the best way to include multiple selected option values from select2 in form.serialize()?

I am trying to use select2 for selecting multiple options in HTML and then send the selected values as an array using form.serialize() to update a database field. However, my form also contains other input fields. How can I achieve this? Here is my HTML c ...

Set each item to its original position on the draggable container

I am working on a project where I have categories with lists of contacts. Each contact has user details displayed in a table with input elements. I have made the contacts draggable and the categories droppable. When moving a contact from one category to an ...

What is the best way to extract a JSON string from the login PHP response?

I am working on creating a basic website along with an Android application that both retrieve data from the same database. While I have no issues in dealing with Android, I am facing difficulty in handling JSON strings in HTML. How can I fetch the JSON res ...

Display a collection of pictures from a directory on a website using JavaScript

I am having trouble displaying a collection of images from a specific folder using JavaScript/jQuery. Below is the code snippet I am working with: $(document).ready(function(){ var dir = "images/"; // specified folder location var fileextension ...

Examining the scroll-down feature button

I'm currently experimenting with a scroll down button on my website and I'm perplexed as to why it's not functioning properly. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" c ...

The pointer-events attribute seems to be inactive and not functioning as expected

I recently implemented a design feature on my website where I created a transparent div at the bottom of the page to overlay a fixed div. The idea was for the fixed div to be revealed as the user scrolled down, but unfortunately, it seems that the click ev ...