Need a css related guide

usere9YC 0
Viewed 50

I need help with the Stylesheet, working on an emojis reaction feature which for now works pretty well

Here's the [codepen](https://codepen.io/kko1/pen/YzLxBEa?editors=1100)

In the above example, the emoji is center of the box, and on hover, a panel of emoji opens, and clicked emoji (highlighted the span with a red border) is added near the main emoji ()

I want () the main emoji on the end of the box like image

and clicked emoji on starting of the box (just like we have reacted emoji listing on any messages like Instagram app) (in above image blue square mark after animated)

I have spent a few hours but this is very confusing and I'd really appreciate some help!

EDIT:

one more thing I just noticed, on hovering on the panel, the emoji is being viewed but I need it when hovering on () then and then the panel would be shown

css html
1 Answers

I saw that you tried position absolute but commented it out, this was probably because it positioned it at the bottom of the screen, this is because you didn't give a position relative to the main row where the review and emojis are positioned in, after setting position relative to the parent and giving both emoji functions a position: absolute and a bottom, top, left, right they are positioned in the way I think you wanted them.

Things I've edited;

The main comment row:

.notice-row {
  position: relative;
  padding-bottom: 50px;
  ..
}

The Emoji span:

.emoji-wrapper {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

The reacted emoji:

.mySpanClass {
  font-size: 24px;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

Made your panel click to open instead of :hover by using this function onclick

function TogglePanel() {
  let e = document.getElementById("emoji-panel");
  if (e.style.opacity == "1") {
    e.style.opacity = 0;
  } else {
    e.style.opacity = "1";
  }
}

CodePen

FUZIION0
Related