What is the method to ensure span elements wrap text without setting a specific width or maximum width on the parent div?

Here is a snippet of code I have generated for displaying warnings or errors in Dojo dialogs:

/* Relevant CSS styles */

.l-status-message-wrapper {
  height: auto;
  margin-left: 5px;
  margin-top: 2px;
  min-height: 15px;
}

.l-status-message-wrapper--dialog {
  margin-left: 0px;
  display: block;
  word-wrap: break-word;
}

.c-global-message {
  min-height: 15px;
  color: #a5cf42;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.c-global-message--error {
  color: #e31d25;
}

.dijitDialog {
  background: #eee;
  border: 1px solid #d3d3d3;
  -webkit-box-shadow: 0 5px 10px #adadad;
  padding: 0;
}

.dijitDialog {
  position: absolute;
  z-index: 999;
  overflow: hidden;
}

.dijitDialogTitleBar {
  background: #C9CFD2 url(../../images/onglet_bg.gif) repeat-x;
  vertical-align: middle;
}

.dijitDialogTitleBar {
  background: #fafafa url(images/titleBar.png) repeat-x top left;
  padding: 5px 6px 3px 6px;
  outline: 0;
}

.dijitDialogTitleBar {
  cursor: move;
}

form {
  width: 200px;
  height: 200px;
  background-color: green;
}

The intention here is to limit the width of the 

.l-status-message-wrapper--dialog
span without affecting the overall width of the .machineParameterDialogContents div. This should be done dynamically based on the content's width. The goal is not to set a fixed width or max-width for the container or any parent elements, and adjust automatically according to the widest element after the lengthy text component.

In this case, the span should not exceed 200px without explicitly setting a max-width property. Everything inside the machineParameterDialogContents div is loaded via Ajax requests, adding complexity to the design requirements.

Is it feasible to achieve this responsive behavior across different browsers like Chrome, Firefox, and IE11?

htmlcss

Answer №1

To enhance what you already have, a simple addition would be:

max-width: fit-content applied to 

.l-status-message-wrapper--dialog

This adjustment allows the text to conform to the available width without increasing the overall width.

/*Relevant CSS:*/

.l-status-message-wrapper {
  height: auto;
  margin-left: 5px;
  margin-top: 2px;
  min-height: 15px;
}

.l-status-message-wrapper--dialog {
  margin-left: 0px;
  display: block;
  max-width: fit-content;
}

.c-global-message {
  min-height: 15px;
  color: #a5cf42;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.c-global-message--error {
  color: #e31d25;
}

.dijitDialog {
  background: #eee;
  border: 1px solid #d3d3d3;
  -webkit-box-shadow: 0 5px 10px #adadad;
  padding: 0;
}

.dijitDialog {
  position: absolute;
  z-index: 999;
  overflow: hidden;
}

.dijitDialogTitleBar {
  background: #C9CFD2 url(../../images/onglet_bg.gif) repeat-x;
  vertical-align: middle;
}

.dijitDialogTitleBar {
  background: #fafafa url(images/titleBar.png) repeat-x top left;
  padding: 5px 6px 3px 6px;
  outline: 0;
}

.dijitDialogTitleBar {
  cursor: move;
}

form {
  width: 200px;
  height: 200px;
  background-color: green;
}
<div class="dijitDialog dijitDialogFocused dijitFocused" role="dialog" aria-labelledby="machineParameterDialog_title" id="machineParameterDialog" widgetid="machineParameterDialog">
  <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
    <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="machineParameterDialog_title" role="heading" level="1">Edit Machine Parameter</span>
    <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="Cancel" role="button" tabindex="0">
            <span data-dojo-attach-point="closeText" class="closeText" title="Cancel">x</span>
    </span>
  </div>
  <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto;">
    <div id="machineParameterDialogContents" class="machineParameterDialogContents">
      <span class="l-status-message-wrapper l-status-message-wrapper--dialog">
        <span id="machineParameterDialogStatus" class="c-global-message c-global-message--error">
          error: <span>Action not successful. Please correct the validation errors</span>
        </span>
      </span>
      <form id="machineParameterDialogForm" name="machineParameterDialogForm" action="/machineParameterAction.action" method="POST" class="c-panel-dialog">

      </form>
    </div>
  </div>
