I am trying to freeze table header and need to make scroll only table body. I referred this link. But it is fine for minimal number of columns. If increases, then thus the table data text is overlapping each other. this is major bug in my project. I tried lots. But its become useless. if you have any solution please comment it below or help with your answer.
Screen Shot (For Example):
Maybe you must set up a horizontal scroll for the whole table as it became larger than screen width and set each cell with a wrap property to avoid its content pass uppon the next. Try this:
.outer-div {
position: relative;
width: 1024px; //Or any default value for you.
overflow: auto;
}
.inner-div {
position: absolute;
width: 100%;
}
.cell-content {
word-wrap: break-word;
}
Remember to change the classes' names with yours. Cheers!
Related
I'm trying to insert basic html (local file) into a parent html. From my previous question I concluded that jquery load might never work in prod so I attempted to use iframe as per Makesh Keshu's suggestion. It sort of does what I want, but now I'm running into some styling issues? Since the local file I'm trying to embed is just text essentially, I want it to just look like the parent html holds the text (aka responsive sizing and all) -- motivation for embedding the html and not just writing it in directly is mainly because the site owner wants to try to make the text entry not "steal-able" from just doing inspect and copying the text away.
My css right now uses an iframe wrapper class that does the usual that everyone else suggests:
.text-wrapper {
position: relative;
padding-bottom: 100%;
padding-top: 100%;
height: 0;
overflow: hidden;
}
.text-wrapper iframe {
position: absolute;
border: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
However, I suspect due to the aspect ratio from the padding attributes, it looks great when my screen is in split-screen view or on mobile, but when I resize the screen to full screen, there is a lot of white space under all the text to keep the container at roughly the half-screen-view aspect ratio. (Please correct me if this assumption is wrong -- I'm still a beginner with front-end.)
Basically, I want to try to make the aspect ratio of the iframe container the same as the ratio of the tab/window/screen -- which changes as window resizes and whatnot.
I looked through this question because it seems similar, but I'm neither sure I understand the idea behind the answer very well nor am I sure it really answers my question. That question I think is asking to size the iframe-container according to the content size without using a fixed aspect ratio, which would achieve the same thing, but I'm trying to see if I can just make the aspect ratio responsive based on the "screen"(window?) ratio.
This article ended up working really well for my specific purposes. I'm not sure I 100% understand the theory behind it yet, but it uses a pseudo-element. It seems to have solved my problem of having extraneous whitespace in the iframe container in full-screen, but I'm not sure if it solves the general issue (for people who want to try the method out).
The css code I ended up using (for the container, css for iframe remains the same):
.aspect-ratio-box {
background: white;
}
.text-wrapper::before {
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: 52.46%;
}
.text-wrapper::after {
content: "";
display: table;
clear: both;
}
I'm trying to create a vertical timeline but I can't seem to get the overflow-y: scroll to work. Here is a link to the website:
http://fosterinnovationculture.com/infographic/index.html
The parent div has an overflow: hidden but the child div has overflow-y. It works properly if I remove the parent div but I need it inside of the div so that list.js plugin works properly.
I see your code have
html, body {
overflow: hidden;
}
// it mean only full screen and all overflow is hidden.
So in .scroll you need set max-height. I suggest a solution
.scroll {
max-height: 90vh;
}
You fixed the height of body to 100vh and set it's overflow property's value to hidden;
So not matter whatever the height of body's child is, it will not scroll;
If you change body's overflow property to auto, scroll will work;
At the same time you may change the position of top_nav to fixed, in order to keep the search bar at the top all time time.
It seems like you are repeating the same question. Here is you asking about the same problem (though I will admit the question is different because it has changed). Here is my answer to that question.
Before giving an answer, I will say that the most important thing I tell myself when coding CSS is: if I start having to hack then I am making it too complicated.
With that said, start by removing every instance of overflow: hidden; in your code.
Then get this in there:
.top-nav {
height: 70px; /* you already specify this on your site */
}
.scroll {
position: absolute;
top: 70px;
bottom: 0px;
left: 0px;
right: 0px;
overflow-y: scroll;
}
In cases like this, you should try to realize that your question regards a design that is common and someone else must have asked your question before. If you cannot find an answer to such a question, it may be good to rethink your search keywords.
Here is a Stack Overflow question that answers your underlying "how-to" design question.
so I made a website but for some reason no matter what I do, I cannot get any scrollbars to appear when the page is too small. I've been looking for quite some time but can't find a solution. I've tried many things but can't figure it out for the life of me. I suspect it has something to do with overflow but even adjusting that doesn't seem to work. If anybody could help me diagnose this, I'd really appreciate it. I'll go ahead and link the relevant codes below. I know it's probably a simple problem, but I'm about to rip my hair out trying to figure it out. Thank you for any help, I really appreciate it.
Main index page: http://pastebin.com/TkdzdKbG
CSS Style: http://pastebin.com/tMKQtC6v
Apply this CSS
.ibg-bg {
height: 100% !important;
position: absolute;
}
Remove position
.bg {
height: 100%;
/*position: absolute;*/
width: 100%;
z-index: 0;
}
I'm not sure if it's the solution you're looking for but in your "container" div, there's an inline style "overflow:hidden", if you remove that, you can get scrollbars whenever the page is too small.
http://prntscr.com/8pcd0f
I think this is because of overflow property. Try this on your stylesheet,
.container .bg {
overflow:scroll !important;
}
Most of your contents are under div.bg > div.display but the height of the parent node-div.bg- is 100% and its overflow value is set hidden by one of the scripts. (query.interactive_bg.js, I guess)
You can set the height of div.display to 100% and its overflow-y value to scroll to scroll the contents or if you want a horizontal scroll bar as well, change overflow-y to overflow.
Add these line to your style.css file, line 172:
.display{
position: relative;
height: 100%; /* Added */
overflow-y: scroll; /* Added */
}
I am using the example mentioned here in my project. I want to stretch the table to fit the whole page.
So, I did:
html, body{
height: 100%;
}
#gridContainer {
height: 100%;
}
table{
width: 100%;
height: 100%;
}
The problem is, only the table header appears on the page and it is stretched properly. The rows do not show up. I also tried to place the <script> before the <style>, but no luck.
How do I fix this?
Make the below change.
table, div {
width: 100% !important;
}
.dojoxGridxBody, .gridContainer, table, #gridContainer {
width: 100% !important;
}
If you want to make no other changes you will have to use !important to override some of the original CSS. But you can use the chrome inspector to find out what this style is overriding, remove the widths that would be set without this in the old CSS and then remove the !important
This page is far from ideally laid out however, as when you change the column structure the page just gets wider and wider. You have multiple tables and divs within these when actually you only need one table.
http://74.52.155.226/~projtest/team/harmeet/reach/
That is the link i am working on. Its a responsive design. If you see down below the footer there is a table. When you reduce the resolution less than 600px or so the table layout changes. What i cannot do is make the test in first row ( in the small layout ) to have word-wrap as the text is going out of the table cell. Any help? Thanks in advance.
P.S.: you can search for the term "unlimited support" on the page and you will know which row i am talking about. I repeat, please reduce the browser size to see the issue.
Looking in firebug I can see that you have 'white-space: nowrap' on the tbody element, when in the narrower layout.
You can remove it, or set it to another value i.e. 'normal'
#rt1 tbody {
display: block;
overflow-x: auto;
position: relative;
table-layout: fixed;
white-space: nowrap;
width: 273px;
}