Is there a way to detect if the content of the fourth td overflows from the second td?
I am looking for a method to determine which td has overflowed text and identify which td's text is overflowing.
What approach can be used to determine which td is causing overflow in another td?
You can find an example on this fiddle
Thank you in advance.
Upon reviewing your code, I noticed that the overflow was not displaying as ellipsis on your fiddle. It is generally not recommended to display overflow text and check if a td container contains other td content. To resolve this issue, you can try implementing the following code snippet:
table{
border-collapse: collapse;
table-layout:fixed;
width:500px;
}
td{
border: 2px solid black;
width:25%;
height:20px;
padding:0px;
}
td > div{ /* ADDED */
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
}<div>
<table>
<tr>
<td></td>
<td>
<div>Second cell text overflow to Third cell</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>Important Note:
To ensure the text-overflow property works properly, I included a div element inside the td element since it does not directly apply to td elements.
Revised Response
Originally, the solution addressed adjacent cells. To identify and gather all potentially impacted cells, a new methodology is suggested. It should be noted that this function is designed for cells of equal dimensions. If handling varying cell sizes is required, adjustments to the calculation of affected cells will be necessary.
$(function(){
var self, index, affectedCells;
// iterate through all cells...
$('td').each(function() {
// check if the cell's text is too long....
if(this.scrollWidth > $(this).outerWidth()) {
// when the text in the cell is too long...
self = $(this);
self.addClass('has_overflow');
// obtain current index
index = self.closest('tr').find('td').index(self);
// determine the number of affected cells
affectedCells = Math.ceil(this.scrollWidth / self.outerWidth()) - 1;
// highlight all affected cells...
for(var i= 1; i <= affectedCells; i++) {
self.closest('tr')
.find('td:eq('+(index+ i)+')')
.addClass('is_overflown');
}
}
});
});
The updated version can be found in this revised fiddle.
To enhance the readability, it is advised to eliminate white-space:nowrap; from the CSS.
Instead, utilize the following CSS for 'td' elements:
td{
border: 2px solid black;
-webkit-user-select:none;
width:25%;
height:20px;
overflow:visible;
text-overflow:ellipsis;
padding:0px;
}
Feel free to inform me if this solution works for you!
I've utilized the focusable attribute to ensure SVG elements receive focus within an HTML document. My goal is to navigate through SVG elements in the SVG tag using the TAB key, as indicated in this resource (http://www.w3.org/TR/SVGTiny12/interact.h ...
My form tag is set up like this: <form data-id="213" method="post" onsubmit="javascript: startAjax(); return false;"> <input type="submit" value="submit"> </form> When I submit the form, an ajax script runs to validate some information ...
After clicking on the forgot password link, I want to display the password change form. However, I'm facing issues with calling the API to update the user's password. Below are the files I'm utilizing to develop the API, trigger events, mana ...
I'm looking to implement a feature that displays when a user was last seen online, similar to how WhatsApp does it. I am using XMPP and Angular for this project. After making an XMPP request, I received the user's last seen time in seconds. Now, ...
I have the following working code: <script> function displayUserData(str) { if (str=="") { document.getElementById("userDetails").innerHTML=""; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLH ...
After spending hours practicing creating a navbar using Bootstrap 3.3.7, I've hit a roadblock - the dropdown is not working when clicked on. It's frustrating because I have double-checked all my scripts and ensured that I have the latest version ...
What is the best way to reference the same variable name inside a function in JavaScript? var example = "Hello"; console.log("outside function: " + example) function modifyVariable() { var example = "World!"; console.log("inside function: " + ex ...
Is there a way to write more concisely, maybe even in a single line? this.xxx = smt.filter(item => item.Id === this.smtStatus.ONE); this.yyy = smt.filter(item => item.Id === this.smtStatus.TWO); this.zzz = smt.filter(item => item.Id == ...
I am working on a function that allows users to access the content of a tab without causing the page to reload. Initially, I tried using something like $( "#tab1" ).click(function() { $("#content").load("tab1.html #content > *"); }); but unfortun ...
https://i.stack.imgur.com/WKOXT.png Currently, I have 4 lines and the 5th line in the current input field. This is my React code snippet: import { FC, useEffect, useState } from "react"; interface BlogWitterProps {} const BlogWitter: FC<B ...
I'm currently developing a new website with PHP, and I’m facing an issue where all the URL links are directing users to 'localhost' instead of the correct IP address. This is causing a problem as they should be directed to the IP, not &apo ...
Currently, I am experimenting with sending data from a nodejs + express server to the front-end static files. The objective is for JavaScript (allScripts.js) on the front-end to process this data. At this stage, my aim is to log the data to the console to ...
I have a PHP array containing date strings and I want to validate them using a native HTML5 date input element. To achieve this, I have converted the date array into a JSON object for use with JavaScript: <script> var date_array = <?php echo json ...
I have a challenge where I need to create a program that can connect to a website and click on all buttons it finds. The catch is that the buttons are identical in text, link, and CSS properties. Imagine this scenario: <content> <line1> & ...
I've encountered an issue where I am unable to add a class to div/form elements using the classList.add method. Interestingly, this method works perfectly fine for other elements like input or button. However, when it comes to the div and form element ...
Currently, I am working with Symfony and AngularJs 1.6.8 along with Symfony 3.4. Below is the configuration setup that I have: base.html.twig <html lang="en" data-ng-app="CeocApp" ng-controller="CeocController"> //css for the app <link id="ng ...
It seems like the infinite scrolling feature in ng-grid is not exactly infinite, but it's the closest comparison I could come up with for what I am observing. In our application, we are using ng-grid to display data in a table with approximately 170 ...
In my current Vue project, I have set up multiple link cards (<a class='card'></a>) inside a "deck" container (<div class='deck'></div>). The implementation for these elements is relatively straightforward: <s ...
Greetings! I am facing a challenge with an array of objects like the one shown below: const data = [ {day: "Monday", to: "12.00", from: "15.00"}, {day: "Monday", to: "18.00", from: "22.00"}, {day: ...
I am currently facing an issue with the configurations on my asmx page. The code is set up like this: using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; using System.Web.Script.Serialization; using Syst ...