</div>

Answer №2

To achieve the desired layout, utilize flex and introduce an additional div on the right side. Then assign flex-grow: 1 to both divs. This setup allows the right div to expand and occupy the remaining space if it contains more content. Otherwise, the left div will stretch accordingly. This method provides a dynamic layout without specifying fixed widths.

/*Custom CSS styles for status messages:*/

.l-status-message-wrapper {
  height: auto;
  margin-left: 5px;
  margin-top: 2px;
  min-height: 15px;
}

.l-status-message-wrapper--dialog {
  margin-left: 0px;
  display: block;
  word-wrap: break-word;
}

.c-global-message {
  min-height: 15px;
  color: #a5cf42;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.c-global-message--error {
  color: #e31d25;
}

/*Additional styles for dialog boxes:*/

.dijitDialog {
  background: #eee;
  border: 1px solid #d3d3d3;
  -webkit-box-shadow: 0 5px 10px #adadad;
  padding: 0;
}

.dijitDialog {
  position: absolute;
  z-index: 999;
  overflow: hidden;
}

.dijitDialogTitleBar {
  background: #C9CFD2 url(../../images/onglet_bg.gif) repeat-x;
  vertical-align: middle;
}

/*More CSS styles...*/


<div class="dijitDialog dijitDialogFocused dijitFocused" role="dialog" aria-labelledby="machineParameterDialog_title" id="machineParameterDialog" widgetid="machineParameterDialog">
  <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
    <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="machineParameterDialog_title" role="heading" level="1">Edit Machine Parameter</span>
    <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="Cancel" role="button" tabindex="0">
<span data-dojo-attach-point="closeText" class="closeText" title="Cancel">x</span>
    </span>
  </div>
  <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto;">
    <div id="machineParameterDialogContents" class="machineParameterDialogContents">
      <span class="l-status-message-wrapper l-status-message-wrapper--dialog">
        <span id="machineParameterDialogStatus" class="c-global-message c-global-message--error">
          error: <span>Action not successful. Please correct the validation errors</span>
        </span>
      </span>
      <form id="machineParameterDialogForm" name="machineParameterDialogForm" action="/machineParameterAction.action" method="POST" class="c-panel-dialog">

      </form>
    </div>
    <div class="more-content">
    “Such a little helpless creature will only be in the way,” I said; “you had better pass him up to the Indian boys on the wharf, to be taken home to play with the children. This trip is not likely to be good for toy-dogs. The poor silly thing will be in rain and snow for weeks or months, and will require care like a baby.” But his master assured me that he would be no trouble at all; that he was a perfect wonder of a dog, could endure cold and hunger like a bear, swim like a seal, and was wondrous wise and cunning, etc., making out a list of virtues to show he might be the most interesting member of the party.
    </div>
  </div>
</div>

Answer №3

Our web designer has discovered a solution by using a flexbox around the span element. Check out the code snippet below for the detailed solution.

/*CSS Styles:*/

.l-status-message-wrapper {
  height: auto;
  margin-left: 5px;
  margin-top: 2px;
  min-height: 15px;
}

.l-status-message-wrapper--dialog {
  margin-left: 0px;
  display: block;
  word-wrap: break-word;
}

.c-global-message {
  min-height: 15px;
  color: #a5cf42;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.c-global-message--error {
  color: #e31d25;
}

.dijitDialog {
  background: #eee;
  border: 1px solid #d3d3d3;
  -webkit-box-shadow: 0 5px 10px #adadad;
  padding: 0;
}

.dijitDialog {
  position: absolute;
  z-index: 999;
  overflow: hidden;
}

.dijitDialogTitleBar {
  background: #C9CFD2 url(../../images/onglet_bg.gif) repeat-x;
  vertical-align: middle;
}

