Having an issue with ag-grid where I can't vertically align plain text in a div while also using text-overflow: ellipsis. Some suggest using flexbox and align-items: center, but this requires adding another DOM element, which is not feasible for me since I don't want to use cellRendererFramework on every cell. (More info here)
Is there a way to achieve this without adding more elements to the parent div?
Here is a demo link: View Demo Here
Method 1 - Using Parent Container
To achieve the desired result, you need to include a parent container and apply the CSS property
display: flex; align-items: center.parent {
border: 1px solid #000;
display: flex;
align-items: center;
height: 100px;
width: 100px;
}
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<div class="parent">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, esse!</div>
</div>Method 2 - No Parent Container Required
You can also achieve the same result by simply adding the CSS properties
display: table-cell; vertical-align: middle; max-width: 100px;.text {
display: table-cell;
vertical-align: middle;
width: 100px;
max-width: 100px;
height: 100px;
border: 1px solid #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, esse!</div>What is the most effective method to create this style of border using only CSS3? PS: The width should be 100%, matching the size of the screen. ...
Currently, I am developing a VB ASP.NET site using Visual Studio 2012 Express for Web. Within my project, there is a Repeater containing two div elements with the css classes .dnnFormLabel and .dnnFormItem. Here is a snippet of code from the Repeater: < ...
Attempting to retrieve the value of a div using jQuery in Chrome console from this HTML: <div class="col-md-3"> <div class="vou-col" style="cursor: pointer"> <h4>Free Large Bucket</h4> <span class="sku-info">Voucher ...
I'm struggling to make the background color of my search glyph fill the entire box. I want it to resemble this image. However, at the moment, it looks more like this. I can't figure out what's causing the issue. Below is the HTML code I&a ...
I have successfully fetched an array from my REST service and displayed some information from the response on the page. However, I am facing issues populating my mat-table and I'm unsure of the cause. The mat-table was functioning properly in the past ...
I'm struggling with a form that has dynamic fields. After submitting the form, I am getting this URL: Localhost:8000/mysite.com/jobs_form?job="Job1"&job="Job2" But I am unable to retrieve all of them in Django using reques ...
Looking for Table Dimensions for A4 Print I am trying to create a table with specific dimensions for A4 print. The requirements are as follows: The first and last rows of the table must have a margin of 11 mm from the top and bottom edges of the paper Th ...
Imagine I have a DOM structured like this <div className="parent"> <div>child 1</div> <div>child 2</div> </div> If the view is on mobile, I would like the DOM to transform into <div>child 1</ ...
<h1>Custom Calendar and Task Scheduler</h1> <div class="navigation-text">Use the arrows to switch between months</div> <div class="navigation-text">Click on a date to create tasks</div> &l ...
Is it possible to change the default scroll bar style to custom scroll bars using just HTML and CSS, without JavaScript or jQuery? Any tips on how to achieve this, or suggestions on best practices? Thank you in advance! ...
I am looking to replicate the tagging functionality found on StackOverflow when posting a new question. In this case, spans are dynamically added using an input field located next to them. Here is an example: <div> <div id="multiple-span"&g ...
I am attempting to add a background color to the active state of the Nav Pill. Here is the HTML and CSS code I am using: .nav-pills > .nav-item > .nav-link:active{ background: red!important; color: white!important; } .nav-pills > .nav-ite ...
I am facing a challenge in implementing a button within an HTML table that triggers a dropdown menu when clicked, and closes upon another click or when the user clicks outside the menu. Oddly, the button only seems to work once before completely losing fun ...
My navbar component is not displaying the styles correctly as intended. I have a Navbar.module.css file to style it, but after using next-auth for social login, only the buttons remain unstyled while everything else gets styled. The code snippet for impor ...
I'm facing an issue on my HTML page where a div containing users from a chat system database is not displaying correctly. The ul li tag within the parent div is not taking up the full width as expected. Here's how it should look: http://prntscr.c ...
I'm facing an issue with the stacking order of grid items when the browser shrinks. On a regular desktop screen (lg): --------------------------------------------- | col 1 | col 2 | col 3 | --------------------------------------- ...
I encountered an error known as "TemplateSyntaxError." I have created a project that manages tasks, and within this app, I developed a task-board.html page to handle user tasks. This page consists of three sections: 1) Add New Task, 2) In-progress Tasks, a ...
I've encountered similar queries before, but the responses provided were not quite what I needed. While one answer came close to my desired outcome, it led to other complications that I am now facing. My main challenge is maintaining consistent vertic ...
Currently, I am starting to dive into Angular from the ground up. One of my recent tasks involved creating a component called 'mylink' along with a corresponding service. In my attempt to retrieve a string value from the service using 'obse ...
I am experiencing difficulties with replacing a blank space in a webform control label. Below is the code for my label: <label id="Lbl1" runat="server">TEXTA TEXTB</label> My goal is to replace the blank spaces in the labe ...