How do I create a scroll in GridView using ASP.NET without using fixed sized div's around it like shown here http://www.aspnettutorials.com/tutorials/controls/gridviewscroll-aspnet2-csharp.aspx .
You can set the div's width or height to a percentage as well, and with overflow:auto, the div contents will scroll if the browser is sized to less than the content.
Without any size settings, your div will simply expand to hold all content, so a percentage, fixed, or inherited size in at least one dimension is required for scrolling to ever occur.
In order to get a scroll bar, you need a fixed height container with overflow set to scroll.
Whether you do it with the grid's properties, like in the example you linked, or by just wrapping it in a Panel with a height and overflow set on it, it doesn't matter much. The key thing is just to get it inside a fixed height container. How you want the UI to look (where the scrollbar is, etc.) will dictate where you create the div.
Related
I have two-column layout with a header and footer. I have created a JSFilddle with demonstrating this.
The left-column will normally have more content than the right-column.
How can I get the right-column to expand to the height of the left column, or just fill the height of the view-port? I have sene examples of something similar, but not with a footer that is always at the bottom of the display.
How can I get the textarea to fill the height of its parent, the right column (I haven't even got close to solving this one).
I've just edited your jsfiddle.
The idea is to set a min-height on your right column block, and have it determining the height of the whole content section instead of inheriting height attribute from its parent.
Secondly, regarding the text-area. This bit is tricky, you need to use javascript to render it upon everytime a user resize their view port, and update the attribute height of the textarea accordingly.
Cheers
minHeight is important incase you have an empty content container and you dont want the footer to be pushed up right under the nose of the header. Hence minheight prevent that from happening. Once the height of the right column exceeds minHeight, the parent div will be expanded accordingly.
I see nothing wrong with h being the height of the viewport if you really want it to always expand full windows. However I recommend using $(window).innerHeight instead of Height(). But again, this is javascript and your code will never render the same thing on different browsers, so keep that in mind :)
$(window).resize(function() { var h = $(window).height(); $('#MyTextarea').css('height', h-300); });
I use VS2010, C#, ASP.NET; I read some data from SQL server and fill my DIV, I don't want to give this DIV a fixed height or scroll bar, rather I want it to have its height automatically set to maximum data, what should I do? how should I set my styles?
also I have another horizontal DIV that should be displayed at the bottom of page, how can I set it so that it is always fixed to bottom of page (not bottom of screen)?
a good example is the Related questions column in this site! and the gray horizontal DIV at the bottom of page
thanks
The default behavior of divs is to contain all their data. If they are not, then you are overriding that behavior somewhere, either by setting an explicit height, or by having content items that are taken out of the normal flow (floats or absolutely positioned items).
I have a main container div, where all the important content of the site is inserted, 800px wide, centered horizontally.
I need to put multiple absolute positioned divs layered below it (via z-index) and outside its width, without causing extra scrollbars to appear, and without losing the main container scrollbars (so puting overflow:hidden in a wraper won't do).
In other words, I was wondering if it's possible to create divs with different elements inside (videos, images, or text) that could be treated as backgrounds, so that the scrollbars would only appear when the window resizes below the 800px wide (width of the main container), and the rest of the divs would just bleed out (something similar to what swffit causes with an embebed flash movie).
Is there any way to do this via css or javascript?
Thanks in advance!
There is a way that requires CSS only. I once faced similar problem with this web site I created, take a look at the source. The curves by the side are done this way.
Trick is to change positioning of main container to relative with no shift - that causes change of coordinates base, here is a link. Than use absolute positioning of the "background divs" to get them outside the main box.
To solve the overflow problem use some extra div wrapper (in my site with id graphic). To specify its width use a range - min-width equal to main box and max-width as total width including the "backgound divs". And to this wrapper set the hidden overflow.
Hope it helps.
By default the height of an Flex Accordion container is the height of the initially selected child. I'd like to be able to set the height to the tallest child so that no resizing or scrolling is necessary when other children are selected.
I do not want to use the resizeToContent property. I want the size of the container to stay constant no matter what child is selected.
My current thought is to extend the accordion class setting the creation policy to "all" and then override the measure function to loop through all the children and find the tallest one and use that for the height. This seems a little kludgy though, so I'd like to know if there is a better approach.
Ultimately my question is: is there a way to set the size of an accordion container such that the container never resizes and scoll bars are never necessary to display any of the children?
IMO your idea is probably the best way to go, one problem with it though, you're still going to have a scroll bar since it will set the height to the child and not take into account the chrome of the accordion. So you will need to add additional height for each header of the accordion.
Simple to figure out the header height and multiply it by the number of children, but still something you should keep in mind.
I am working on a web page that used a fixed width layout, centered in the browser. The width of the centered container is set in pixels.
On a couple of pages, there is a large data table inside the content container. In Firefox the table overflows the fixed width container. IE is more complex and will expand the container around the table, and because of some layout issues the container uses overflow:scroll just for IE.
I need to find out if I can use a fixed width on the container, but also allow it to expand to wrap the large data table. I also need to avoid a solution where I would be modifying the HTML... I can't for example use an ID to only target those containers on pages with large tables. I need a pure CSS solution.
My feeling is that this is impossible, and I am going to HAVE to put an ID on those specific containers that need to be larger than the standard. I'm asking here because I really need a second opinion.
Just a note: I have also experimented with min/max-width, without success.
If min-width and overflow don't work, you're going to need css hacks.
If the problem with min-width is that the container is a block-level element and expands to page width, try using a variant of display:inline on that container, so it doesn't stretch. (Or maybe margin.)