.dijitDialogTitleBar {
  background: #fafafa url(images/titleBar.png) repeat-x top left;
  padding: 5px 6px 3px 6px;
  outline: 0;
}

.dijitDialogTitleBar {
  cursor: move;
}

form {
  width: 200px;
  height: 200px;
  background-color: green;
}

/* Controls the width of an element so it doesn't exceed the width of the largest element 
 * on the same DOM level. Adjusts the width of its contents if parent
 * element has no set width value. (e.g., Dialog message span not exceeding dialog width)
 * 
 * Used in hierarchical markup combination (l-dynamic-width-wrapper > l-dynamic-width-wrapper-items)
 */
.l-dynamic-width-wrapper {
display: flex;
}

.l-dynamic-width-wrapper > .l-dynamic-width-wrapper-items {
  flex-grow: 1;
  width: 0;
}
<div class="dijitDialog dijitDialogFocused dijitFocused" role="dialog" aria-labelledby="machineParameterDialog_title" id="machineParameterDialog" widgetid="machineParameterDialog">
  <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
    <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="machineParameterDialog_title" role="heading" level="1">Edit Machine Parameter</span>
    <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="Cancel" role="button" tabindex="0">
<span data-dojo-attach-point="closeText" class="closeText" title="Cancel">x</span>
    </span>
  </div>
  <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto;">
    <div id="machineParameterDialogContents" class="machineParameterDialogContents">
      <div class="l-dynamic-width-wrapper">
       <div class="l-dynamic-width-wrapper-items">
       <span class="l-status-message-wrapper l-status-message-wrapper--dialog">
        <span id="machineParameterDialogStatus" class="c-global-message c-global-message--error">
          error: <span>Action not successful. Please correct the validation errors</span>
        </span>
      </span>
      </div>
      </div>
      <form id="machineParameterDialogForm" name="machineParameterDialogForm" action="/machineParameterAction.action" method="POST" class="c-panel-dialog">

      </form>
    </div>
  </div>
</div>

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

The structure of the figure tag for HTML5 validation

Could you please confirm if the Figure tag is correctly used in the html structure? Regarding html5 validation, can I use this structure? <a href="#"> <figure> <img src="" class="img-responsive" alt=""> <figcaption> ...

csshtml

Animate elements with jQuery, moving them from the bottom right corner to the

I am currently working on a project to create a responsive webpage that involves clicking on a circle in the middle of the screen and having a div enlarge from the circle to the top left corner of the webpage. To achieve this effect, it seems like I would ...

jquerycssjquery-animate

Reordering the stacking order of Grid Items in material-ui

I'm facing an issue with the stacking order of grid items when the browser shrinks. On a regular desktop screen (lg): --------------------------------------------- | col 1 | col 2 | col 3 | --------------------------------------- ...

cssreactjslayoutgridmaterial-ui

How to toggle between checked and unchecked states using jQuery within AngularJS?

