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
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 two gridview in two different tr and td,i want to display one of them by setting visibility true or false but when i run it though only one is visible but the position of gridview remains static as it should be placed on the top which is not happening.Help me out
Is there any reason you use a table to show these grids? If I have understood you correctly, you need the bottom grid to take the space above, if the top grid is not visible. I strongly recommend not to use a table for this, but relative positioned divs. If you MUST use a table, use javascript to resize your top row, when needed.
I'm creating a context menu for certain elements using a PopupPanel; the menu itself is going to be fairly large and complex. What I'm looking to do is to have a list of buttons, plus an image and some text, related to the element clicked.
My problem is that I'd like the buttons to always display directly under the clicked element, because that's convenient for the user; the issue is that when PopupPanel is near the edges of the screen, it automatically changes position to be fully visible, not aligning its left side to the element as usual. I like this behavior, but it moves the position of the buttons away.
So what I'd like to happen is: normally the buttons are on the left of the panel, the other stuff is to the right. When the panel is close to the right of the screen, I'd like the buttons to instead be on the right (and thus under the clicked element) and the other stuff on the left.
Is there a clever way to do this, either in GWT or better yet, using only CSS? PopupPanel itself doesn't seem to tell you when it's going to get flipped, sadly. The only solution I currently have is to manually check the position and width of the popup before showing it and adjust accordingly, but I'm hoping there's a better solution.
Here is what I suggest (based on my own implementation of a similar use case):
Have the position callback implementation accept references (in constructor) on:
PopupPanel element
element on which user right cliked
the content you put in the PopupPanel
Replicate (I know this not DRY but implementation is package private) the code from default position callback
When opening to the right invoke a method that changes the layout of your content (CSS based or otherwise)
I hope it helps. If you find something better let me know.
i have a Gridview with a single column which is a template field with an image and a label.
By default, the gridview expands vertically according to the items in the datasource.
But in my case most of the screen space is left unused and the page becomes extremely long.
So it'd be great if the one and only template field automatically becomes a new column (starts again from the top next to it's initial position after a fixed height) or SPANS HORIZONTALLY, not vertically...
i've done some searching and still can't find a solution for this..
any help would be great..!
i took 2 screenshots for a better explanation but the site won't allow me to post images yet :/
I think you are looking for the DataList control. Namely, the RepeatColumns property.
I'm having a problem with FIREFOX. I have an invisible list control over a drop-down control (html 'select'). Don't mind why, but I will say that the over-layer is a pop-up that appears as part of another custom control.
Even though it's hidden, it's preventing me from clicking on the underlying drop-down control, making the underlying control seem disabled. It's not disabled though, because I can tab over to it. I just can't click on it. I know it's the overlay causing the problem, because I moved the underlying control off to the side and it works again.
Is this a bug in Firefox? This isn't like setting a translucency value; it's disabling rendering of the control altogether, so I don't think such an invisible control should be intercepting mouse events.
This behavior does not occur in Internet Explorer.
Perhaps there is some other CSS property I can set in JavaScript to toggle its mouse event capturing ability along with its visibility.
dd = document.getElementById('lstStudents');
if (dd.style.visibility == 'hidden') dd.style.visibility = 'visible'; else dd.style.visibility = 'hidden';
Update: I just read a description for the CSS visibility value "hidden" that read "The element is invisible (but still takes up space)". So I guess I'll have to set it's height to zero along with setting it's visibility to solve this problem.
change your over-layer control's z-index to, say, -1. style="z-index: -1;" This will place it underneath everything, allowing direct access to drop-down. You might have to dynamically change the z-index to bring over-layer back on top when visible.
More info
How are you hiding the element? If I remember it right, "visibility: hidden" is supposed to (rightly) work the way you describe, while "display: none" will banish rendering altogether.
If that's not the cause, can you confirm using Web Developer Toolbar that it is indeed the invisible control that is causing the problem and not another that has opacity set to 0 or something?
The way I've done popup boxes before in Firefox was with CSS properties.
z-index: 500;
display: block;
to show an element, and
z-index: -10;
display: none;
to hide it.
Now. My values for z-index are extreme, but that's just what I chose. This works for me, but my app targeted Firefox specifically; aaaaand I'm using the display property, which you stated you want to avoid.
If you're concerned about using display:block or display:hidden, I think maybe you could try to play with positioning, or sizing the element.
Either make the popup element absolutely positioned and move it offscreen when invisible, or maybe try to make it 0px width and 0px height when invisible. That's two things I would potentially explore if I still had problems. I'm not sure if I would recommend these as best solutions though.
Really consider how many instances of your popup elements will have different display values, I found in my case to be using only two types, 'none', and 'block'. Maybe manipulating the display property will be enough for you.
Hope this helps.