CODEWITHSUNDEEP
htmlcss
guy
guy

Reputation: 111

position child above parent

i have the following template:

<div class="messages">
  <ul class='messages__list'> // display: flex ******EDIT****** flex-direction: column
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">
      <span class="message-full-date">date</span> // position: fixed, left: 45%;
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
  </ul>
</div>

i want to position the span (full-date) in a "row" above the "li" - so they won't be positioned on top of each other on small screens. is there a way to do it?

i tried to position the other elements in a different way (absolute, relative, fixed), and to display them differently but it didn't work for me.

i also tried to use the css "::after"/"::before' and also failed..

Upvotes: 0

Views: 49

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106058

You ould relay on position relative/absolute to use the parent as a reference.

example :

.messages__list__item {
  position: relative;
  margin-top: 1.2em;
}

.message-full-date {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  width: max-content;
  margin: auto;
}
.flex {display:flex;}
.flex li {flex:1}

/* see us */
li , .message-full-date{border:solid 1px;}
<div class="messages">
  <ul class='messages__list'>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">
      <span class="message-full-date">date</span>
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">
      <span class="message-full-date">date</span>
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>

  </ul>
</div>

<div class="messages">
  <ul class='messages__list flex '>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">
      <span class="message-full-date">date</span>
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">
      <span class="message-full-date">date</span>
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">
      <span class="message-full-date">date</span>
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">
      <span class="message-full-date">date</span>
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">
      <span class="message-full-date">date</span>
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
  </ul>
</div>

you could also use the ::before pseudo to generate this container if a date has to be shown 

li.message-full-date:not([data-date=""]) {
  margin: 2px 0 0 0;/* possibly useful */
}
.flex li.message-full-date:not([data-date=""]) {
  margin: 0 0 0 2px ;/* possibly useful */
}

.message-full-date:not([data-date=""])::before {
  content: 'date :'attr(data-date);
  display: block;
  width: max-content;
  margin: auto;
}

.flex {
  display: flex;
}

.flex li {
  flex: 1
}


/* see us */

li,
.message-full-date::before {
  border: solid 1px;
}
<div class="messages">
  <ul class='messages__list'>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item  message-full-date" data-date="01/01/01">
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>

  </ul>
</div>

<div class="messages">
  <ul class='messages__list flex'>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item  message-full-date" data-date="01/01/01">
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item  message-full-date" data-date="">
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item  message-full-date" data-date="01/02/01">
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions