Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I am doing a proof of concept with responsive design. One web page that I am modifying has some extremely wide tables. I really don't know how to shrink the tables width so there is no horizontal scroll bar in a mobile browser.
I was just wondering if anyone has a solution for extremely wide tables using responsive design. Oh and I wanted to add that I can not hide columns in the table.
Thanks in advance
The nicest way to do it is to completely reformat the table:
http://jsfiddle.net/MLZEb/9/
tbody, tr, th, td { display: block }
thead { display: none }
td:before {
content: attr(data-label);
display: inline-block;
width: 6em;
padding-right: 1em;
vertical-align: middle;
}
td:first-child {
background: #CCC;
}
Each td will need to have a data-label attribute for this to work effectively: <td data-label="Favorite Color">Blue</td>. Typical th elements as column headers are expected to be within a thead tag.
My knee-jerk reaction would be to put the table in a scrollable container. Adding a bit of helper JavaScript to enable moving the contents via a mouse drag would be helpful for desktop users. Mobile users would be able to take advantage of native touch dragging.
HTML:
<div class="container">
<table>
...
</table>
</div>
CSS:
td {
padding: 10px;
}
.container {
width: 100%;
overflow: auto;
}
A typical way to solve the wide table issue is by presenting only essential columns at the beginning and to provide a UI to add additional columns interactively.
Related
I'm using Semantic UI for the CSS base. Here's a fiddle I've been working on.
I'm having trouble getting the existing answers working from googling around. They all seem to have this problem where there is a ton of whitespace to the right.
I'm trying to get it working such that it integrates nicely with the existing CSS of semantic UI to look good (no whitespace to the side), but I'm not having any luck and I've been at it for a while.
It's fine if this only works with newer browsers since I'll be using electron anyway.
This CSS looks like it's required but I'm not sure how to modify it to work properly with what I have:
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
The source of the whitespace problem seems to be the ui class. It has several media queries on it that cause the content to re-flow at smaller screen sizes. If you look at the media query it doesn't apply if you add the class stackable to your table like below.
<table class="ui striped table unstackable">
Also, you only have 4 columns, seems like you want 5. Make the following change.
tbody td, thead th {
width: 140px !important;
}
thead th:last-child, tbody tr td:last-child{
width: 296px !important; /* 140px + 16px scrollbar width */
}
Working fiddle here
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm using a mobile first approach to create a responsive website. I'm currently working on my navigation menu and I'm satisfied with it on mobile (though it's far from perfect). However, when styling my navigation menu for web use I'm not able to position my dropdown content below the element in my menu. It's currently popping up in the upper left corner.
I'm using jQuery to create my clickable menu (don't know if that's relevant).
I also experience a bug on mobile where i cannot close the dropdown after opening it again. If anyone has an answer for that too, that would be great but I'm satisfied with it for now.
Any help is greatly appreciated, thank you :)
Not a perfect example, but you are best off removing your use of floating and replacing with a display led approach.
Something along these lines:
#media only screen and (min-width: 900px) {
nav > a, .dropNav, nav > div {
display: inline;
position: relative;
}
.dropList {
left: 0;
right: 0;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
padding-left: 0;
}
}
Example: https://jsfiddle.net/davcpas123/mjukghz6/1/
This will achieve something similar to this:
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I locked the table headers through
onScroll={() => {
document.querySelector('thead').style.transform =
`translate(0,${this.scrollRef.scrollTop}px)`;
}}
but when i scroll the table, the header borders do not stick to the headers.
How do i make the borders stay on the headers when scrolling?
This will fix your problem:
thead th {
position:relative;
}
thead th:before {
content: '';
position: absolute;
height: calc(100% + 2px);
width: calc(100% + 2px);
border: 1px solid black;
top: -1px;
left: -1px;
pointer-events: none;
}
And no, JavaScript is not transforming borders. The problem is the borders are not actually part of the <th> element because they're collapsed.
Internally, the browser checks on adjacent elements to determine combined borders. Those borders are positioned without taking into account transforms applied to <th> elements, but their initial position in DOM.
Easiest solution is to use :before pseudo-element to draw the borders.
The other solution would be to override
border-collapse: collapse;
on your <table>, applied by bootstrap.css.
But this will mean your table borders will no longer be collapsed (combined) and, most probably, you don't want that.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I´m using this tumblr theme:
http://flataura.tumblr.com/
And I want the slide menu at the right of the text "Flaty" that opens when you click on it, to be always opened. Is there any solution for this?
Here is the javascript of that slide:
http://static.tumblr.com/ssdtkch/gT6nanpl7/pageslide.js
Thanks!
Seeing from a comment that you are familiar enough to edit the CSS. Add this to the bottom of your CSS and it should show the menu AND hide the button that animates the show/hide:
body {
margin-left: 281px;
}
div#side {
display: block !important;
left: 0;
right: auto;
position: fixed;
top: 0;
height: 100%;
z-index: 1000000;
overflow-y: scroll;
width: 280px;
background-color: rgba(33,63,82, 0.93);
border-right: 1px solid #213f52;
}
a.open-sidebar.nav-button {
display: none;
}
Yes, there are ways to do this. But since it doesn't seem like you're very familiar with websites, the solution is too complicated via StackOverflow. Let me know if you would like to get in contact, and I can walk you through this.
In a nutshell, the #side element contains that left bit, but is always hidden. The #pageslide element is what gets shown, and as soon as you click the first time, the contents of #side get cloned into #pageslide. Then, jQuery (Javascript) is used to animate the transition, introducing a margin to your entire body element.
All of this can be overridden, but it is several steps. If you know a web developer, that information above should get them started. Otherwise, let me know if you want to get in contact.
Good luck!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I don't want a width-scrolling bar on my website and wanted to know if you know whats causing it and how to fix it(code).
I already tried this:
html, body {
max-width: 100%;
overflow-x: hidden;
}
Your div row bg-about have css margin-right: -15px just wrap the row bg-about in another div .container-fluid and everthing will works fine.
Tip.
You shoul always wrap row inside container, container-fluid or col-*-*
The reason is this rule in your CSS:
.row {
margin-right: -15px;
margin-left: -15px;
}
It adds 30px the 100% width of .row
remove it...
Your div with class row bg-about has a margin-right of -15px which causes your page to be larger than 100%.
Just remove the row class from this div and the problem should disappear.