На позицию i-го класса влияет другой класс - PullRequest
0 голосов
/ 04 августа 2020

Я хочу добавить значок с потрясающим шрифтом рядом с комментариями пользователей. Это будет выглядеть так: enter image description here

This is what it looks like with just html and css together, with nothing commented out/deleted.

html:

     Паук  2 часа а go  Людям нравится комментировать    

css:


.output {
    margin: 30px 0px 0px 50px;
    width: 550px;
}

.output h6,
output i {
    display: inline-block;
}

.output .username {
    margin: 0px 10px 0px 0px;
    text-transform: capitalize;
}

.output .date {
    color: #193B59;
    font-size: 14px;
}

.icon {
    width: 30px;
    height: 30px;
    border: none;
    cursor: pointer;
    float: right;
}

.output p {
    font-size: 14px;
    word-break: break-word;
    white-space: pre-line;
}

Хорошо, я сначала прокомментирую это, чтобы позволить некоторому коду вступить в силу в js: все, что находится между фигурными скобками, закомментировано.

    <div class="commentsWindow">
        <div class="output" id="output">
            {{!-- <h6 class="username">The Spider</h6>
            <h6 class="date">2 hours ago</h6>
            <i class="fas fa-ellipsis-v icon" id="myicon"></i>
            <p class="comments">People like commenting </p> --}}
        </div>
    </div>

Теперь перейдем к моему js файлу: это код, который я использую для вывода комментариев пользователей:

js :

