How to have a table scroll only within a custom control on page? CSS help needed
Tags: jquery,asp.net,css,gridview
Problem :
I have a custom control(ascx) that has some text plus a gridview. Here is what I'm trying to do. I want an table(with some information) within a div tag to scroll beside the gridview within the custom control. I don't what the table to scroll down the whole page. I don't have paging on the gridview because the user needs to see everything within one browser window.
I tried playing around with position value of fixed, absolute and relative. I placed the gridview within a div tag that had a value of position:relative and another div tag embedded within the main div tag with a value of position:fixed and left:70%. I get a partial result that I'm trying to achieve. Any help would be appreciated.
Solution :
I had similar requirement in my project and i achieved it by having a div tag with specific with then set overflow to auto
<div id ="mydiv" style ="width: 1000px;overflow:auto"/>
you may set the height to a specific width.
CSS Howto..
Set your images up with their actual values in the HTML, like so: <img class="vanish" src="images/colours.png" alt="Colourful painting" width="480" height="615"> In the above example, the actual size of the image...
I usually start designing my page to be used without CSS. I outline the titles using Hx tags, the paragraphs, links, lists and images. Then I hand-draw a mockup splitting...
Take a look at this article: CSS: User Agent Selectors Basically, when you use this script: var b = document.documentElement; b.setAttribute('data-useragent', navigator.userAgent); b.setAttribute('data-platform', navigator.platform ); b.className += ((!!('ontouchstart' in window)...
You should create a score variable and if the answer is correct increase the score and set it to the innerHTML of a score element. If the user gets an...
This is the right way dialogBox.setPopupPositionAndShow(new PositionCallback(){ @Override public void setPosition(int offsetWidth, int offsetHeight) { // TODO Auto-generated method stub dialogBox.setPopupPosition(parentDockLayoutPanel().getOffsetWidth()- dialogBox.getOffsetWidth(),...
Use a div with a image as background, then let the other image (and the header's content, if you have it) inside the div. Example: body { width: 100%; height:...
First, I would remove the CSS you wrote (included in your question), as it's bound to cause problems at different widths and on different devices. It's quite problematic. Instead, try...
The only way I can think of doing this without javascript is changing height: calc((100% - 160px) / 2); to min-height: calc((100% - 160px) / 2);. This isn't exactly what...
It uses a pseudo-selector called target, the links append #pagename to the url, and the appropriate animations take place from there. The HTML might look something like: <p id='pagename'>This is...
Here it's work fine: http://csgotale.com/stackoverflow-demo/index-with-my-try.html but, add to your html,body and h1 margin: 0; padding: 0; If you wanna make Parallax Effect, i do it here: http://codepen.io/powro01/details/pEBBgR/...
Most browsers set default margins, you can override them including body { margin:0; } in your CSS. UPDATE: you've got h1 there, it also has its own margins, so add...
Yes, it is possible. Typically what you would do is write a JavaScript function that will change, or add, or remove a style sheet from the <head> of the document....
There's no way to do this with a pure CSS solution that works in IE6. Your best bet is to modify the HTML and add an extra class, or an...
Once you call makeEditable() on the goog.editor.Field, which creates the iFrame you referenced, the Field fires an event of type goog.editor.Field.EventType.LOAD. If you listen to that event, you can pull...
Just change the background color. #wrapper input:not([type="checkbox"]):active, #wrapper input:not([type="checkbox"]):focus { background-color: rgba(0, 0, 0, 0.55); } ...
Try: $('#top-nav').hover(function(){ $('#element_id').fadeIn('slow'); }, function(){ $('#element_id').fadeOut('slow'); }); Where top-nav is the id of the element which is hovered and element_id is the id of the element which you want to...
Just sepereate each one with a comma. Something like this : background-image: url(),url(), url(); Ofcourse instead of url you can put gradient. And all modern browsers support this feature (...
Probably your new selectors doesn't have enough priority over the ones you have on mystyle.css? CSS/Training/Priority level of selector CSS: Understanding the selector's priority / specificity !important override these calculations,...
HTML5 actually contains an entire section dedicated to case-sensitivity for the purposes of selector matching. Here's what it says about attribute names and values: Attribute and element names of HTML...
A bit of CSS and organization would work :) HTML <div id="contact"> <div id="left"> <p> Please fill in the form on the right or use the contact information below to...
Create a div container with position:relative and put your 3 canvases inside with position:absolute and use left to move the canvases as desired. var canvasB=document.getElementById("canvasBottom"); var ctxB=canvasB.getContext("2d"); var canvasL=document.getElementById("canvasLeft"); var...
You won't need separate CSS IDs, but you could use some jQuery on the class. .each() is used instead of .css() directly here because otherwise the random angle would be...
You only need to add two lines of CSS Example fiddle CSS .flexnav{ -webkit-padding-start: 0px; -webkit-margin-before: 0px; -webkit-margin-after: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width:90%; position: relative;...
CSS allows you to specify namespaces for use with selectors within stylesheets. However, jQuery doesn't support this since you have no way of declaring the XML namespace in the first...
Provided that your CSS file is loaded via <h:outputStylesheet>, use #{resource} mapping. body { padding: 35px; background: #4c4c4c url(#{resource['images/grad1.png']}) 0 0 repeat-x; color: #fff; font: 11px/normal Arial, Helvetica; } ...
The only way I've been able to achieve this [decreasing the native browser rendered spacing of the li] is by adding additional markup to your li and setting a negative...
This seems like an ideal situation for child selectors. Something along the lines of this though you would likely want to change your <p> to a <div>: .panel-grid-cell, .panel-grid-cell >...
You first have to load you font in the document's head and than use the font in conjunction with the right font-weight in your CSS. PS: You got a little...
.navbar ul li:before, .navbar ul li:after { content:''; display: block; position:absolute; height: 4px; width: 0; background: #fff; transition: width .6s ease, background-color .6s ease; } .navbar ul li:before{ top:0; right:0;...
This is best done with plain CSS: .popout { animation: popout 1s ease; -webkit-animation: popout 1s ease; } @keyframes popout { from{transform:scale(0)} 80%{transform:scale(1.2)} to{transform:scale(1)} } @-webkit-keyframes popout { from{-webkit-transform:scale(0)} 80%{-webkit-transform:scale(1.2)}...