Arrange an element on top of a table-row element

Currently, I have a collection of elements with the class .message that are displayed as table-row. I need some of these messages to have a red triangle positioned at the bottom center. However, the triangle element cannot be placed directly inside the .message cell.

While achieving this effect is straightforward when the display property of .message is set to block, I'm encountering issues when it is set to table-row. In the provided example, all the triangles are incorrectly positioned and the second cell does not extend to fill the entire row (excluding the .opener element).

I'm seeking help in understanding what I might be overlooking or missing in my implementation.

For further clarification and testing purposes, you can refer to the following JSBin link: Fiddle for the tests (and clarity)

Hovering over the left cells in the example will illustrate why I require table-cell elements. Specifically, I need to leverage the full range of positioning and dimension benefits offered by table-cell elements (ensuring both cells have equal height and the right cell occupies the remaining space on the row).

Compatibility is essential, targeting support for Firefox and Chrome browsers.

htmlcss

Answer №1

To achieve this particular layout, utilizing flexbox is recommended

Check out the FIDDLE example here

CSS

#b {
    width:100%;
    list-style: none;
}
.m {
    display: flex;
    align-items: center;
    align-content: center;
    position: relative;
    background: #789;
    border-top: thin solid #ccc;
}
.u {
    width: 100px;
    float:left;
    opacity:.999;
}
.u:before
{
    content: '';
    width: 100px;
    height: 100%;
    display: block;
    position: absolute;
    top:0;
    z-index:-1;
}
.c {
    overflow: hidden;
    width: calc(100% - 100px);
}

.u:hover:before, .c:hover {
    background: yellow;
}
.opener {
    width: 16px;
    text-align: center;
    cursor: pointer;
    color: red;

    left:0;right:0;
    bottom:0;
    margin: auto;
    z-index: 0;
    position: absolute;
}
.opener:before {
    content:'▼';
    display: block;
}

Answer №2

The issue at hand arises from the fact that elements styled with table-cell, table-row, and similar table-display values are unable to have any positioning applied to them, much like trying to position individual cells or rows in a table.

A workaround, albeit not ideal, is to enclose such elements within a div element with its display property set to block. You can see an example of this in action here.

For more information on this topic, refer to: position - CSS | MDN

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Button that toggles colors

I tried creating a JavaScript code that would change the background color of the body when a button is clicked. However, when I checked the console, it showed an error saying that body.style.background is not a function. Can someone help me identify the ...

javascripthtmlarrays

Ways to prevent the jQuery simple slider from transitioning slides while it is in an invisible state

There is a jQuery slider on my website that behaves strangely when I navigate away from the Chrome browser and return later. It seems to speed through all pending slides quickly when it was not visible. Now, I want the slider to pause when it becomes invi ...

javascripthtmljquerycss

What is the best way to transform Vue JS templates into clean HTML code?

Hello, I've received a request to convert a full VueJS template into pure HTML for use in Angular. While I have access to all of Vue's files and codebase, I'm wondering if there's a fast method to convert these templates into standard ...

htmlangularvue.js

updateStatusCallback function is not defined in the Facebook example using jQuery

I've been trying to incorporate Facebook integration into my HTML code, specifically adding features like Facebook login and sharing functionalities. However, I've hit a roadblock in the process. Even after searching extensively for solutions, I ...

javascriptjqueryhtmlajaxfacebook

Transfer the information of a selected element to a different element

Hello, I am trying to transfer content from a child element to another element. In my HTML setup, there is a hidden div named "DetailsExpanded" and multiple items called "IconWrapper". When an "IconWrapper" is clicked, I want to copy the content of its "I ...

javascriptjqueryhtmlcss

What strategies can be implemented to minimize the impact of HTML code on just one specific div (or any other chosen element)?

<div> <b> some example </div> different content This will make the "different content" bold. Is there a way to restrict the impact of <b> only to the <div> element? I have tried looking for JavaScript solutions online but did ...

htmleffect

Retrieve specific form data with the help of jQuery

