"Unlock the secrets to commanding respect in the web form layout by mastering the art

I have a fieldset that includes a legend with potentially long text content.

I need the legend to only take up 50% of the width of the fieldset.

Currently, when the legend is too lengthy, it still occupies 50% of the space but causes the entire fieldset to stretch in width as if the full string was visible.

fieldset {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
}

legend {
  max-width: 50%;
}

/* Oversized SPAN content forces the FIELDSET to exceed the 100% width and breaks the layout. */
legend span {
  display: inline-block;
  width: calc(100% - 100px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
<div>
  <fieldset>
    <legend>Product (<span>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW...</span>)</legend>
  </fieldset>
</div>
htmlcssfieldset

Answer №1

It seems like the issue stems from using percentage values in this scenario. The fieldset is appearing twice as large as the legend because of the 50% value being used. Essentially, the width of the fieldset is determined by the content of the legend, causing the percentage to be calculated based on that specific width.

To overcome this issue, one potential solution is to switch to using length measurements instead of percentages, with the vw unit serving as a suitable alternative.

legend {
  max-width: 50vw;
}

/* In cases where oversized SPAN content causes the FIELDSET to exceed 100% width and disrupt the layout */
legend span {
  display: inline-block;
  width: calc(100% - 100px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
<div>
  <fieldset>
    <legend>Product (<span>WWWWWWWWWWWWWWWW...</span>)</legend>
  </fieldset>
</div>

An alternate approach to address this dilemma involves setting a fixed width for the fieldset so it doesn't rely on the child content. This can be done by using a small value along with min-width:100% to sustain the block behavior.

fieldset {
  display:inline-block;
  /* This will resolve the issue */   
  width:0;
  min-width:100%;
  /**/
  box-sizing: border-box;
}

legend {
  max-width: 50%;
}

/* When the oversized SPAN content pushes the FIELDSET over 100% width ultimately breaking the layout */
legend span {
  display: inline-block;
  width: calc(100% - 100px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
<div>
  <fieldset>
    <legend>Product (<span>WWWWWWWW...</span>)</legend>
  </fieldset>
</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

HTML5 sortable lists, ajax posting, and inactive elements are not functioning correctly

I'm currently utilizing a fantastic plugin for jQuery known as HTML5 Sortable. It can be found at . I am attempting to disable certain items using this plugin. My approach involves adding the class="disabled" to the <li> tag and including items ...

jqueryajaxhtmljquery-ui-sortable

The CSS attribute selector is unable to target dynamically appended class names

Utilizing React's CSS animations add-on has been a seamless process, with everything running smoothly when using the provided classnames. .quote-enter { opacity: 0.01; transition: opacity .25s ease-in; } .quote-enter.quote-enter-active { opaci ...

csscss-selectors

Having trouble understanding the odd behavior in IE7. Suddenly seeing a scrollbar appear when hovering

The webpage layout I am currently experiencing issues with can be found at the following link: When viewing this page in ie7 or ie8 Compatibility View mode, a strange horizontal scrollbar appears whenever I hover over one of the menu items. It seems that ...

htmlcss

Tips for maintaining consistent webpage layout across various screen sizes

Although this method may seem outdated, I have always been intrigued by how it was accomplished. In the past, before websites became responsive, pages would simply shrink down to fit on mobile devices without adjusting their appearance. How was this achie ...

htmlcss

How to Use CSS to Align an Image in a Header

I'm struggling to position an image on the top right corner of my page, specifically in the header. Despite searching for help on Stack Overflow and other online resources, I can't seem to figure it out. Currently, here is what I have: The seco ...

htmlcss

Leveraging Flexbox and flexGrow in conjunction with Textfield

I am looking to use Flexbox to separate my components on the screen in a way that positions them correctly. I have 3 rows with textfields that need specific ratios related to the full width: row 1 : 2, 1, 1 row 2 : 1, 1 row 3 : 1, 1, 2 I attempted to ach ...

cssflexboxmaterial-ui

How to Customize the Drawer Color in Material-UI v5

I'm currently using MUI v5 in my project and I am encountering some challenges while attempting to style a Drawer component with a black background color. As this update is relatively new, I have not been able to find much information on customizing t ...

cssreactjsmaterial-uimaterial-design

Unveil the socket connection using web sockets

My current setup involves a server generating a socket on port 8181. I am interested in accessing this socket from a web page viewed in Google Chrome version 14. It seems that direct access may not be feasible, as Chrome only supports Web Sockets and not s ...

javascripthtmlwebsocket

Generating an interactive Datepicker using Jquery

How can I design a dynamic date picker similar to the image provided below? I have attempted to create one, but I am looking for a more interactive date picker. Is there a way to achieve the design shown in the image? The current date picker does not meet ...

javascriptjqueryhtmlcsstwitter-bootstrap

Transitioning to the Full Website with PHP Sessions - Discrepancies in Styling

I've encountered an issue when trying to switch from a mobile site to a full site using sessions. The styles on the full site do not load unless I refresh the page, at which point they finally appear. On my mobile page, there's a link that direct ...

phphtml

Tips for substituting @media (max-width) with Stylish or Greasemonkey?

I am encountering an issue when trying to access this specific website on my desktop browser. The site has a responsive/fluid design that switches to displaying a mobile menu button instead of a horizontal nav-bar when the browser width is less than 990px. ...

cssgreasemonkeytampermonkeystylish

Encountering difficulties reaching $refs within component method

Trying to access a ref defined within a template when an element is clicked. Here's the HTML: <!DOCTYPE html> <html lang="en"> <head> <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protectio ...

javascripthtmlvue.jsvuejs2axios

Can I give a "label" to the information being retrieved from the database?

I am looking to give a name to the answers fetched from the database. Currently, I am configuring a questionnaire/quiz with the questions and corresponding answers stored in the database. Here is my PHP code snippet: public function site() { $db = n ...

phphtml

What is the proper way to bind CoreUI's CSwitch component?

I am trying to incorporate the CSwitch component into a DevExtreme data grid. While the DxSwitch component functions correctly, I am unable to get the CSwitch to work properly. It seems like I might be using the wrong binding. Could that be the issue? < ...

javascripthtmlvue.jsdata-bindingcore-ui

Achieving consistent alignment for text on a curved path

I am working on a unique "flow-builder" project and I need to achieve this specific result: At the moment, my current edge looks like this: The text on the edge is currently aligned with the edge itself, however, I need it to align differently as shown i ...

cssreactjscanvas

Changing the background color of .pane and .view elements in an Ionic web application using JavaScript

Looking to modify the background-color of two css selectors, .pane and .view, that are located within the ionic.css file. Despite multiple attempts to do so using JavaScript directly in the index.html file, the changes are not reflected. The code snippet ...

javascripthtmlcssangularionic-framework

Prevent draggable functionality of jQuery UI on elements with a specific class

I have created a dynamic cart feature where users can drag and drop items into the cart. However, once an item is placed in the cart, it should no longer be draggable (though still visible but faded). I attempted to achieve this by using the following code ...

javascriptjqueryhtmljquery-uidraggable

The alignment of images loop and videos loop is off

https://i.stack.imgur.com/6o38F.jpg I am facing an issue with a td container in which I am using PHP to loop through a collection of videos and images. Strangely, the videos are displaying higher than the images even though they are both contained within ...

phpcssimageloopsvideo

Selecting radio buttons using Bootstrap and JavaScript

I'm interested in incorporating this bootstrap radio selection feature into my JavaScript code. For example, if option1 is true, I want to execute a specific action... How can I achieve this? <div class="alert alert-info" role="alert"> < ...

javascripthtmltwitter-bootstrap-3

The div does not extend fully across the page

I have tried following similar instructions on Stackoverflow but to no avail. Even after setting margin:0 and padding:0 in my code, the issue persists. The first div represents the side bar, the second div is the content (blue), and there is mysterious wh ...

htmlcss