Introduction
Hi everybody, I am back after a long break. You are going to see a small tip which may help people in a small way, and who knows, It may also help people in a big way it all depends on the individual and the talent to implement this in a big way also. Ok now, without boring you people, let me dive into the tip. I hope every one would have experienced some problem, when they are formatting there page especially when a table will grow dynamically upon some action by the end users. Being developer we should take care of this, this problem may not affect the normal process, but some time it may give a bad UI (User interface) which is not proper. I think the experienced people might be knowing what I am talking about and some of them might also know the solution for it. What I am talking might be some jargon to the fresher(let me call them us Just born developers). So keeping them in mind let me first explain what is the problem I am talking about.
Problem Statement
Before continuing, please down load the demo (click here to download the demo). If you see the example, I have four section, one is the header section in the top, the link section in the left side, content section in the right side and footer sections in the bottom. There is no problem with this page. Now lets me introduce some problem to it.
Now for example the employee details are growing dynamically. That is the table height is going to increase dynamically. Then what happens, let me show. Now click here to download the demo file. Now open the html file exampletwo.html in the iexplorer. You could see the scroll bars added and the footer is getting hidden. On scrolling down the scroll bar, the header will go off. So this is the problem, how to display everything in one page. Means when ever I see the page my header, my footer and my links should be visible. I hope the problem is clear.
Now, I hope everyone is clear with the problem statement, If still you are not clear, please feel free to mail me and discuss.
Solution
One solution to the problem could be not allowing the data to grow. Well if that is so, we developers are not required. As a developer, we should provide some solution to the problem. Now, start thinking how it could be solved. The solution is very simple, most probably every one must be knowing it. As a developer, we should think in a different prespective. We should recollect all the things which we have learnt or when we come across some new concept or a new things we should start thinking or experimenting how that property or that feature can help us. Then our programming task becomes very simple.
Ok, now let me tell the solution, I hope every one have heard about div tag, which we are going to use here.
Div tag
<div style="Overflow: auto; height: 100%; width: 100%" >
There is a property called Overflow in the div tag. It can take some value, among them we have something called auto. If we set the Overflow property to auto and define the height and width to the div tag. If the element or container contained in it exceed the height and width of the div, it adds the scroll bar in the right side and botton of the div. Now lets apply this div concept and make this table to be scrollable. Click here to download the example.
Don’t think that the problem is solved with this, it is not so. Let me make you people keep guessing, there is still some problem with the examplethree.html file. Please find that out and mail me. I will discuss more about that tomorrow.
You can mail me at sadhasivam1981@yahoo.com, sadha.sivam@kmgin.com, sadhasivam1981@gmail.com. You can also reach me at +91-9880397583 (on all week days) and 044-23621655 on all weekends.
Every Feature has a Purpose. Finding it leads to great benefits
|
No responses found. Be the first to respond and make money from revenue sharing program.
|