In a unique situation, I am dealing with a webpage that contains multiple forms and I am attempting to retrieve the data submitted in each form. Here is an example of the HTML code: <form name="form1"> <input type="text"> <input ty ...

jqueryhtmlforms

Seamless Navigation with Bootstrap Navbar and SmoothScroll

Currently, I have a custom-built navbar that functions perfectly, with full mobile responsiveness. However, I am facing an issue with the nav-item's (headings). The nav-item's direct users to different sections of the same page using #. I have i ...

htmlangulartypescriptbootstrap-4

Retrieve the data from all checkboxes using JavaScript

Whenever the button is clicked, a new category is added to the database and displayed on the same page. However, an issue arises when multiple clicks on the button result in multiple checkboxes being added with the same value. I have implemented a check to ...

javascriptphphtmlmysqlcheckbox

Switching up the menu choices does not result in a shift in the active class, despite attempting the workaround outlined in the following link

Currently, I am working on a website which can be accessed at the following link: . You can find a helpful example link below. How to change active class while click to another link in bootstrap use jquery? Now, I will showcase the code that I have writt ...

javascripthtmljquerycsstwitter-bootstrap

Guide on utilizing slider arrows for enabling Twitter Bootstrap tabnav controls

Previously, I sought help with an issue regarding a Navtab not being highlighted when active. The problem persists despite successfully configuring the slider to swipe to the corresponding slide upon selecting a tab. Specifically, if I manually slide fro ...

htmlcsstwitter-bootstrapbootstrap-carousel

Develop a unique splitter code that utilizes pure javascript and css, allowing users to drag and drop with precision

I am facing an issue with setting the cursor above my drop panel, as it results in a flicker effect. How can I set the cursor for my example to work properly? I have tried multiple different approaches to make this work. Although I am using the provided ...

javascriptcsshtmldrag-and-dropcursor

Elevate the vertical dimension of a <ul> using a TAB

I'm currently working on developing a visually appealing page that will feature 4 tabs. I used https://codepen.io/axelaredz/pen/ipome for the tab navigation, which I think looks fantastic. However, I am facing an issue where I need each section under ...

htmlcsstabsnavigationheight

Collapse the mobile nav bar upon clicking an item

I'm currently facing a challenge with the navigation bar on my event landing page. The issue is that when I open the navbar in mobile view, it does not collapse back after clicking on an item. Instead, it remains open and covers almost 3/4 of the scre ...

javascripthtmlcssbootstrap-4navbar

Modifying the Background Color of a Header in React Native

As a newcomer to React Native, I am attempting to change the background color of the header bar (Navigation Bar). Here are some approaches that I have tried: return ( <View style={styles.container}> <NavigationBar titl ...

cssreactjsreact-native

Chrome fails to read font family correctly

I created a jsfiddle that demonstrates an interesting behavior with setting and reading the font-family using jQuery. When I set the font-family to "Arial . . ." it reads back okay, enclosed in a single set of double quotes. However, when I set the font-fa ...

javascriptjquerycssgoogle-chrome

Bringing in a JavaScript function from a local file into a Node.js

I've been struggling with this issue for a while now and I think it's because of my misunderstanding of how files are linked in node.js. My file structure looks like this: ./main_test.html ./js_test.js ./node_test.js The main_test.html file is ...

javascriptjqueryhtmlnode.js

What is the best way to extract a value from two different HTML identifiers?

Something tells me that this task is quite simple. I just need some guidance on what I might be missing here. All I really want is a basic program that can extract the content from <span id "text"> and paste it into <div id="text2">. funct ...

javascripthtml

Troubleshooting problem with Bootstrap Modal inputs and header tags

When it comes to the button that says data-whatever="Add a recipe", I think it is causing my input placeholders to be overridden, and I'm not sure why. If I remove it, everything works but the h5 header for the new recipe will be blank. <button ...

htmlbootstrap-4bootstrap-modal

The source of the image gets disrupted when it is not on the homepage

My images are stored in the directory images/icons/artist_default.png On the homepage, the image is displayed with this path: http://localhost:7777/images/icons/artist_default.png However, on a user's page like http://localhost:7777/user/giorgio-m ...

htmlcss