How do I make this layout possible?

[Immortal2004]

I have tried many, many times to make this possible but can't figure out how to get the comments box and button to be inline with the reactions emojis and I can't get it working. It has frustrated me so much that I have thought of quitting the project but I'm hoping I won't have to and I'm hoping that I'll get some help here.

My code is below and an image is below as well:

 <style>
       .custom-context-menu {
        display: none;
        position: absolute;
        z-index: 1000;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .custom-context-menu a {
        color: black;
        text-align: left;
        padding: 12px;
        text-decoration: none;
        display: block;
        border-radius: 0; /* Added this line */
    }

        </style>
        <script>

function copyToClipboard(text) {
    const textArea = document.createElement('textarea');
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
}
          // Add unique class to each video element
$('.context-video').addClass('context-video-' + ".$row['id'].");

$('.context-video-' + ".$row['id'].").contextmenu(function(e) {
    e.preventDefault();
    var video = $(this)[0];
    var contextMenu = $('#contextMenu".$row['id']."');
    contextMenu.empty();

    contextMenu.append(\"<a href='https://raxie.42web.io/".$fileURL."' title='Click to download ".$fileURL."' id='download-link' download><img src='save.png' style='width:19px; margin-bottom:-3px'> &nbsp;Download</a>\");
    contextMenu.css({ top: e.pageY + 'px', left: e.pageX + 'px' }).fadeIn(200);

    $(document).click(function() {
        contextMenu.fadeOut(200);
    });

     $('.share-link').click(function(e) {
        e.preventDefault();
        // Copy the link to the clipboard when the 'Share' link is clicked
        copyToClipboard('https://raxie.42web.io/".$fileURL."');
    });
    
});
        </script>
";
      } else {
            // Display Image
            echo "
            <div class='image-container'>
<div class='reactions-overlay'>
  <form style='display:inline; margin-right:6px' class='reaction-form'>
                <input type='hidden' id='reactionSadCount-{$row['id']}' value='0'>
                <button class='reaction-btn' onclick='addReaction('{$row['id']}', 'Sad');'>
                    <img src='sads-icon.png' title='Sad' alt='Sad' style='width:20px'>
                    <span class='counter' id='reactionSadCounter-{$row['id']}'>0</span>
                    </button>
                    </form>
                    <form style='display:inline; margin-right:6px' class='reaction-form'>
                    <input type='hidden' id='reactionSadCount-{$row['id']}' value='0'>
                    <button class='reaction-btn' onclick='addReaction('{$row['id']}', 'Angry');'>
                    <img src='mad-icon.png' title='Angry' alt='Angry' style='width:20px'>
                    <span class='counter' id='reactionSadCounter-{$row['id']}'>0</span>
                    </button>
                    </form>
                    <form style='display:inline; margin-right:6px' class='reaction-form'>
                    <input type='hidden' id='reactionSadCount-{$row['id']}' value='0'>
                    <button class='reaction-btn' onclick='addReaction('{$row['id']}', 'Laughing');'>
                    <img src='happy-icon.png' title='Laughing' alt='Laugh' style='width:20px'>
                    <span class='counter' id='reactionSadCounter-{$row['id']}'>0</span>
                    </button>
                    </form>
                    <form style='display:inline; margin-right:6px' class='reaction-form'>
                    <input type='hidden' id='reactionSadCount-{$row['id']}' value='0'>
                    <button class='reaction-btn' onclick='addReaction('{$row['id']}', 'LOL');'>
                    <img src='lols-icon.png' title='LOL' alt='LOLs' style='width:20px'>
                    <span class='counter' id='reactionSadCounter-{$row['id']}'>0</span>
                    </button>
                    </form>
                    <form style='display:inline; margin-right:6px' class='reaction-form'>
                    <input type='hidden' id='reactionSadCount-{$row['id']}' value='0'>
                    <button class='reaction-btn' onclick='addReaction('{$row['id']}', 'Love it');'>
                    <img src='love-it.png' title='Love it!' alt='Love It' style='width:20px'>
                    <span class='counter' id='reactionSadCounter-{$row['id']}'>0</span>
                    </button>
                    </form>
                    <form style='display:inline; margin-right:6px' class='reaction-form'>
                    <input type='hidden' id='reactionSadCount-{$row['id']}' value='0'>
                    <button class='reaction-btn' onclick='addReaction('{$row['id']}', 'Amazed');'>
                    <img src='amazed-icon.png' title='Amazing!' alt='Amazed' style='width:20px'>
                    <span class='counter' id='reactionSadCounter-{$row['id']}'>0</span>
                    </button>
                    </form>
                    <form style='display:inline; margin-right:6px' class='reaction-form'>
                    <input type='hidden' id='reactionSadCount-{$row['id']}' value='0'>
                    <button class='reaction-btn' onclick='addReaction('{$row['id']}', 'Disgusted');'>
                    <img src='sick-icons.png' title='Disgusted' alt='Amazed' style='width:20px'>
                    <span class='counter' id='reactionSadCounter-{$row['id']}'>0</span>
                    </button>
                </form>
                
            </div>
            <div class='black-gradient'>
            <form method='post' class='reaction-form' style='>
<input type='hidden' name='title' id='".$row['title']."' value='".$row['title']."'>
  <input type='hidden' id='username' style='background-color:rgba(255, 255, 255, 0.2); border:2px solid rgba(255, 255, 255, 0.3)' value='".$_SESSION['username']."' name='username' required>
  <input type='hidden' name='postId' id='".$row['id']."' value='".$row['id']."' />
      <input type='text' id='comment-".$row['id']."' class='add-comment' placeholder='Add Comment...' style='padding:6px 10px; margin-right:-200px; color:white; font-weight:600; font-size:12px; background-color:rgba(255, 255, 255, 0.3); border:2px solid rgba(255, 255, 255, 0.7); resize:none; border-radius:50px; outline:none; font-family:Montserrat, sans-serif; width:40%' name='comment' required>
      <button class='postBtn' onclick='return addComment(".$row['id'].");' style='background-color:white; padding:6px 10px; font-weight:600; float:right; margin-top:-4px; font-size:12px; font-family:Montserrat, sans-serif; border-radius:50px'>Add</button>
</form>
            </div>
            <img src='" . $fileURL . "' could not load' preload='metadata' title='You are viewing " . $row['title'] . "' style='width:100%; border-top:2px solid rgba(255, 255, 255, 0.3)'/>
            </div>
            ";
      }
      
} else {
            // Display default image
            echo "<img src='save.png' preload='metadata' style='width:0%'/>";
        }

 

