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.
Related
I am building a table with user selected columns. The user has 2 different view options. 1 with everything contained in the body with a scroll bar and 1 with everything expanded and sticky headers. The user can click a button to expand the table. I am using Jquery to add a class to the user table to expand it.
Normal Table -
Expanded Table -
The issue I am having is that if only a couple of columns are selected and the user is in expanded view it looks really strange.
What I would like to do is if the table's width is smaller that the body(white background) then remove the expanded class and revert to normal view.
I have tried
if (window.getComputedStyle(document.getElementById('userTable')).width <= window.getComputedStyle(document.getElementsByClassName('siteBody')[0]).width) {
$('#userTable').removeClass('isExpanded');
$('.siteBody').removeClass('expandContainer');
}
Any help would be awesome! Thanks in advance and stay safe.
I think your code should work with this small change:
if (window.getComputedStyle(document.getElementById('userTable')).width <= window.getComputedStyle(document.getElementsByClassName('siteBody')[0]).width) {
$("#userTable").removeClass('isExpanded');
$('.siteBody').removeClass('expandContainer');
}
You have to put the jQuery selector #userTable within quotes, otherwise jQuery would not be able to figure out which element to perform the removeClass action for.
I am using bootstrap 4.0.0 collapse to hide and reveal a bootstrap "row". The row contains four columns - "col-md-3" - of buttons. This row is laying out just as I want it too until I add the "collapse" class, which then causes all the cols inside the row to stack like block elements.
Is this a known thing, that you can't put a row, or complex elements to be collapsed?
Below are two screenshots of before and after - with the element html visible on the :Before
After:bad
well the col-- css is a flexible container, that has padding and margin settings that change with screen size. There will be some elements that will be blank depending on screen size. When I build a menu I use fixed elements inside the collapse using ul and li tags like you would a nav bar. I have used the navbar code, then override colors inline by setting style attributes in the html tag. Also, you can dynamically insert display:none in an element via jquery or java might give you a better effect (which I use from time to time instead of the collapse routine bootstrap has set up.. ). You can also play with inserting offset-md-* class in if you just need to offset a div container. But I use that for centering a responsive div like a login screen.
What I have:
An html table which can be dynamically enlarged by clicking two buttons: to add row and column.
two one-row and one-column tables. One above and one to the left side of the table. These two tables are expanded simultaneously with the main table. When I add new row, left table ads new cell. When I add new column, top table ads new cell;
two mentioned tables are hidden.
What I need:
when I hover over a particular cell in main table, it(hovering) should trigger appearance of relevant cells in tables above and to the left. For example, if I hover over cell in row 2, column 2(of the main table) it should show cell 2 in top table and cell 2 in left table.
So I need somehow to connect selected cell with the same cells in other tables and show them on hover.
And I need to be able to move the pointer on the appeared cell to click it (it should not disappear when I move cursor from the main table to this cell)
The harder version of what I need supposes that hidden cells will not appear if only 1 row or column are left in the main table.
It will look like this:
Picture of the task
Since CSS allows to select on hover only elements that are inside one div or are siblings, I assume that this can be done only with JQuery.
I am using this code to show an entire hidden table on hover over the main table:
$('#my-table').hover(function() {
$('#dell-row').removeClass('hoverstate');
}, function() {
$('#dell-row').addClass('hoverstate');
});
Now I think that I need to replace #my-table with the selector of the cell in #my-table table and #dell-row with the selector of the corresponding cell in #dell-row table. Any ideas how I can do this?
I can not indicate static coordinates of the cells because the table is dynamically changing.
Please take a look at the working demo with all the html, css and JS code here.
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 have a menu bar that I want to control the visibility of DIV's featuring varied content. Currently the DIV's visiblity and invisibility is controlled but clicking on the same button. What I want to do is enable any button selected in the menu to make the previous DIV invisible and replace it with the selected DIV's visibility.
Is this possible???
The script that I'm using to call up the DIV is as follows:
<"javascript:unhide('unique DIV id goes here');">
Any help appreciated!
Thanks!
I think you need the display property. Some general stuff:
If you want is to hide - visibility: hidden \ visible
If you want to replace - display: none \ block
The difference is that in display the element stops taking up space in the page, and in visibility they do take space, but you don't see them.
So try this:
function unhide(id){
document.getElementById(id).display = 'none';
}