I have datatables used with twitter bootstrap in a container at the bottom of my page. The tables were responsive and adjusted with screen size, but I wanted to fix a few of the tables with fixed widths to make them smaller (in width). I fixed the widths of the table data with
var resizeTable1 = document.getElementById("myTable1");
resizeTable1 .style.width = "1000px";
$("#table1-tab").find('.dataTables_scrollHead').css('width','1000px');
$("#table1-tab").find('.dataTables_scrollHeadInner').css('width','1000px');
$('.column1').css('width','78px');
$('.column2').css('width','305px');
$('.column3').css('width','69px');
$('.column4').css('width','69px');
$('.column5').css('width','127px');
$('.column6').css('width','127px');
$('.column7').css('width','114px');
$('.column8').css('width','115px');
however, by fixing the column and title widths, i cannot get the scrollbar responsive ability anymore when I make the screen smaller than the table width. Is it not possible to have a fixed width table and scrollbar? thanks!
If you are looking for scrollbars, would this work for you?
$("#myTable1").css('overflow', 'auto');
I think css 3 media queries should help you or maybe consider using this bootstrap extension: http://themergency.com/footable/
With media queries you could write something like this:
#media screen and (max-width: 768px) {
#myTable1 {
width: 100%;
}
}
This makes the table responsive again for a screenwidth lower then the given 768px.
Related
I am wondering if there is a way that the ag-grid can have a min height when using domLayout = true ? When there are no rows it will show the spinner but it does not look good because the height of the grid is so short. I have tried some css min-height on the container and the style of the grid being style="width: 100%; height: 100% but that did not make a difference.
Anyone come across this and able to get a min height so the grid is not so short when there are a small amount of records?
Thank you
I recently had a similar issue. I forced a min-height by using the following CSS:
.ag-center-cols-clipper,
.ag-center-cols-container {
min-height: 300px !important;
}
Note that if you are using pinned columns, or other advanced features, you may need to override more styles.
My webpage has centered header, content and footer divs, each with a width of 900px.
(The only other possibly relevant information I can provide about the header, content and footer is that the header has fixed positioning, the content is relatively positioned and the footer is absolutely positioned. However, I am not sure if this information will be relevant to the solution.)
I am using the following CSS media query:
/* If screen width is less than or equal to 900px (e.g.: tablet, mobile) ... */
#media only screen and (max-width: 900px) {
/* Scale header, content and footer width */
#header, #content, #footer { width: 100%; }
}
to begin scaling these divs down with the page when the page width becomes less than their default widths. I want the scale down to be seamless across all browsers, however, I am presented with a problem because webkit browsers calculate the y and x scrollbars width in the page width. This makes the scrollbar cover the divs at certain widths, and makes the scale down occur late.
I would like a JQuery solution to calculate and subtract the y-scrollbar width and x-scrollbar height from the CSS body width and height respectively in webkit browsers, to account for how webkit browsers include the scrollbar in the width and height of the page, so that my CSS media queries to rescale the body of the page to fit the viewing area works the same across all browsers.
I am not interested in alternative solutions such as making the scrollbars always present to make scaling down always work the same in webkit browsers.
I'd suggest using JavaScript do detect if your HTML body is larger than the window in both horizontal and vertical directions. If they exceed the window, there is a scrollbar. You can then add a padding to the body to accomodate for this.
I believe scrollbars have a width of about 15px, but that should be easy to find.
// Check if body height is higher than window height :)
if ($("body").height() > $(window).height()) {
alert("Vertical Scrollbar! D:");
}
// Check if body width is higher than window width :)
if ($("body").width() > $(window).width()) {
alert("Horizontal Scrollbar! D:<");
}
You can use to above code to detect both value. Placing these in a listener for window resizes will make sure that all parameters are reevaluated whenever necesary.
UPDATE:
$(window).resize(function(){
// Check if body height is higher than window height :)
if ($("body").height() > $(window).height()) {
$('body').css('padding-bottom', '15px');
} else {
$('body').css('padding-bottom', '0');
}
// Check if body width is higher than window width :)
if ($("body").width() > $(window).width()) {
$('body').css('padding-right', '15px');
} else {
$('body').css('padding-right', '0');
}
}
Hope this helps :)
EXTRA:
In case the scrollbar dimensions are different per browser, you could simply make a CSS class with the browser appropriate dimensions and apply it by calling:
$('body').addClass('<CLASSNAME>');
and
$('body').removeClass('<CLASSNAME>');
Instead of set and unsetting the padding on the body.
I'm building up a website using fullpage.js. When zoomed 100%, the webpage looks great, yet, when zooming just 25% more, texts and imgs will start overlapping or even disappearing, as each section has very limited height (with no scrolling), making my webpage impossible to read. I'm using
em
unit for font sizes and percentages for sizes, imgs and margins (except if its too little margin (5px, for example), where I use
px
). Hence, I was wondering if there's a solution using Javascript, CSS or HTML which can maintain font size even if the webpage is zoomed. As of now, I've tried, with no success, the following:
document.body.style.zoom="100%"
-webkit-text-size-adjust: none;
Using fullpage's feature resize, but it only works if the user resizes the window once the page has loaded.
document.body.style.webkitTransform = 'scale(1)'
My website is (sorry, I don't know which part of it to post, as the issue involves all of it):
http://rienpipe.es
Thanks in advanced!
you can fix this by using #media query's and a viewport in your css , and add this meta tag to your html:
<meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>
and with the #media query's and viewport you declare what size you have per screen width using this media query + viewport in css:
#media screen and (min-width: 820px) and (max-width: 920px) {
#viewport { width: 820px; }
// your css for screens between 820 and 920 pixels in width goes here
}
i mostly use the value's : from 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, #media screen and (min-width: 1200px){ #viewport { width: 1200px; }(this last one will set the size for any screen bigger than 1200 px in width so your code for the biggest version goeds here}
So this means you will have 6 times your css code which is adapted will be adapted to the size.
This is called adaptive or responsive design and is pretty easy to do
For more info you might check this http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Dear Stackoverflow community,
I'm very desperated about following setup:
- I have a Website with a Jquery onepagescroll design.
- If the width of the browsers window is below a certain point (769px) the onepagescroll disapears
- Instead a Gumby based design gets activated
But when happening so
... the third of the three sections overlays over the second one a
... after the first section is a gap
I researchead about four hours on this problem and couldn't solve it.
I hope you can help me.
Yours Sinceryl,
yooui
Code:
index.html (http://pastebin.com/6fMtkBbm)
jquery.onepage-scroll.js (http://pastebin.com/FnQWWe7J)
To fix the spacing and overlap, take a look at your CSS. The three "section" elements each have a height of 100%, you'll have to change that in your responsive styles.
So try adding something like this:
#media only screen and (max-width: 768px) {
.onepage-wrapper .section {
height: auto;
}
}
I'm looking for a way to adjust width of a list inside a container (500px, 200px) automatically. What I want to achieve is something like this
fiddle
But the problem with it is that you need to set the width of the list so that horizontal scrollbars would appear. Is there a work around for it so that the scrollbars would only take enough space?
try this:
#container ul {white-space: nowrap;}