I have a table (rendered using datatables.js) that shows some information.
When a user clicks on a button in the row, i open (which add a new tr) to the table.
I then show some fields in the new row including an confirm/cancel button.
What I'm trying to do is make it so that I can keep the user input on the row and disable everything with a given parent div, excluding the new row.
I can only think of using z-index, making the tr a high z-index and adding a new div to the parent position:absolute, at 0,0. Is that the correct way to go about it? Is giving tr a high z index correct?
using HTML5/CSS3 (Jquery)
thanks
sam
This can be done in so many ways. Here is one.
http://jsfiddle.net/Ktk9U/
Related
I made a custom dropdown. In the last line of the table, scroll is created when dropdown is open. I need to scroll to see dropdown elements. I do not want this.
I want you to open up the body of the dropdown or enlarge the body. How can I do it?
Document is already enlarged by enlarged content/element, scroll shows that. You need only scroll to view entire enlarged element, f.e.:
elmnt.scrollIntoView(false);
Real problem (using react) is that should be done after change state and rendering enlarged element.
I probably would use setTimeout called from setState callback. It's quite common way to be sure it's called after updating state/view. You'll find examples on SO.
I have problem with bootstrap drop up/down button.
Button Menu doesn't fit well on page.
I am looking for way to dynamically detect position on page of that button.
Base on location button should automatically drop up instead of drop down.
Here is problem:
on "SHOW" and "Action" button. Menu doesn't fit on page (It extends container).
https://jsfiddle.net/yz0ex8c5/
https://jsfiddle.net/3ro502q5/4/
The same happens when the button is on top. It opens Dropping up Instead of drop Down.
This is very important. Couse I use this buttons with drop down and drop up in table that can be sorted. I use Bootstrap-table library to sort rows in table.
You could check the scrollTop position for the page, then switch between .dropup or .dropdown according to what is most suitable.
$(window).scroll(function() {
var scrollTop = $("body").scrollTop();
if (scrollTop<50) {
$("#showBtnGroup").removeClass('dropdown').addClass('dropup');
} else {
$("#showBtnGroup").removeClass('dropup').addClass('dropdown');
}
});
forked fiddle -> https://jsfiddle.net/wenz3v5r/
Have given the btn-group an id for easy access. The evaluation value of 50 is completely arbitrary, have just added a lot of <br>'s to the bottom and the top of the page - that must depend on how your site looks like IRL. You should do the same (or rather the opposit) with the Action dropdown at the bottom.
Is there a way to create a dynamic CSS for 2 columns? What I mean is, there are 2 columns in my webpage, the left and right column. It is similar to Facebook, where the profile picture is the left column and the right column is where your feeds are located. When a link is selected from the left column, without refreshing the page, the right column will display the page automatically. The left column is where my links are located and it is fixed. The only change factor is my right column. How can I create and apply the CSS?
You don't need a CSS template in order to use columns. All you need to do is set your column widths to percentages instead of pixels. If you're using a three column grid, with one div taking one column and the other spanning two, then the percentage for the first column would be 33.3333333% (don't bother rounding up, the browser will take care of it) and the second div would be 66.6666666%.
Also, in order for your second div to refresh without loading another page, you'll have to use Ajax.
There are css3 columns but they are not supported by IE. What a surprise!
It sounds more like you just need a css layout framework. Search for css frameworks / templates.
I of course recommend simpl.css.
The page is ugly at the moment but will be updated soon.
My question is, can I control the style of the paging element separately of top and bottom, I have set the paging to appear in both top and bottom of the gridview, and I want to see that the top pagination is little high up in the page, to do that I used the cssClass and set margin-top:20px and made the position: absolute, this does change the position of the top paging area and set it rightly for me, but the bottom pagination has also come up as a result and now sits inside the grid data!! Is there any way to solve this?
I suggest that you adjust your CSS, not the style associated with the GridView. Figure out what is causing the space that you want to negate, and eliminate that. Negative css margins is really unnecessary.
If you can't figure out what is causing the space, use FireFox with FireBug. Right click the area, select "Inspect Element". A couple windows will open... one with the html that is selected, and another showing the CSS that is effective in that area.
The solution is to keep a different stylesheet for the bottompagerrow, and I have done it like this in the page load
Dim prow As GridViewRow
prow = GridView1.BottomPagerRow
prow.CssClass = "BottompagerRowStyle"
Since this page will always have data, I did not bother to check for the existence of the bottompager, which can be done additionally
HI
I am new to Flex and was wondering, when we use an advanced data grid, only when we click on the parent element the children details get populated in the corresponding columns, right?..SO now i have made the empty columns invisible(at design) now how do i make them visible at run time when the parent element is expanded..similarly once the columns are visible, how can i make them invisible again when the parent element is closed.
Please help me out
Thanks
I think the event you want to listen for is "itemOpen" then the function you want will be something like:
MyADG.columns[invisible column index].visible=true;