[simong1993]

To get the comment box and button to align with the reaction emojis, you can try using a flexbox layout which is a great tool for creating complex layouts with CSS. The flexbox layout allows you to align elements side by side and manage the space distribution between them easily.

I'll guide you through updating your code to use flexbox. Below, I've modified the HTML and CSS parts of your code that deal with the reaction and comment section. Note that PHP variables and session checks are left out for clarity.

Update your CSS with the following:

.reactions-overlay {
  display: flex; /* Make this a flex container */
  flex-wrap: wrap; /* Allow wrapping of items */
  align-items: center; /* Center align vertically */
  gap: 6px; /* Provide some gap between elements */
}

.reaction-form {
  display: flex; /* Makes the form also a flex container */
  align-items: center; /* Center align form items */
  margin-right: 6px; /* Maintain your margin on the right */
}

.add-comment-section {
  display: flex; /* Align comment input and button */
  align-items: center; /* Center align */
  gap: 10px; /* Space between input and button */
  margin-top: 10px; /* Space from the reactions above, adjust as needed */
}

.add-comment {
  flex-grow: 1; /* Allow input to take available space */
  border-radius: 50px;
  padding: 6px 10px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: white;
  outline: none;
  font-family: 'Montserrat', sans-serif;
}

.postBtn {
  padding: 6px 10px;
  background-color: white;
  font-weight: 600;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  border-radius: 50px;
}

