I'm having a problem building tooltips for elements inside an html table. Basically I have this:
Table1
a b
c d
Table2
a b
c d
Every element (a,b,c,d) is composed of an image and an empty paragraph which will host the description. Every image has a function, onMouseOver=showDescription(idParagraphToBeShowed, Text), which shows the description of the image when you hover the mouse. The <td> elements have the CSS attribute:
position: relative
and the paragraphs have:
position: absolute
text-align: center
z-index: 1
In this way I'm able to center the description with respect to the image on each cell of the table.
All works perfectly, the only (big) problem is that is I hover (for example) on the cell c, Table1 the description follows on the cell b instead of going beyond the table covering Table2 and its cells. This is of course an extremely nasty bug.
So, how can I 'allow' the description to go over other elements outside its container?
Related
I'm trying to create Table Rows in a Table that can expand by clicking on them (individually).
For example, if I would click on the specified area in the picture below, a Segment/Container (some sort of area) would drop down with content inside.
I've tried a solution that is mentioned in this thread, but the underlying problem is that every element under a Table Row/Cell is subject to the rules and boundaries of the Table HeaderCell. So if I for example try to create a Table Row with a Segment under it, the result will look like this:
As you can see the Segment is inside the new Row but is limited to the size of the HeaderCell.
When doing this I also get this error:
validateDOMNesting(...): <div> cannot appear as a child of <tr>.
in div (created by Segment)
It seems that Segment under Table Row is therefore a prohibited element structure.
Any idea on how the element structure should look to create some kind of area under a Table Row?
The the warning of a <div> not being allowed as a child of a table row is telling you that it is not valid HTML. That is true whether you are using Semantic UI React or plain HTML.
I'd recommend rendering another row below the row you have in your table already. Set a column inside of that row which spans all of the columns. Now you have a container which you can put other UI inside if you want to. You can customize the style of the wide cell if you need to for some reason.
Then you can set a toggle state on the clickable area of your table. You'll probably want to put the click events on the contents of the cells and not the cells themselves.
I threw together a quick Codepen showing how this would work. This gives you a working concept that you can modify based on your use case.
https://codesandbox.io/s/serene-water-ikco9?file=/example.js
I am creating a test transcipt page with 2 tables (so far) and there is this cell line on the bottom table to the left (as pointed out with arrows) that will only align, if the table data on the right is misaligned (as pointed out with the orange line)
If I change the padding-left property on the table data on the bottom table (Example of table data "A", "E", etc.) to align with the table data above, the left line will misalign shown here:
Is there a way where I can have both lines on the left align as shown in the very first image but also having the table data be aligned as shown in the last image?
I found a way to get the table data and the cell lines to align without looking at those eight "2"s.
On the word "Geometry" I added 2 divs one before it and one after.
I put four "2"s in each div and gave each div the same class name.
In external CSS I set two properties:
.HiddenText
{
display: inline;
color: #ffffff;
}
That way the table header is center, the table data is center, the 2 lines are aligned and there aren't any ugly "2"s to look at.
Image:
https://imgur.com/a/gxiVZdo
Let me know if y'all need more code to understand this.
If you want to get the grades data at the center in that column then use <center> tag at every data of grades like: <td><center>A</center></td> it's the easiest way of doing this. If that's not the case then, there are many ways of doing this, so it's on you which way you are working. So, please do share your code.
In one of my pages, I am using an example of editable html table from this link: http://mrbool.com/how-to-create-an-editable-html-table-with-jquery/27425, which works without any issues and when I click on a cell in the table, it changes it to text box.
However, I had to change the layout of my page where, I had to place the sample mentioned above within another html table (nested).
Now the problem is when I click on the cell, it does not identify the child table, which has the data and I want to click but it clicks on the cell of the parent table, which in this case is the parent table, and holds 2 different tables.
So, what I want you help with is:
Get a method to identify the cell of the child table when it is clicked
Or
Some way so align two tables on my page to be aligned side by side. Currently I am using the parent table to align my other 2 tables to sit side by side.
if the second option is easier to achieve then, I don't have to change much.
Any suggestions?
If you're using a parent table element to layout elements on your page, just know that this is a deprecated unsemantic practice, as table elements are for tabulating data. You should use the CSS float property, which is the convention, see CSS Floats 101 ยท An A List Apart Article and w3schools.com
Refactoring out that parent table should fix your problem. Otherwise you can fix it through modifying the selector in your JavaScript and by assigning the edittable td elements with a class (eg. edittable-cell) so you're not assigning event listeners to other tables' td elements unnecessarily and causing unwanted behaviour elsewhere.
JavaScript
// Instead of the 'td' selector
$("td").dblclick(function() {
// .. your code here
});
// Use a more specific selector, eg.:
$('.edittable-cell').dblclick(function() {
// .. your code here
});
If you are semantically nesting tables of data and/or still have this issue, you can try preventing the event from bubbling up to its parent elements.
JavaScript
$(".edittable-cell").dblclick(function(event) {
event.stopPropagation();
// .. your code here
});
simplified, i have three elements A, B and C. B and C are together in a div. if there is enough horizontal space (browser window wide enough) i want them displayed as
A B C
trivial so far. if the window gets smaller, i want them to wrap like this:
A
B C
i solved this by giving the div a style.whiteSpace = "nowrap".
the problem is, that B C now simply wont wrap any more, even if there is not enough space to display them. when the window gets even smaller, i want this to be displayed as
A
B
C
so what i am looking for is kind of a softer version of 'nowrap' which prevents wrapping if there is room to evade to, but allows wrapping if not.
EDIT:
a reply solved the above by making everything float: http://jsfiddle.net/nF4k5/6/
this made me realize that my simplification went too far. actually in my application A is a text and has wrapping in itself, so will sometimes fill the whole width. B and C can be imagined as single words that should appear
a) together in the last line of text A or if they wont fit there together
b) on a new line or if that line is too short
c) on two lines.
i made an example to play around with: http://jsfiddle.net/nF4k5/5/
ever smaller screens should result in:
A A A A B C
A A A A
B C
A A A
A B C
A A
A A
B C
A
A
A
A
B
C
it would be especially nice if the solution didnt involve making changes to A, like my adding of nowrap to the div around B C, which doesnt work.
EDIT:
solution: instead of giving the wrapper of B and C a whiteSpace="nowrap" i give it a display="inline-block".
put A in div X , B and C in Y. Float X and Y to left.
Whenever width is smaller than width of X+Y, Y will go down.
Inside Y : put B in div sonOfX, put C in sonOfY, Float sonOfX and sonOfY to left.
Whenever width is smaller than width of sonOfX+sonOfY , sonOfY will go down.
here you go - http://jsfiddle.net/nF4k5/
This should do it: http://jsfiddle.net/nF4k5/7/ for your new question
Since you said these are elements, I'm assuming you mean HTML elements, right? If that's the case, just float them. That's the natural behavior of floats.
It is nice in word processors to create short-term column layouts with documents by using tab key with the defined anchors across the top instead of using tables because you can run overlaps like this.
L R
column a row 1 column a row two
this is the first column! on the right
This allows for overlap, or naturally spanning columns without the need for so much structure. Great when you don't need borders.
Can this layout be done in HTML? I know a tabbed layout can be accomplished on a webpage, what I don't know is if you can set the column locations like you can in StarOffice/LibreOffice/OpenOffice Text or in Microsoft Word.
Using div tags with the float: left and float: right styles, you can achieve this type of structure.