function loadcomments() {
    fetch('http://localhost:5502' + '/get_messages')
        .then(response => {
            if (response.ok) {
                console.log('success')
                console.log(response);
            } else {
                console.log('failure')
            }
            return response.json();
        })
        .then(function(data) {

            io.emit("new_message", data)
            io.on("new_message", function(data) {
                console.log("Server says", data);
                output.innerHTML = '';
                data.forEach(function(user) {

                    var newUser = document.createElement("div");
                    var newName = document.createElement("h6");
                    var newDate = document.createElement("h6");
                    var newMessage = document.createElement("p");
                    var newIcon = document.createElement("i");

                    newUser.className = 'output';
                    newName.className = 'username';
                    newDate.className = 'date';
                    newIcon.setAttribute("class", "fas fa-ellipsis-v icon");
                    newMessage.className = 'comments';

                    var display_username = document.createTextNode(user.username);
                    var display_date = document.createTextNode(user.date);
                    var display_comments = document.createTextNode(user.comments);

                    newName.appendChild(display_username);
                    newDate.appendChild(display_date);
                    newMessage.appendChild(display_comments);

                    newUser.appendChild(newName);
                    newUser.appendChild(newDate);
                    newUser.appendChild(newMessage);
                    newUser.appendChild(newIcon);
                    output.appendChild(newUser);

                    console.log(data);

                }).catch(function(error) {
                    console.log(error)

                })

Теперь это результат, который я получаю: enter image description here

Here's the before and after pics next to each other:

Just html and css: enter image description here

Html, css, and js: введите описание изображения здесь

Этот потрясающий значок шрифта должен быть встроен в имя пользователя и дату, как указано в CSS, но он исчезает из окна, когда я использую js.

Похоже как класс p, также влияет на мой класс i. Не знаю почему.

В коде js вот конкретная часть c, на которую нужно обратить внимание, в отношении класса i и, возможно, также класс p:

js:

  var newUser = document.createElement("div");
                    var newName = document.createElement("h6");
                    var newDate = document.createElement("h6");
                    var newMessage = document.createElement("p");
                    var newIcon = document.createElement("i");

                    newUser.className = 'output';
                    newName.className = 'username';
                    newDate.className = 'date';
                    newIcon.setAttribute("class", "fas fa-ellipsis-v icon");
                    newMessage.className = 'comments';

                    var display_username = document.createTextNode(user.username);
                    var display_date = document.createTextNode(user.date);
                    var display_comments = document.createTextNode(user.comments);

                    newName.appendChild(display_username);
                    newDate.appendChild(display_date);
                    newMessage.appendChild(display_comments);

                    newUser.appendChild(newName);
                    newUser.appendChild(newDate);
                    newUser.appendChild(newMessage);
                    newUser.appendChild(newIcon);
                    output.appendChild(newUser);

Надеюсь, я достаточно ясно сформулировал этот вопрос. Не могу понять, что делаю не так. Заранее спасибо. Я все еще новичок в этом. Приветствуется любая помощь.

Примечание. Этот вопрос был изменен по сравнению с предыдущим, чтобы лучше проиллюстрировать проблему, поэтому некоторые комментарии взяты из исходного вопроса.

Ответы [ 2 ]

1 голос
/ 05 августа 2020

Вы можете добиться этого следующим образом:

  1. Я предлагаю поместить ваш значок внутри элемента h6, чтобы он был встроен в эту строку. newDate.appendChild(newIcon);

  2. Поскольку значок плавает, вам необходимо использовать этот родительский элемент (настройте его в соответствии с вашими потребностями, используйте px или %):

    .date {ширина: 50%; }

var newUser = document.createElement("div");
var newName = document.createElement("h6");
var newDate = document.createElement("h6");
var newMessage = document.createElement("p");
var newIcon = document.createElement("i");

newUser.className = 'output';
newName.className = 'username';
newDate.className = 'date';
newIcon.setAttribute("class", "fa fa-address-book icon");
newMessage.className = 'comments';

var display_username = document.createTextNode("test user");
var display_date = document.createTextNode("2020");
var display_comments = document.createTextNode("test comment");

newName.appendChild(display_username);
newDate.appendChild(display_date);
newMessage.appendChild(display_comments);

newUser.appendChild(newName);
newUser.appendChild(newDate);
newDate.appendChild(newIcon);
newUser.appendChild(newMessage);
output.appendChild(newUser);
.output {
  margin: 30px 0px 0px 50px;
  width: 350px;
}

.output h6,
output i {
  display: inline-block;
}

.output .username {
  margin: 0px 10px 0px 0px;
  text-transform: capitalize;
}

.output .date {
  color: #193B59;
  font-size: 14px;
}
.date{
width: 50%;
}

.icon {
  width: 30px;
  height: 30px;
  border: none;
  cursor: pointer;
  float: right;
}

.output p {
  font-size: 14px;
  word-break: break-word;
  white-space: pre-line;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="commentsWindow">
  <div class="output" id="output">

  </div>
</div>

Также обратите внимание, что вы добавляете дочерний значок после того, как вы уже добавили сообщение и этот нажатый значок ниже, вы можете попробовать просто добавить значок перед массажем (измените порядок appendChild) и посмотрите, работает ли это для вас (элемент h6 имеет поле 32 пикселя, поэтому сделайте это для значка, чтобы он стал «встроенным»):

var newUser = document.createElement("div");
var newName = document.createElement("h6");
var newDate = document.createElement("h6");
var newMessage = document.createElement("p");
var newIcon = document.createElement("i");

newUser.className = 'output';
newName.className = 'username';
newDate.className = 'date';
newIcon.setAttribute("class", "fa fa-address-book icon");
newMessage.className = 'comments';

var display_username = document.createTextNode("test user");
var display_date = document.createTextNode("2020");
var display_comments = document.createTextNode("test comment");

newName.appendChild(display_username);
newDate.appendChild(display_date);
newMessage.appendChild(display_comments);

newUser.appendChild(newName);
newUser.appendChild(newDate);
newUser.appendChild(newIcon);
newUser.appendChild(newMessage);
output.appendChild(newUser);
.output {
  margin: 30px 0px 0px 50px;
  width: 350px;
}

.output h6,
output i {
  display: inline-block;
}

.output .username {
  margin: 0px 10px 0px 0px;
  text-transform: capitalize;
}

.output .date {
  color: #193B59;
  font-size: 14px;
}


.icon {
  width: 30px;
  height: 30px;
  border: none;
  cursor: pointer;
  float: right;
  margin-top: 32px;
}

.output p {
  font-size: 14px;
  word-break: break-word;
  white-space: pre-line;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="commentsWindow">
  <div class="output" id="output">

  </div>
</div>
1 голос
/ 05 августа 2020

Я не уверен, что проблема в том, где вы думаете; но я думаю, это может быть то, что вам нужно?

Изменить;

newIcon.className = 'icon';

быть;

newIcon.className = 'fas fa-ellipsis-v icon';

Я предполагаю, что элементы создаются, но ваш значок FontAwesome не отображается, потому что в вашем коде, создающем элемент, не указаны соответствующие классы FontAwesome.

Глядя на ваш код, вы просто создаете такой элемент;

<i class="icon"></i>

Внося предлагаемые мной изменения, вы создадите такой элемент;

<i class="fas fa-ellipsis-v icon"></i>

ИЗМЕНИТЬ после вашего РЕДАКТИРОВАНИЯ: просмотрите CSS где у вас есть;

.output h6,
output i {
    display: inline-block;
}

Я думаю, вы имеете в виду;

.output h6,
.output i {
    display: inline-block;
}

Согласно моему комментарии, вот JSFiddle , который я собрал. Похоже, что ваш CSS для .output .date {...} тоже может выбрасывать вещи из строя. Таким образом, вы можете добавить к нему margin: 0px так:

.output .date {
    color: #193B59;
    font-size: 14px;
    margin: 0px; /** remove this and watch it go out of line **/
}
...