Update your HTML structure like this:

<div class='image-container'>
  <div class='reactions-overlay'>
    <!-- Reaction buttons here (No changes needed) -->
  </div>
 
  <div class='add-comment-section'>
    <input type='text' id='comment-{$row['id']}' class='add-comment' placeholder='Add Comment...' name='comment' required>
    <button class='postBtn' onclick='return addComment({$row['id']});'>Add</button>
  </div>
 
  <img src='{$fileURL}' alt='Image could not load' title='You are viewing {$row['title']}' style='width:100%; border-top:2px solid rgba(255, 255, 255, 0.3)'/>
</div>

This should align your comments box and button with your reactions. Note that you might need to adjust the margin-top value in the .add-comment-section class to get the spacing just right, depending on the rest of your layout.

Remember to replace {$row['id']}, {$fileURL}, and {$row['title']} with the proper PHP syntax as they were placeholders for clarity in the HTML structure.

Also, ensure that your onclick handlers for the reaction buttons and comment button return false or use event.preventDefault() to prevent the page from reloading when the buttons are clicked, which might disrupt the user experience.

 

[arabailey]

To get the comment box and button to align with the reaction emojis, you can try using a flexbox layout which is a great tool for creating complex layouts with CSS. The flexbox layout allows you to align elements side by side and manage the space distribution between them easily.

I'll guide you through updating your code to use flexbox. Below, I've modified the HTML and CSS parts of your code that deal with the reaction and comment section. Note that PHP variables and session checks are left out for clarity.

Update your CSS with the following:

.reactions-overlay {
  display: flex; /* Make this a flex container */
  flex-wrap: wrap; /* Allow wrapping of items */
  align-items: center; /* Center align vertically */
  gap: 6px; /* Provide some gap between elements */
}

.reaction-form {
  display: flex; /* Makes the form also a flex container */
  align-items: center; /* Center align form items */
  margin-right: 6px; /* Maintain your margin on the right */
}

.add-comment-section {
  display: flex; /* Align comment input and button */
  align-items: center; /* Center align */
  gap: 10px; /* Space between input and button */
  margin-top: 10px; /* Space from the reactions above, adjust as needed */
}

.add-comment {
  flex-grow: 1; /* Allow input to take available space */
  border-radius: 50px;
  padding: 6px 10px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: white;
  outline: none;
  font-family: 'Montserrat', sans-serif;
}

.postBtn {
  padding: 6px 10px;
  background-color: white;
  font-weight: 600;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  border-radius: 50px;
}

Update your HTML structure like this:

<div class='image-container'>
  <div class='reactions-overlay'>
    <!-- Reaction buttons here (No changes needed) -->
  </div>
 
  <div class='add-comment-section'>
    <input type='text' id='comment-{$row['id']}' class='add-comment' placeholder='Add Comment...' name='comment' required>
    <button class='postBtn' onclick='return addComment({$row['id']});'>Add</button>
  </div>
 
  <img src='{$fileURL}' alt='Image could not load' title='You are viewing {$row['title']}' style='width:100%; border-top:2px solid rgba(255, 255, 255, 0.3)'/>
</div>

This should align your comments box and button with your reactions. Note that you might need to adjust the margin-top value in the .add-comment-section class to get the spacing just right, depending on the rest of your layout.

Remember to replace {$row['id']}, {$fileURL}, and {$row['title']} with the proper PHP syntax as they were placeholders for clarity in the HTML structure.

Also, ensure that your onclick handlers for the reaction buttons and comment button return false or use event.preventDefault() to prevent the page from reloading when the buttons are clicked, which might disrupt the user experience.

This is an awesome response! Thanks so much for the help.

Cool beans