I have a PHP script that gets data from a database and displays it in a 2 column table. I have a hide/show for each of the results, which extends down, pushing any options below it down too when clicked.
However the results in the column on the other-side also move down.
How do I make it so only the column with the clicked hide/show opens and moves down?
Below is the code I am using to show the hide/show; I thought by adding a .closest('td') may help, but all it does is open the corresponding left or right hide/show div!
$(document).ready(function(){
$(".reveal-arrow").click(function(){
$(this).parents('.template-container').find('.reveal-container').slideToggle();
$(this).toggleClass('flip');
});
});
Update: I have made a simplified fiddle of whats happening here: https://jsfiddle.net/r1bf4odx/18/
As you can see if you click the down arrow on BOX1 it 1 opens down, however BOX 2 also moves down. How do I stop Box 2 moving and stay where it is! Thanks again!
Please bear in mind that I am getting many results from a database!
The issue is that you are using a table, and the default alignment for a table is baseline / middle (see here (SO) for more info).
You can add
td { vertical-align: top; }
to fix the moving boxes
Updated fiddle: https://jsfiddle.net/r1bf4odx/21/
This question is best read with the fiddle open ;). I've got a tables inside a table. The inside grey tables need to be sorted in there own container. So the grey rows can only be moved in the grey table. But the white rows need to move there grey table with them. So you cannot move a white row or a grey table on there own, they are connected.
Here is my fiddle for what I got right now:
fiddle
options = {
helper: (event, ui) ->
children = ui.children()
view = ui.clone()
view.children().each (index) ->
$(#).width(children.eq(index).width())
return view
}
$('#ccc').find('tbody').sortable(options)
I've been cracking my head on this all day but I cannot figure out how to like a grey table to a white row.
With your current html structure this is quite difficult to achieve.
First of all you need two sortables (one to sort big chunks with white headers and second to sort inside grey tables).
You want to be able to move big tables with small ones inside but as these were all inside sibling elements (tr) it was not really possible (so I've added multiple <tbody>s in there).
Anyway here's the working fiddle: https://jsfiddle.net/9vmvjqm4/5/
You still need to exclude thead from being sortable. I don't like CoffeeScript so I left that (add items : ':not(thead)') to options (or sth like that, there are topics how to do that on stackOverflow).
Also, have a look at this: http://johnny.github.io/jquery-sortable/
I have a table using:
<script src="/js/jquery.tablesorter.min.js"></script>
<script src="/js/jquery.tablesorter.widgets.min.js"></script>
The layout of the table looks like this:
When you click the blue edit button on the right the button should disappear and a green check and red X should appear. This allows the row to be edited. It enables the input fields for that row which are originally disabled:
The problem is that whenever I click the buttons that shows or hides the other buttons my table resizes to the left. The Modify row increases in width. Is there a way to stop the dynamic resizing of this Javascript table? I tried using Javascripts show/hide for the buttons and also using a CSS class called hiddenButtons which has display none and hiding the buttons that way but both attempts resized the table.
If you give each td in your final column that has the header "modify" a class and then give that class a defined width of your choice. This should stop happening.
The HTML/Browser is automatically stretching the TDs out to what it believes is even for the content within them. Adding or removing content from a td without a defined width will do this.
Like in this demo
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/nestedviewtemplate/defaultcs.aspx
Except In this demo it's being added as an additional row. (click one of the ">" things and check the page source, it added a new row to the table). If I used this strategy, It would be difficult to sort, using a standard Jquery plugin, like table sorter.
Ideas?
went away and did some thinking about my comment, about finding row height and overlaying the div.. it's so close, but I'm no jQuery whiz, so perhaps someone can help tidy this up
I have it showing/hiding the div in the right position IF the div/row is closed before the next one is opened.. but if you click button 2 while div one is opened is doesn't get the right top position (it gets the position the row was at after being expanded not the original row position), I'm sure there must be a way to get that position while the rows are not expanded and store it??
anyway have at it.. I know it's very long-winded, variable wise, because I can only apply the CSS logic - I don't know enough about js or jquery functions and storing.. also I thought if I explained how I got to my variables and which ones were needed it might help those who do know how to make this better ;)
the input/buttons have no text but they're the click trigger
position() is maybe not the right thing to use, it needs for the div to be able to find the original position of the related row (inside table-wrap div?)
?
here's the Example
You can't. A <div> is not a valid child of <table> or <tbody>. You'll need to use a <tr>.
I don't know how that plugin works, but perhaps there's support for sorting multiple <tbody> elements, which would allow you to group your sets of rows.
That div is inside a td which is hidden until you click the >
Here is a demo: http://jsfiddle.net/maniator/7RLhL/1/
I don't know if you can do that. Putting a tag like inside a table isn't valid (X)HTML, and so probably won't give you the effect you were looking for
If you look at that demo, they're using a second <tr> below the first one with a <td> that spans most of the columns.
You can embed a detail table inside a table cell under each description cell which will be not visible and make it visible on tr click:
http://jsfiddle.net/bouillard/QmK4Z/
As mentioned in other answers, we cannot add a div inside the table without it being in a TD. However, there might be something that can be done to place the div over the row. To have the effect of the div being shown as inside the row, we could increase the height of the row while the div is being shown. Here is the very basic demo. Since the div is not really inside the table, if the table happens to sort, you would probably want to hide the div or relocate it to the new TR location. It would present its own challenges but you could play with it and see if it works for you.
I have an idea. It's really ugly. The only think I could think of doing is before sorting the rows, detach the additional rows(with the div) and use JQuery to store it somehow. Then after the sorting is done reattach the rows(with the div) in the right place(s).
That could, no I should say WILL, get ugly really fast, especially with paging and filtering...
You can use getBoundingClientRect to get the element's position and then set those values to a div css position left and top. Must also take into account the window scroll as getBoundingClientRect will return it relative to the window viewport.
The following example will locate a div named #tooltip under any tr row when hovering over it. I'm using jQuery for convenience but you can translate to vanilla JS easily.
<script>
$("tr").hover(
function () {
const row = this;
const bounds = row.getBoundingClientRect();
tooltip.css({
left: bounds.left + window.scrollX,
top: bounds.bottom + window.scrollY
});
},
function () {}
);
</script>
<table> ... </table>
<div id="#tooltip"> ... </div>
Be sure to make div positioning absolute and also to skip pointer events or the div will block hover events from reaching the table elements.
<style>
#tooltip {
position: absolute;
pointer-events: none;
}
</style>
Good luck!
I have an HTML page that has static tables placed in the page because these never change. I have a main table that houses all the elements to keep everything aligned. This is probably what is causing the problem.
I have the main table with 2 tables within it. Each row in the first inner table, called dropDownTable, usually has up to about 10 rows. dropDownTable is in the following format:
td1: text; td2: select element; td3: text (this part is dynamically updated).
The second table, called showDetails, uses the options from the select element in the rows in dropDownTable to query a database (onchange attribute), get some information and then display each element that is found. The response from the database is up to 150 character strings, usually shorter though.The user then clicks an element in the details that updates the third column in the dropDownTable.
I'm not really sure if this is a JavaScript or HTML problem but each time the showDetails table updates, it pushes the bottom of the main table down. There are 2 buttons at the bottom of the main table that move each time the user changes the select in the second column of dropDownTable.
It very aesthetically displeasing.
Any ideas would be greatly appreciated. I have had this problem before but with other elements.
are you adding more content, thus making the table taller?
I cant quite understand what your problem is exactly, but:
td
{
vertical-align: top;
}
will keep everything in the top of its cell, rather than centering to the tallest column.
You shouldnt be using tables for layout, tables are for tabular data. have a read of this
if you want to fix the heght of the table, do:
table
{
height: 400px; /* replace with your heihgt */
}