4

The application I'm working with has a piece of HTML code styled using flex that is present in multiple places to visualize several pop-up messages. The messages have a closing icon in the upper right corner.

However, depending on the length of the message within the <p> element, the distance between the text and the closing icon changes. For instance, if the text has multiple lines or longer words, the <p> element takes up more space, the distance between the text and the closing icon increases, and I can't figure out why.

Short text example

Long text example

How do I ensure a uniform distance between them?

<div style="display:flex; align-content:stretch;" id="aProductDraftUpdating>
   <p style="margin: 0px; flex:1 1 auto">
      "Editing the product draft continues from the last altered step. 
       Editing the product draft continues from the last altered step."
   </p>
   <i class="icons iconClose" role="link" style="flex:1 1 auto;" onClick="methodThatRemovesTheMessage(aProductDraftUpdating)">
      ::before
   </i>
</div>
Zulfiya
  • 41
  • 3
  • The distance is uniform between the `p` and `i`, it's always the same but the issue is the line break ... so actually you want the get rid of the extra space after line break which is somehow tricky, even impossible – Temani Afif Aug 30 '18 at 08:21
  • related (possbile duplicate) : https://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width – Temani Afif Aug 30 '18 at 08:22
  • @TemaniAfif Thank you for the link! I found some useful answers related to my issue. As you say, it is probably impossible to fix this with css alone, and a JavaScript solution is required. – Zulfiya Aug 30 '18 at 09:10

1 Answers1

-1

You could use position: absolute to place the close icon and add paddind to the right of the alert box. Here is an example:

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.alert {
  position: relative;
  background: #ffffb7;
  padding: 5px 50px 5px 10px;
  z-index: 1;
  margin-bottom: -10px;
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
}

.alert i {
  position: absolute;
  right: 20px;
}

.container {
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="alert">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus dolor magna, a consequat enim fringilla vitae.</p>
  <i class="fas fa-times"></i>
</div>
<div class="container">
  
</div>
Nacorga
  • 507
  • 4
  • 17
  • Thank you, but unfortunately, this doesn't solve the problem. In your example, if you change the length of the word that comes after the line-break, or resize the window, the distance will again change. As illustrated by this fiddle https://jsfiddle.net/6Ldy0gqv/ There's a good answer here that references possible solutions: https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap – Zulfiya Aug 30 '18 at 09:14
  • With the property `word-break: break-all` you can have more control but it breaks the last word in two if it reaches the maximum width and there is a line break. – Nacorga Aug 30 '18 at 13:08