After reloading, the checkbox should maintain its checked or unchecked state. This functionality can be achieved using a directive controller. var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {}, $checkboxes = $("#c ...

javascriptjqueryhtmlangularjscheckbox

I am looking to develop a customizable table where the user can input their desired information

Looking to create an HTML page featuring a 10x10 table with alternating red and green squares. After loading the page, a pop-up window will prompt the user to input a word, which will then appear only in the red squares of the table. While I've succes ...

javascriptphphtml

Trouble with FilterBy Feature in Bootstrap-Table

I am attempting to use filtering functionality with a table that is populated via JSON, utilizing bootstrap-table by wenzhixin. HTML snippet: <button class="btn btn-primary" id="filterBtn">Filter</button> <div class="container"> &l ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-table

Issue with Bootstrap navigation bar not displaying on iPad devices

Currently, I am working on creating a custom bootstrap menu that displays properly on an iPad screen size. I have implemented the standard navbar code from Bootstrap with a few tweaks. While it works well on smartphones and laptops, the issue arises when ...

htmlcsstwitter-bootstrapipad

The CSS code seems to be ineffective when attempting to center elements with a specific width in react.js

Hey everyone, I'm currently working on developing a web application using react-bootstrap and I've encountered an issue with adjusting the width of my row and centering it. I have already created the necessary CSS and JS files, but I am unable to ...

cssreactjsreact-bootstrap

"Taking cues from Instagram's web/desktop design, we have created

When you view someone's instagram page on a desktop or pc, the search bar is designed to float left when clicked, allowing text to be entered for searching. If no text is entered in the search field, the search icon and placeholder return to their ori ...

jqueryhtmlcss

How can I adjust or eliminate the offset in Bootstrap 3 for smaller devices like tablets and smartphones?

Within the structure of my web app view (created in Rails 5), this is the main div: <nav class="navbar navbar-inverse navbar-fixed-top" > my navigation bar </nav> <div class="col-md-6 col-md-offset-3"> the central content of my web ...

htmlcsstwitter-bootstrap-3responsive-design

Executing PHP function from an HTML form

Despite trying multiple suggestions provided by this site, I have been unsuccessful in finding a solution to my problem. Here's the issue at hand: I have a page where all links are loaded through AJAX, including a profile page that fetches data from a ...

phphtmlajaxformsfunction

What is the method for obtaining the total number of steps taken in a day (pedometer) exclusively for the current day on the

Is there a way to retrieve the total steps count for the current day only? The tizen.humanactivitymonitor.setAccumulativePedometerListener function allows me to access the accumulativeTotalStepCount, which represents the cumulative walking and running ste ...

javascripthtmltizen-wearable-sdk

Extracting information from a checkbox list displayed within an HTML table

I have a table with multiple rows and two columns in each row. The first column contains text, and the second column consists of checkboxes. While I was able to retrieve the values from the first column, I am struggling to fetch the values of the selected ...

javascripthtmljsp

Exploring the combination of PHP and HTML through conceptual sessions

I am a beginner in the world of PHP, HTML, and website development, and I am currently trying to grasp the concept of Sessions. My goal is to implement a login/logout feature on a website using sessions, MySQL, and Slim framework. I am struggling with und ...

phphtmlsessionslim

How to handle Component binding change events in AngularJS

I have developed a component in AngularJS that displays data. However, when the customer binding changes, I need to call a service in the component controller, but it is not updating. Below is the code snippet: In my Test1.html file: <tab-customer tit ...

javascripthtmlangularjs

Adjusting the height of the v-footer

I'm having trouble adjusting the height of the v-footer component. According to the documentation, I should be able to use the height prop, but when I try height="100px" or height="50%", the footer doesn't change. What could be causing this issue ...

cssvue.jsvuetify.jsfooter

Aligning elements vertically within a parent container

I am facing a problem where elements are not aligning vertically in the center of their parent div. CSS: /* Main body structure */ body{ font-size:0.5em; } .main-wrapper { width: 90%; margin: auto; background-color: #efefef; } * { ...

csshtmlvertical-alignment

PHP function array_sum returns the sum of all values in an array rather than displaying each number

I have a collection of unique "coupons" with corresponding "productid"s https://i.stack.imgur.com/IgtFN.png My goal is to transform this list into an array using: $claimed = array($rowOrder['productid']); The problem arises when I attempt to ...

phphtmlmysqlpdo

Position the div element beside the image, rather than below it

I am having an issue with Bootstrap where the card I want to display on the right of an image is appearing below it instead. I attempted to use the display: inline-block property, but unfortunately, that did not solve the problem. I also explored other so ...

htmlcsstwitter-bootstrapbootstrap-5

The scrollOverflow feature in fullPage.js is not properly detecting the height of dynamically generated content

I have successfully implemented fullpage.js on my website. Everything is working perfectly with fullpage.js, but I am facing an issue when trying to open a div on click of pagination. Specifically, the browser scroll gets disabled when the div containing a ...

javascriptjqueryhtmlfullpage.js