I am trying to create a sticky table header. Using this CSS code it works perfectly on a standard table (it will remain sticky all the way to the bottom of the table.
th {
background: white;
position: sticky;
top: 0;
}
However I need the table to be responsive for mobile devices (ability to scroll right). Unfortunately, it no longer works when I add the bootstrap table-responsive class (please see my https://jsfiddle.net/b8x16eht/)
How can I get it to function on both mobile and desktop (without setting fixed heights)
EDIT: Thanks to #UfguFugullu for pointing out another possible solution which is an improvement. It works well for desktop however it still does not work in responsive mode (when viewing from a smaller window). Updated fiddle here: https://jsfiddle.net/aqfjozrm/
.table-sticky th {
background: #fff;
position: sticky;
top: -1px;
z-index: 990;
}
I managed to find a website which has gotten it to work on responsive tables as well as full width although it is not using bootstrap https://www.timeanddate.com/weather/new-zealand/auckland/hourly
I am starting to think that we need to add a javascript listener to offset the thead position from the body then update the top position style of the thead. Any js gurus here :)?
Related
I am having a lot of trouble getting my button in a BigCommerce theme to vertically align to the bottom. Since it is a responsive design, absolute positioning doesn't quite get the work done. Unfortunately it is the only thing that seems to move the buttons at all; I've tried all sorts of methods with relative positions and the vertical position will not budge. It seems that the products are listed within a list that functions as a table.
Here is the css for the button itself. I added the stuff below "border" and have tried many different ways as well as tried changing display to inline-block.
.product-grid .ProductActionAdd .button {
display:block;
background: #424546;
border: 1px solid #303334;
position: relative;
vertical-alignment:bottom;
bottom:0;
}
I can provide css for the other parts as well. Below is basically what I'm trying to fix. Those with 1-line product names would have the "in stock" button moved up.
image of buttons and problem
Without the full HTML/CSS or a jsFiddle it's going to be difficult for me to provide you with the complete HTML/CSS solution, but here's what will fix the problem:
Wrap the button and description inside of an element and set position:relative on that wrapper element
Give the buttons the following style: position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 5px;
Set the description to a fixed height and give the wrappers a fixed height
That should solve your issue. Here's an example
This wordpress website http://www.sulu13.net/14 has a responsive logo and menu that I wanted centered in order to line up with the edges of the content below in the posts. So I added:
.tc-header .brand a { /* Logo */
position: relative;
left: 200px; }
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
left: 380px; }
Upon adding this CSS, the screen gets a horizontal scroll bar and has white space (equal to the left: 380px) on the right side of the screen. Something tells me it has to do with the responsive menu button sharing the same classes, .navbar .navbar-inner as the non-responsive menu. I would change this, but my knowledge of PHP is limited so I wouldn't know where to start.
I've tried removing the JQuery menu itself, but this had no effect, (my guess is..) because I didn't actually remove the responsive menu button/menu.
Here's the main CSS file - http://www.sulu13.net/14/wp-content/themes/customizr/inc/css/green.css?ver=3.1.6
Any ideas would be appreciated, thanks in advance for your time.
Ian
width:100% (default width) + 380px (left value) = 100% + 380px
You would need to resize the navigation to compensate for the moving over if you want it to leave it the way it is, meaning something like width:calc(100% - 380px);
However, I'd recommend not using absolute position to be more responsive and not require the manipulation of values.
Remove the left:380px
Apply this:
#menu-my-menu {
float:right;
}
This approach also allows more list elements to be added and they will automatically be positioned correctly
Use this:
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
}
So, remove the left:380px. I don't understand what you mean by centering the menu and aligning with the text below, as the container of the text is wider than the one of menu and logo together and if you align the menu with the post below it will not be centered anymore. But removing left property should give you what you want.
Thanks for the help guys!
I went back and gave it a closer look, turns out I was able to solve the issue with a wrapper and a few media queries for width adjustments.
I want to achieve that result as my web app layout:
I create application for mobile usage first. I want to fixed top menu that stretch to it content and content at the bottom of this menu. Content height can be very long but I want to use overflow-y: auto;. I use CSS display: table; for container and display: table-row; for menu and content to solve this problem. JSFiddle example here.
Which pros and cons should I expect? I.e. mobile browsers interoperability, performance issues and so on.
I had this exact same issue and I solved it in exactly the same way you did. The only issue I ran into was that the row on the bottom:
#content {
display: table-row;
height: 100%;
}
IE will not respect this and it will see height:100%; and instead of taking of the remaining space of the table like every other browser it will be equal to 100% of the entire table causing your layout to render incorrectly. The only way i found to solve this was to use a bit of jquery with a window resize function to basically only fire when it's IE and apply a pixel value height to the #content based on what it should be.
I am currently developping a website using twitter Bootstrap as a base. I develop using Chrome and there is no problems on it but when viewing the same page with Firefox, the menu and the content position themselves weirdly, as if there is no space.
You can take a look there:
http://www.penthousemontreal.com/
http://penthousemontreal.com/collections/moderne/
What could be causing the trouble?
update
Your are using a top: -100px; (relative position) on the .brand class (the image in your nav bar). The image will still take space in FF / IE on it's original position. Cause the float:left; of this images your content floats on the right side of this 'empty space'. A solution can be found here: CSS using negative relative positioning issue. Replace top with margin-top:
.brand {
margin-left: 20px !important;
margin-top: -100px;
position: relative;
}
Maybe your bootstrap files are changed / corrupt. You import bootstrap/css/bootstrap.css (and bootstrap-responsive.css) from wp-content/themes/MMS/style.css which seems to be version Bootstrap v2.3.2.
When i load your site with //netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css the problem is fixed. See:
My page I'm working on is at http://www.derekbeck.com/1775/excerpts/
It looks all fine in desktop browsers, but on mobile screenshots, like below, it is forced to wrap. (see below the image for my questions...)
(full sized image)
I've tried to make it wrap gracefully, but I have two questions:
1) Is there some CSS way to control how the div inline-block (class="exnote2") Want the entire chapter?<BR>Sign up for the newsletter! wraps?
Specifically, I want:
1a) that padding-left: 20px; on the left side of it to be non-existent if it is on a second line as below (but it is necessary to keep it 20px from the PDF icon if it is indeed all on one line),
1b) some whitespace above the div inline-block (class="exnote2"), so that it is not so close to the "Read Online" icon. If I add padding-top or margin-top however, it effects the nice layout for the desktop version (linked above).
For what it's worth, for 1b) above, I did jury-rig a solution together for the entire inline block that follows the image, the entire div inline block that contains text (class="exitemdetails"). I did it this way:
.exitemdetails {
margin-left: 25px;
/* The following allows for graceful wrapping for mobile phones */
padding-top: 20px;
position: relative;
top: -10px; /* half the padding-top */
}
I could jury-rig something for the Want the entire chapter?<BR>Sign up for the newsletter! line too, but I suspect under different conditions it would not display as I hoped. Hence, I post here hoping for a better, more elegant solution, namely, how to use CSS to control the way div's wrap, and the spacing between them only if they do wrap.
2) I have one other question related to this: is there no simple CSS way to shrink that book cover image down when there is not space enough? I tried this, but it does nothing:
.eximage {
width: auto;
height: auto;
}
.eximage img {
max-width: 100%;
height: auto;
}
Thanks for looking!
Derek
Have you considered using css media queries to change the layout of your page at different screen sizes? Might be worth a shot.
http://www.w3.org/TR/css3-mediaqueries/