CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rinish Sam
Rinish Sam

Reputation: 145

Setting width of <div> to be one of two values based on text content

Is there any way to set width of a <div> using a conditional operator on the size of text within it?

For example, if there are 60 characters or less, width should be 500px else, 700px.

This works fine upto some extent:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-container > div {
  display:block;
  min-width: 600px;
  margin: 2px;
  text-align: left;
}
<div class="flex-container">
    <div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do  
    </div>
    <div>(B) Lorem ipsum dolor sit amet,</div>
    <div>(C) Lorem ipsum dolor sit amet </div>
    <div>(D) Lorem ipsum dolor sit amet </div>
</div>

Output:

enter image description here

But, when I increase the number of characters of the first child <div>, I get this:

enter image description here

I want all the container elements to shift down once an element crosses a specific character limit, say, 60 characters.

EDIT:

What I wanted is this:

(image)

Upvotes: 2

Views: 677

Answers (3)

Temani Afif
Temani Afif

Reputation: 273009

You can do this with jQuery. Run a loop and check all the element, and if one of the element has more than 60 character you apply a width to all of them.

var elem = $('.flex-container > div');
for (var i = 0; i < elem.length; i++) {
  if (elem.eq(i).text().length > 60) {
    elem.css('width', '600px');
    break;
  }
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container>div {
  display: block;
  min-width: 300px;
  margin: 2px;
  text-align: left;
  border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
  <div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
  </div>
  <div>(B) Lorem ipsum dolor sit amet,</div>
  <div>(C) Lorem ipsum dolor sit amet </div>
  <div>(D) Lorem ips </div>
</div>

Upvotes: 0

Lc29tre
Lc29tre

Reputation: 1

You can resolve this with JavaScript, using the string length property and a condition.

1) Create a variable in JavaScript to access the div you created using : document.getElementsByTagName("div").innerHTML;

2) Use the if. In the condition use the length property and a compactor to see if the length is bigger then a certain number of characters.

3) In the statements add document.getElementsByTagName("div").style.width = x; and modify the width by the number you want by changing x.

Using a conditional operator, you've set the size of a div depending on the size of text.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

You could more easily do this with CSS Grid than with flexbox layout; here we take advantage of the minmax() function to determine the column width (bearing in mind we're explicitly styling the whole column, not just the specific 'cell' of content):

grid-template-columns: repeat(2, minmax(min-content, 700px));

Here we use the repeat() function to create two columns, each column assigned a minimum width of 500px or a maximum width of 700px.

This gives the following output: 

.flex-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(500px, 700px));
  grid-template-rows: repeat(2, 1fr);
}

.flex-container>div {
  white-space: nowrap;
  overflow: hidden;
}
<div class="flex-container">
  <div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
  </div>
  <div>(B) Lorem ipsum dolor sit amet,</div>
  <div>(C) Lorem ipsum dolor sit amet </div>
  <div>(D) Lorem ipsum dolor sit amet </div>
</div>

References:

Upvotes: 1

Related Questions