Tablesorter StickyHeaders shifts columns over on scroll - javascript

In two separate parts of our software, (entirely different code) Sticky Headers have always done this and we've lived with it. I apply the StickyHeader widget and put these in a .wrapper container, and it works as intended: the header will follow on scroll. However, it always causes our headings to shift to the right. My .wrapper is simple:
.wrapper {
position: relative; overflow-y: auto; height: 652px;
}
th {
background-color: #003366;
color: #ffffff; font-weight: bold;
padding: 3px; text-align: center;
}
Please excuse the obfuscation, but I am not (legally) allowed to make a jsFiddle or provide any more clarity than this. Notice the second "black blob" is shifted completely off while the rec is clearly off-center.
Before Scroll
After Scroll

Here, the issue was the CSS:
* {box-sizing: border-box;}
However, when applied to the demo, I could not reproduce the error. I've tried to determine what else in conjunction would be causing the issue, but whatever I tried, it would always resolve back solely to border-box. I answer my own question with the advice: if you happen upon this rare bug affecting your sticky tables, run something like
/* give to all elements, excluding report_table */
*:not(.report_table *) {
box-sizing: border-box;
}

Related

Avoid margin of the first page - printing

I'm trying to avoid the margin of the first page. All tables (there are many) are fitting a page. But the first one has a margin.
I tried: so many ways. Is there a way with CSS to avoid margin on first page? I tried on body, html, page...
I've searching a lot. But I can't find a solution. I though of creating an element and put it on the first page.
My page has many tables. One per page. Except the first one fits on one page due to the margin.
#media print {
#page {
margin: 0mm;
size: auto;
padding: 0;
}
#page:first {
margin: 0px;
color:blue;
}
html {
margin: 0px;
}
body {
display: table;
margin: 0mm 0mm 0mm 0mm; /* margin you want for the content */
margin-top:0px !important;
}
.tableSchedule tr {
padding-top: 0px;
height:45px;
}
.tableSchedule {
table-layout:fixed;
width:1130px;
margin:0;
page-break-after:always;
}
I had a similar problem with images and divs in the past. Turns out that even if you set the margin to 0 some browsers will seperate elements, particularly inline elements, with a space of 1 em. Setting the font-size: 0 for the parent element removed that "phantom" margin. Just don't forget to change the font size back for the child elements!
Alternatively you can style the first table with a negative margin to cheat. i.e. margin-left: -15px . Or so depending on your needs.

Get Rid of White Space Under Footer On Full Screen Browser And Large (49 inch) Screens

Frankly I have seen and read so many posts on this topic to the point that I almost shied away from asking the question but none has covered the scope of or solved my problem so far.
I get white screen on this website only when I put the browser on full screen (press F11). The space is even worse on large screens such as 49 inch televisions if their browsers are also put to full screen mode. I am using blankslate theme and used elementor plugin to build the site so I dont have an "official" footer per say. How best can I get rid of this because it looks really ugly on huge screens. Solutions such as this one and the like but they dont work including setting the
height: 100vh; //100% /* in custom.css */
Okay a few things:
Your body has margin of 8px on it:
body {
margin: 0;
}
You want to put height: 100vh; on the inner container of the content. It also has margin-top: -1%; for some reason:
.elementor-element-9q9c7yv {
height: 100vh;
margin-top: 0;
}
This fixes everything except there is an empty div on the bottom that is adding 1px of white space to the footer, get rid of it:
elementor-container elementor-column-gap-no {
display: none;
}
There ya go :)
Try:
html, body {
height: 100%;
}
If that doesn't work, you could put this plus the above:
footer {
position: absolute;
bottom: 0px;
left: 0px;
}

CSS overflow: auto by 'touching' bottom div

I want to make a div scrollable when its touching the bottom div.
I tried this:
margin-bottom:30px;
position: relative;
overflow: auto;
but it didn't work.
I created a fiddle tho show you my problem:
https://jsfiddle.net/wp3wvuj2/1/
For explanation: When you type in in a input field a new field is added to the div (This function is simplified). I want that before the input fields touch the element below (the START-div) it gets scrollable (overflow: auto).
Somebody have an idea?
Edit:
I noticed that nobody understands my problem.
I'll try to explain it better:
I have list where players add their names. The list has minimum 4 players maximum ∞.
The start buttonis placed at the bottom. The problem is in a iphone 5 it looks like this:
And now if i would add another player input field it would Overlap with the START-Button. Thats the reason why I want it scrollable now. I already get that work with a fixed height, but i want it responsive!
Because on a iPad for example it looks like this:
And I want prevent an overlap with the start button like this:
So it should get scrollable before it overlaps (dependent on the display size).
Updated JS fiddle, try this, i have updated CSS part in your code
https://jsfiddle.net/wp3wvuj2/2/
.main_input {
width: 209px;
top: 70px;
margin: auto;
margin-bottom:30px;
/* position: relative */
overflow: auto;
height:216px; //Give some height always to apply overflow auto
}
.main_start {
width: 100%;
margin: auto;
/* position: absolute */ //Not required
bottom: 20px;
font-family: Pamela;
font-size: 36px;
text-align: center;
}
I've only changed the styles on class main-input
.main_input {
width: 226px;
height: 234px;
top: 70px;
margin: auto;
margin-bottom:30px;
position: relative;
overflow-y: auto;
}
EDIT:
Please note for this solution to be able to work, I needed to remove the Top and Bottom positions of some elements as they were breaking the layout. Please use Margins or Paddings to get that styling you desire.
This now works to scroll once the space runs out on the page.
https://jsfiddle.net/wp3wvuj2/5/

