I implemented a function which is able to show/hide the content of a table row or column with a sliding animation.
What the code does:
Retrieve all cells of the column (th, td)
Wrap the content of each cell in a <div class="wrapper" />
Animate the width of the wrapper div with jQuery.animate();
After finishing, unwrap the cell contents (remove the div)
The reason why I need the wrapping div is because jQuery can't perform a slide animation on table cells directly - see How to Use slideDown (or show) function on a table row?
See this codepen for the code and demonstration. I removed as much JS code as possible to demonstrate my problem. (You can ignore the html and css, they don't contain relevant information)
Everything works perfectly for rows and columns, in except of one (two?) problems:
When a column is shrinked, the content eventually starts wrapping when there's not enough space left. When this happens, the cell height suddenly increases, resulting in an ugly jump.
When a cell content doesn't need the whole space of it's cell, the show-animation for this content is faster, resulting in ugly output.
What I want to achive is a constantly changing width without affecting the layout. The other columns must not be affected.
Any ideas how I can achieve that?
You could nest your div in another div with overflow hidden:
.crop {
overflow:hidden;
width:100px
}
.inner {
min-width:300px;
width:auto;
}
http://jsfiddle.net/mikatalk/7xwLjp2e/
Related
So I have two tables horizontally next to each other. Everything is aligned initially. However, when the element inside one cell of the left table increases in size, it wraps and increases the cell height. How can I align two tables even with the left cell height increased?
Here is the image of what it looks like:
Without wrapping:
With wrapping:
IMHO you have two options.
Use single table so that entire row will have same height. Or
Use div instead of table because div has overflow option. Refer this link
Update after comment:
If you can use jquery, you could do it on page load. Refer this fiddler
Note: height attributes for both table's row and class name. Un-comment jquery line number 3 and execute.
I have a custom bootstrap tooltip that my customer really likes. It works great on various elements. I added it to a datafield of a gridview table, and it Worked (ed) great -- "until" I added an overflow:hidden div to keep the gridview header row fixed.
Now the the tooltip gets occluded by this header row div. I poked around and saw various workarounds - the only one which kind of worked was to use data-container="body" (attribute) or various derivations of that using javascript which placed the tooltip on top of the header row div (when hovering the datafield of the first row in the gridview).
The problem I have with data-container="body" or { container:'body' }is that it overrides the custom style of the tooltip.
I set the width to 500px and I use !important, ... but when I use data-container="body" the width becomes 200px and the background color changes. I played around with z-index:1000; position:relative; in the css which helped the opacity which I have set to 1 but the width/background color still going to bootstrap default.
What is a workaround for this so I can keep my custom tooltip style?
Well, I came up with one -- non-programmatic workaround (which the client is sort of living with) and that is to add two blank rows to the beginning of the gridview and two more rows to the end of the gridview, and that way the rows with data content the popover tooltip doesn't get clipped now by the hidden div. One other thing I tried was to make the overflow div visible. This also worked to prevent clipping the tooltip, but I lost scrollability of the gridview. Is there a workaround for that?
I got a div where I place a Java Script generated chart. Also, I got another div where I print out a table with chart data results.
One example is:
However, for UX purposes I prefer the table to be placed on the right side of the chart. Or what's more, making it appear on the right side. (I already use jQuery to do a $("#resultados").remove() and $("body").append("<table...</table>).
How can I make the chart div, which markup is <div id="placeholder" style="width:1200px;height:700px"></div> resize down and make place to another generated div to its right side?
So far, thinking about already marked up divs I tried this but I'm not getting the results I want as:
The table div appears first and I want the opposite.
They don't take together the whole outer div width.
Wrap your table with a right floating div by settting float:"right" in its style.
Make placeholder div to float on left (float:left).
To dynamically change its size, use : $("#placeholder").css({"width":"600px");
Finally , add a clear div (clear:both);
Use class instead of inline css chart.
CSS
.first{
width:1200px;
height:700px;
}
.second{
width:400px;
height:200px;
}
Code
$("#placeholder").appendTo("#anotherPlaceholder").toggleClass("first second");
The technique I have used to hide/unhide a div is as follows:
$("#" + sectionId).css("display", ""); // unhide
$("#" + sectionId).css("display", "none"); // hide
This works fine, except I need to make this hiding/unhiding not affect the dimensions on the rest of the page. That is, I do not want the act of hiding the content to shrink all the content around it. In other words, I would prefer to have the dimensions of everything on the page remain as it would be if the div were always visible. I've tried setting the div to zero height, but that doesn't seem to have an effect.
Note: these divs actually reside within a table, hence cells are resizing automatically to fit content (which I do not want).
Update: Ok, half the problem is resolved but note that this is a table not a div that I am trying to hide/unhide. I need the table height to shrink down to zero but maintain its width.
I believe you're looking for the CSS visibility property. http://www.w3schools.com/css/pr_class_visibility.asp
Use visibility='hidden' and visibility='visible' instead:
$("#" + sectionId).css("visibility", "visible"); // unhide
$("#" + sectionId).css("visibility", "hidden"); // hide
This will keep the object physically in the page but it will be "invisible", as opposed to "removing" with display.
More info.
EDIT
As for the new/editted question:
Ok, half the problem is resolved but note that this is a table not a div that I am trying to hide/unhide. I need the table height to shrink down to zero but maintain its width.
Set the table width to a fixed value and the hide the divs with content using display property:
<table style="width: 500px;">
<tr><td>
<div id='div1'>Some content</div>
</td></tr>
</table>
When you now hide the div1 using then code you've used in your question, the table width should stay the same width but shrink in height.
EDIT2: A simple example.
Try setting the visibility instead:
//hide
$('#element').css('visibility', 'hidden');
//show
$('#element').css('visibility', 'visible');
Maybe what I am trying to accomplish is not feasible but the general idea is that when a person clicks a table row, the page dims (like a modal) but leaves that row visible for editing. I tried setting the z-index of the table row itself but it did not work. It will work if I set the table rows position attribute to absolute but that seems to remove the table row from the table completely.
I can only think of more complicated solutions like these:
You'll need 3 transparent gray divs instead of 1. Use the first to gray out the whole page. Set the z-index of the whole table to bring it above that div. Use the 2nd div to gray out everything above your row, and the third to gray out everything below your row, leaving just your row un-grayed.
Gray out the whole page. Create a duplicate table with a single row that you hover above the original table. When you edit this new table, sync those values with the underlying table.
I've successfully done this just now using
div.milk { position:absolute; z-index:2; width:100%; height:100%; opacity:.5; }
tr.raised { position:relative; z-index:3; }
so, in short, position:relative seems to work ?
I must admit, I came here because I still have some weird issues.
but overall it seems to work ?
*-pike
If you're using jQuery, try this:
$("<get the tr>").css("z-index", <value>);
i don't think you'll be able to accomplish your desired effect with z-index. using overlay divs to mask everything around the table row seems like a more workable approach.