I need a table for list of records where table header is fixed and scrollable body inside a div.
Div which is non scrollable but expands its height to certain length according to certain number of records and if table has more than that records the DIV need to be fixed position.
My main concern is to avoid user to scroll the page. Instead, I want him to scroll table which is inside the Div, but if the list has less number of records div outline border looking awkward.
I am working out this table in MVC View, but couldn't get the expected result. Any sample code is appreciated?
.FixedHeightDiv
{
float:right;
height: 250px;
width:250px;
padding:3px;
background:#f00;
}
.Content
{
height:224px;
overflow:auto;
background:#fff;
}
<div class="FixedHeightDiv">
<h2>Title</h2>
<div class="Content">
your content
your content
your content
your content
your content
your content
your content
your content
your content
your content
your content
</div>
https://jsfiddle.net/PyramidTek/hrn6fwb9/
Related
I have set up a sticky footer in an HTML page. I want it to stick to the bottom of the page and anchor at the bottom of the content section. Code:
`<div id="content" class="row">`
`<div class="columns large-12" style="width: 100%; height:400px;">`
`<!--Main content here-->`
`</div>`
`</div>`
`<div class="row ">`
`<div class="footer large-12 sticky" data-sticky data-stick-to="bottom" data-top-anchor="content:bottom">`
`<div class="text-center">`
`<!--footer content here-->`
`</div>`
`</div>`
`</div>`
In order to test, I styled the content and footer divs with borders. The footer sticks to the bottom, but if I resize the browser by moving the bottom of it up without stopping, the footer does not anchor to the bottom of the content div.
However, if I move the bottom of the browser window up and stop when the top border of the footer is on the bottom border of the content div I can actually see it attach to the bottom of the content div, and it stays attached when I again move the bottom of the browser up.
The same thing happens on the way down after the footer has attached to the contend div: if I pull the bottom of browser window down and stop when I see the bottom of the content div, when I start pulling it down again, it detaches from the content div and sticks to the bottom.
Is there any way to fix this so that it works correctly if a user resizes the browser this manner?
I have a view where a lot of data is displayed in a table. I have to have a big screen to see it all but can not count on that users always have that size as I have.
But unfortunately my grails project doesn't support horizontal scroll so if your screen isn't wide enough, you aren't able to see the rightmost part.
What can I do to get the view scroll horizontal?
I use version 3.2.4 of grails.
Add the following style to your gsp, overflow is discussed here:
<style type="text/css">
table {
display: block;
overflow-x: auto;
}
</style>
I am using the age old trick to make a div scrollable like below:
<div style="height: 100px; overflow: scroll;">
Messages within div.
Messages within div.
Messages within div.
Messages within div.
</div>
But the scroll bar is never shown on the iPad.
Does anybody have an idea how to add a scroll bar or at least some sort of visual indication that the div is scrollable for the iPad?
I have a Div Which Shows on Click of Table Cell of another(TableDiv) Div.I need to set the Boundraies (Limits) depend on the TableDiv Width and Height.My Draggable is out side of TableDiv.
<div class="TableDiv">
<table>
</table>
</div>
<div id="draggingDiv">
</div>
My Jquery Code as below
$("#draggingDiv").draggable({reset:true});
Thanks In Advance
Its clearly an issue with css positioning.
It would be great if u share the css styling of your divs.
But according to me adding this to your style sheet would solve the problem
position:absolute;
width : 100%;
height : 100%;
% Sizing fixes the div to 100% of its parent div.
Same thing could be applicable to draggable element too.
I have a div in a page (footer) and I want the following to happen with CSS:
If the page has not enough content to fill the window, the div should be at the very bottom.
If the page has enough content (and a scroll bar perhaps appears) then I want the div to be after all the content.
If I do it with position absolute etc, I can't get the second case to work.
Any ideas?
I think you're looking for 100% min-height layout. Check out this post: 100% Min Height CSS layout.
You want to use a sticky footer.
For example: http://ryanfait.com/sticky-footer/
or if you google Sticky footer you find a few alternatives