Relative positioning at width 100% doesn't make the content go edge to edge

I've been facing this problem many times and I decided to ask. When I use relative positioning with width:100%, the content doesn't go edge to edge of the screen. On the other hand, when I use absolute or fixed positioning, the content does go edge to edge. Why is this? Here's a sample code to show my problem:
#container {
display: block;
width: 100%;
position: relative;
height: 150px;
border: 1px solid;
text-align: center;
}
<div id='container'>
<br />
<br />^
<br />
<- Why do I have these spaces? ->
<br />\/
</div>
Result:
What I want:
While Googling, I did come across this page, but it looks like this problem was caused by not applying text-align: center.
You have to reset default body margin / padding.
box-sizing: border-box; will also help to include border size in width calculation.
body {
margin: 0;
padding: 0;
}
#container {
display: block;
width: 100%;
position: relative;
height: 150px;
border: 1px solid;
text-align: center;
box-sizing: border-box;
}
<div id='container'>
<br />
<br />^
<br />
<- Why do I have these spaces? ->
<br />\/
</div>
Reference: body Typical default display properties - box-sizing
I second emmanuel's response, and the ultimate answer is to clear all default styles with a CSS reset: http://meyerweb.com/eric/tools/css/reset/
You ask in the comment why there is a non-zero value for margin and padding there. There are lots of styles in place by default in your browser such as font-sizes and weights on headings, list style types, etc..
The problem is that browsers don't always render these default styles precisely the same. To combat this, many people have been using a CSS reset (Eric Meyer's version above is the canonical one) that clears out every default style. Be careful the first couple of times you do this, however, because it really clears out everything. This means no padding on ul tags, no padding on anything, no numbers on ol items.

Div Content Not Appear

I have a menu that under certain circumstance some items show a little red box (think facebook friend count).
I've recently redone the css targetting the menu but nothing should have changed to cause the problem I'm seeing.
It's a simple div like this:
<div id="request-count" class="noticount"></div>
The CSS looks like:
.noticount {
background: none repeat scroll 0 0 #E43C03;
color: #FFFFFF;
font-size: 0.6em;
font-weight: bold;
position: absolute;
top: 3px;
left: 3px;
text-align: center;
}
I've checked the page sounce and my javascript is correctly setting the value so the div ends up looking like this:
<div id="request-count" class="noticount">1</div>
The only way I can get this to actually show up is by manually hacking the live CSS and setting the Width and Height, then it shows up without a problem.
The really odd bit is that the content "1" never shows in the div either. Very confused over this and really don't know what to try.
Not sure if this is significant or an oddity with FireBug but sometimes this div appears in the code view slightly tranparanent which usually disnifies that an element is display:none which I'm not getting either.
What can I try to solve this?
EDIT
Here is a fiddle displaying the problem:
http://jsfiddle.net/UYa5Z/
Not sure of the exact reason, but it appears that the formatting of your font-size is not working as intended. With the example that you linked, if you simply change the font-size of the noticount class from em based to px based it seems to fix the issue.
.noticount {
background: none repeat scroll 0 0 #E43C03;
color: #FFFFFF;
font-size: 10px; /* this instead of font-size: 0.6em */
font-weight: bold;
position: absolute;
top: 3px;
left: 3px;
text-align: center;
}
JSFiddle
Edit:
Based on my second comment below, I investigated the issue further. As this JSFiddle shows, you can keep .noticount's font-size relative if you remove the font-size: 0; from both ul#moomenu and ul#moomenu li. I'm not sure what the purpose of setting those to 0, but given you use px (instead of em) on ul#moomenu a and ul#moomenu ul a I'd suggest using my first suggested fix as it's consistent with the other font-sizes you set in your css.
Make sure the parent of.noticounthas a relativeposition that will fixe the problem
.noticountParent{
position:relative;
}
.noticount{
position:absolute;
}
Html:
<article class=noticountParent>
<div id="request-count" class="noticount">1</div>
</article>
Your ul#moomenu and ul#moomenu li define font-size:0
Since the .noticount has font-size:0.6em, the resulting font size is... 0
A font size of zero is invisible.

Categories