Alter the size of an element's width dynamically while maintaining a predetermined width

Question

Alter the size of an element's width dynamically while maintaining a predetermined width

Having a fixed width div:

// CSS

@media only screen
.column.small-centered:last-child, .columns.small-centered:last-child {
  float: none;
}
.lesson_lt_mc_div .small-centered {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 296px;
}
foundation.css:1@media only screen
.column.small-centered, .columns.small-centered {
  margin-left: auto;
  margin-right: auto;
  float: none;
}
.text-left {
  text-align: left !important;
}

// HTML

<div class="small-3 small-centered text-left columns">
    <input type="radio" name="lt_mc_ans" value="1" id="lt_mc_ans_1"><span> 1. </span>
    <label for="lt_mc_ans_1">I</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="2" id="lt_mc_ans_2"><span> 2. </span>
    <label for="lt_mc_ans_2">rsr rs rsrs rsrs r rrrs</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="3" id="lt_mc_ans_3"><span> 3. </span>
    <label for="lt_mc_ans_3">Very</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="4" id="lt_mc_ans_4"><span> 4. </span>
    <label for="lt_mc_ans_4">She</label>
</div>

The purpose of having a fixed width is to center the div while aligning the text to the left. However, it causes an issue when the text wraps due to its length, making the options appear distorted.

Is there a way to adjust the div width dynamically using jQuery or JavaScript? (While considering any possible CSS alternatives).

javascript jquery html css

Answer 1

Answer №1

To create this layout, you'll need an outer and inner element.

The text in the outer element should be aligned in the center. The inner element should be displayed as inline-block so that it only takes up the width of its content.

.outer {
  text-align: center;
  background: lightblue;
}
.inner {
  background: lightgreen;
  display: inline-block;
  text-align: left;
}

<div class="outer">
  <div class="inner">
    Some example text
    <br />and more text
    <br/>and even more
  </div>
</div>

Alternatively, instead of using an inner div, consider using your form to achieve a similar effect.

Edit

Below is your revised HTML with the addition of the form tag:

.outer {
  text-align: center;
  background: lightblue;
}
.inner {
  background: lightgreen;
  display: inline-block;
  text-align: left;
}

<div class="outer small-3 small-centered text-left columns">
  <form class="inner">
    <input type="radio" name="lt_mc_ans" value="1" id="lt_mc_ans_1"><span> 1. </span>
    <label for="lt_mc_ans_1">I</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="2" id="lt_mc_ans_2"><span> 2. </span>
    <label for="lt_mc_ans_2">rsr rs rsrs rsrs r rrrs</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="3" id="lt_mc_ans_3"><span> 3. </span>
    <label for="lt_mc_ans_3">Very</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="4" id="lt_mc_ans_4"><span> 4. </span>
    <label for="lt_mc_ans_4">She</label>
  </form>
</div>

Answer 2

To create this layout, you'll need an outer and inner element.

The text in the outer element should be aligned in the center. The inner element should be displayed as inline-block so that it only takes up the width of its content.

.outer {
  text-align: center;
  background: lightblue;
}
.inner {
  background: lightgreen;
  display: inline-block;
  text-align: left;
}

<div class="outer">
  <div class="inner">
    Some example text
    <br />and more text
    <br/>and even more
  </div>
</div>

Alternatively, instead of using an inner div, consider using your form to achieve a similar effect.

Edit

Below is your revised HTML with the addition of the form tag:

.outer {
  text-align: center;
  background: lightblue;
}
.inner {
  background: lightgreen;
  display: inline-block;
  text-align: left;
}

<div class="outer small-3 small-centered text-left columns">
  <form class="inner">
    <input type="radio" name="lt_mc_ans" value="1" id="lt_mc_ans_1"><span> 1. </span>
    <label for="lt_mc_ans_1">I</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="2" id="lt_mc_ans_2"><span> 2. </span>
    <label for="lt_mc_ans_2">rsr rs rsrs rsrs r rrrs</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="3" id="lt_mc_ans_3"><span> 3. </span>
    <label for="lt_mc_ans_3">Very</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="4" id="lt_mc_ans_4"><span> 4. </span>
    <label for="lt_mc_ans_4">She</label>
  </form>
</div>

Answer 3

Answer №2

To center the small-centered class, apply display: table; margin: auto; and eliminate the width property...

Answer 4

To center the small-centered class, apply display: table; margin: auto; and eliminate the width property...

Answer 5

Answer №3

If you adjust your width attribute to a min-width attribute and then configure the width attribute as shown below:

width: intrinsic;
width: -moz-max-content;
width: -webkit-max-content;

You should see the desired behavior. For more information on the 'max-content' option, visit this link.

Edit: See a demonstration using your html structure on CodePen: here

Answer 6

If you adjust your width attribute to a min-width attribute and then configure the width attribute as shown below:

width: intrinsic;
width: -moz-max-content;
width: -webkit-max-content;

You should see the desired behavior. For more information on the 'max-content' option, visit this link.

Edit: See a demonstration using your html structure on CodePen: here

Answer 7

Answer №4

Why not use min-width on the div in the CSS instead of setting a fixed width, allowing it to grow with the text?

Answer 8

Why not use min-width on the div in the CSS instead of setting a fixed width, allowing it to grow with the text?

Alter the size of an element's width dynamically while maintaining a predetermined width

Answer №1

Edit

Answer №2

Answer №3

Answer №4

Similar questions

Using AJAX to search through paginated pages is quite simple and effective

Pausing and then resuming an interval function within the same function

Retrieve coordinates of the clicked location with RichMarker in the Google Maps JavaScript API v3

Arranging JavaScript array in alphabetical order

A guide to Embedding a Variable Template Within an Anchor Tag in Django Templates

Is there a foolproof method to verify if a user truly has visibility of a div element?

Struggling with Selenium as I attempt to click multiple "Remove" buttons, constantly encountering the StaleElementReferenceException error

Using a parameter as optional in an Arrow Function

Passing parameters as an array in Angular can be done by using the format: ?category[]=1&category[]=2&category[]=3,

Real-time Feedback: Providing live updates to users about the current connection status

Transforming JSON/XML into a hierarchical display

Creating a form that seamlessly integrates with the content using a combination

Fixing the PHP AJAX issue with loading additional content

VueJS ensures that instance properties are reactive

Ways to develop tests for functions specific to my scenario

Changing the size of a div using jQuery

Creating dynamic grids in React.js by utilizing HTML

Unleashing the Power of Node.js: A Step-by-Step Guide to Crafting

Prevent certain individuals from selecting a checkbox within HTML forms

What's the process for setting a value in selectize.js using Angular programmatically?