I have a div to the left of a page that contains links to different divs on the right. I want the left div to stay fixed when scrolling the page but also show next to the div I jump to. the problem is that when i click on a link it will jump to the div but the navigation div does not render until i mouse over it piece by piece and it seems to break the page. any ideas?
Navigation div
<div class="tableoutline fixed">
<table class="notableoutline glossary">
<thead>
</thead>
<tbody>
<tr>
<td class="datatd">
{{data.learn.recommendedQuestions.title}}
</td>
</tr>
<tr>
<td class="datatd">
{{process.title}}
</td>
</tr>
</tbody>
</table>
</div> <!-- End of tableoutline -->
content div
<div class="contentbox bottomMargin" id="process" name="process">
<h1>{{data.learn.process.title}}</h1>
<div class="questionsAndAnswers">
<h2>{{process.question1}}</h2>
<p>{{process.answer1}}</p>
</div>
</div> <!-- End of Content Box /-->
to make an element fixed:
#element {
position: fixed;
}
if you want it to be on top all the time, use z-index
Related
I have a rounded box where I display information and would like to show alternate line with a different background color. The problem is the color does not flow to the borders and inbetween cells and it does not appear very nice. Additionally there is a scrollbar that appears when there are many lines and the scrollbar hides the rounded corner (I can probably live with this if it becomes too complicated).
Here is my basic html:
<div style="width:80%">
<div id="Activity" style="width:100%; display:inline-block; border-radius:20px; border:1px solid black; padding:10px; background-color:black; height:500px; overflow-y:auto; overflow-x:hidden;">
<table class="list" id="ActivityList" style="width:100%;">
<thead style="color:white; font-weight:bold;">
<tr>
<td style="padding-right:10px;">Date/Time</td>
<td>Log</td>
</tr>
</thead>
<tbody>
<tr><td style="white-space:nowrap; padding-right:10px;">2017/04/23 10:08:03</td><td>Variable Paul is at home updated to False</td></tr>
<tr><td style="white-space:nowrap; padding-right:10px;">2017/04/23 10:08:03</td><td>Variable Paul is at home updated to False</td></tr>
<tr><td style="white-space:nowrap; padding-right:10px;">2017/04/23 10:08:02</td><td>Variable Paul is at home updated to False</td></tr>
</tbody>
</table>
</div>
</div>
And here is a jsfiddle showing the problem.
Add cellspacing="0"to remove the space between the cells
And for the scrollbar, remove the overflows from the child div and set it to the parent div or vice versa you fine bellow link for both solutions:
Solution 1
Solution 2
For the lines to touch the right/left border, all you have to do is remove the right/left padding of the divs
Solution 3
I have some div, inside of which has a couple of tables as below
<div id="div1">
<div id="div2">
<div id="div3">
<table id="table1"><tr><td></td></tr></table>
<table id="table2">
<tr></td></td></td></td></tr>
<tr></td></td></td></td></tr>
</table>
</div>
</div>
</div>
When table2 has lot of rows, am using overflow in css to show the horizontal scroll bars. This scrollbars I am applying to div2, so when we scroll, table1 also scrolls down. How to make sure that table1 is always fixed, that is, it does not scroll down?
Thanks a lot
css
table {max-height: 200px;}
tbody {
height: 180px;
overflow:auto;
}
html
<table id="table2">
<tbody>
<tr></td></td></td></td></tr>
<tr></td></td></td></td></tr>
<tbody>
</table>
For more in depth explanation, see: http://www.imaputz.com/cssStuff/bigFourVersion.html
I have an issue that only seems to affect Safari and Chrome (aka WebKit). I have an overlay that fills the whole screen, and two table rows that I would like to appear on top of the overlay. Everything else on the page should be displayed below the overlay.
The problem is that Safari only displays one of the table rows on top. Firefox correctly displays both on top. I can't seem to find the root cause of this issue in Safari, but I know I'm not the only one who has had a "Safari positioning issue that works in Firefox".
What should I do in order to make this work in both Firefox and Safari/Chrome?
<body>
<style>
.ui-widget-overlay {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
}
</style>
<table>
<tr style="position:relative; z-index:1000;">
<td>Displays on top in Firefox only</td>
</tr>
<tr>
<td>
<div style="position:relative; z-index:1000;">
Displays on top in both Safari and Firefox
</div>
<span class="ui-widget-overlay"></span>
</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
</table>
</body>
Update: Apparently the code sample above displays correctly. However, that is just a sample. It's not the actual code. The HTML is identical, but I am applying the styles dynamically with JavaScript.
Maybe the issue lies with jQuery? I'm using this line to add the positioning to the first table row:
$(firstTableRow).css('position', 'relative').css('z-index', '1000');
In Firefox (using Firebug) I can see that the style is being applied, however in Safari (using Web Inspector) it says that the "computed style" of that table row is statically positioned with a z-index of auto, even though the "style attribute" styles say that the position is relative and z-index is 1000.
According to the CSS 2.1 specifications:
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
I'm assuming that Firefox implements it one way, and WebKit implements it a different way and both are correct since it is undefined. The moral of the story here is not to specify a position on table elements.
I was able to get it to work by wrapping the contents of each cell with a div and positioning the div.
<table>
<tr>
<td>
<div style="position:relative; z-index:1000;">
Displays on top in both Safari and Firefox
</div>
</td>
</tr>
<tr>
<td>
<div style="position:relative; z-index:1000;">
Displays on top in both Safari and Firefox
</div>
<span class="ui-widget-overlay"></span>
</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
</table>
I'm creating a contentEditable div within a table cell to capture user input. The problem is, when I align the text to the right IE8 does not show a text input caret. Every other browser I've tried works. It works if I don't use "text-align: right". It also works if the caret is anywhere other than the far right of the div. Here's some sample code:
<html>
<body>
<table width=400 border=1>
<tr>
<td>
<div contentEditable=true style='outline: none; text-align: right;'>
</div>
</td>
</tr>
</table>
</body>
</html>
What am I doing wrong? If nothing, how can I get around this?
Right padding fixed the problem.
<style>
.special p { display:none; }
.special:hover p { display:block; }
</style>
<table>
<tr>
<td style="width:200px">Things</td>
<td style="position:relative; width:220px">
<div style="position:absolute;right:0" class="special">
<img id="shows" />
<p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
</div>
</td>
</tr>
<tr>
<td style="width:200px">Things</td>
<td style="position:relative; width:220px">
<div style="position:absolute;right:0" class="special">
<img id="shows" />
<p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
</div>
</td>
</tr>
</table>
Can I make this work? Ie, can I make the #special p expand over the top of 'Things'? As I currently have it set up #special won't ever grow outside the 220px wide td. Any ideas?
I am still not fully clear, but try this. This will allow the TD to grow when the content is displayed.
<table>
<tr>
<td style="width:200px">Things</td>
<td style="text-align: right;">
<div class="special">
<img id="shows" />
<p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
</div>
</td>
</tr>
</table>
I'm not 100% sure what you are trying to achieve, but wow about taking away the position: relative from the td and making the .special p s position: absolute but not the special elements themselves?
That way, your special elements will be in the normal table flow, and the paragraphs popping up will leave the table cell's boundaries.