I have a sticky navbar that is vertical but when the screen is too small I want it to be scrollable. Now I can only get to see the bottom categories in navBar only when I scroll to the bottom of the page and then it scrolls.
On the second photo I'd like it be scrollable when o hover over it with my mouse.
I've tried:
Setting a height to it but the categories change so the height is changes.
Setting height to fit content
Setting max-height to max-content
Without a specific code sample I just give you a "random code sample" mimicing the navbar. You have to implement the code yourself.
Add a max-height: 100vh; to the navbar. This will limit the navbars height to the height of the browser window height.
Allow a vertical overflow and scrollbar by using overflow-y: auto; on the navbar. In combination with the max height, it allows an overflow of the navbar itself instead of resizing the height.
nav {
max-height: 100vh;
overflow-y: auto;
}
/* for styling purpose only */
body {
margin: 0;
}
nav {
width: 150px;
}
nav a {
display: block;
box-sizing: border-box;
width: 100%;
text-align: center;
background-color: blue;
color: white;
text-decoration: none;
padding: 1em;
border: 1px solid darkblue;
}
<nav>
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7
Link 8
Link 9
</nav>
Related
How can I get all elements to fit in a container element that is fixed to the size of the window?
I have a container element that is fixed position and flexbox, it does not stay within window. The menu is 50px and I want the main element to fill the remainder of the window height.
I have a container my-app and inside it, 2 vertically stacked elements (flex-direction = column). It works as expected in Chrome but not Edge or Firefox.
my-app {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
app-menu {
border-bottom: 2px solid black;
width: 100%;
height: 50px;
background: lightcoral;
box-sizing: border-box;
}
app-my-view {
display: flex;
flex: 1;
width: 100%;
background: lightgreen;
}
https://stackblitz.com/edit/2-column-scroll-v2
I've got it working by using a fixed position menu sticking to the top and using padding to offset menu height in the main content area. However I thought it would be better to use approach with 2 stacked elements without using fixed menu .
See here: https://stackblitz.com/edit/2-column-scroll-v1
I'm currently working on my very first responsive webdesign working with Bootstrap 3.
What I now have is a full-width grid of user profile images. These images have a parent container which must be fully filled by the image. The parent container must have a fixed height because of the requested layout.
The problem is: Using CSS I only know how to fit either the width or the height, not depending on the size of the container.
You can see the problem in this jsfiddle:
http://jsfiddle.net/usD2d/
li /* container */ {
display: block;
overflow: hidden;
float: left;
width: 25%;
height: 100px; /* something fixed */
}
li img {
width: 100%;
min-height: 100%; /* destroys aspect ratio */
}
If you have a large screen, the images will fit perfectly. Having smaller devices the images will lose their aspect ratio.
Surely I could use #media(min-width) and change the img from width to height, but due to using BootStrap and having a very dynamic layout (collapsing sidebar, etc) this could become very tricky.
Is there any CSS only solution? If not, is there a great jQuery solution maybe also providing a focus point where to keep the focus on when cropping?
Thank you very much in advance!
If you want to fill entire space with image clipping it, ratio will be preserved but image will be partially hidden. vertical-align and negative margin can be used.
example: http://jsfiddle.net/usD2d/2/ keeping center image in center(like would a background-position: center center ;.
ul {
width: 100%;
}
li {
display: block;
float: left;
width: 24%;
height: 150px;
overflow: hidden;
border: 1px solid black;
text-align:center;/* set image in center */
line-height:150px;/* set image or text right in middle;*/
}
img {
min-width: 100%;
vertical-align:middle;/* okay see it in middle , but you can tune this */
margin:-50% -100%; /* okay, you can tune margin to crop/clip other area */
}
the negative margin reduce virtually size of image wich will center(text-align ) and sit on baseline set by line-height.
This a CSS cropping.
I think that you want the image to determine the width of the <li>. I removed the width: 25%; property, and your images kept their aspect ratio in your fiddle. So change
li /* container */ {
display: block;
overflow: hidden;
float: left;
width: 25%;
height: 100px; /* something fixed */
}
to
li /* container */ {
display: block;
overflow: hidden;
float: left;
height: 100px; /* something fixed */
}
I have a type of navigation that is contained within a 'pill' of sorts.
I need the pill (surrounding container) to automatically resize based on the amount of elements in the navigation.
I have the pill container centered on the page, so I don't think a float: left; or float: right; will work because it will override the margin: 0 auto;.
Here is a fiddle with an example of my issue: http://jsfiddle.net/TylerB/EU6XG/1/
How can I set this div element's width based on the amount of navigation items in the list?
Simply add display: table
DEMO http://jsfiddle.net/kevinPHPkevin/EU6XG/6/
.tabset-container {
margin: 0 auto;
position: relative;
top: 25px;
z-index: 1;
background: transparent;
text-align: center;
display:table;
}
Also add overflow: hidden to the tabs so then your rounded corners still show
.tabset {
overflow:hidden;
}
I was going in jQuery direction - fiddle (get the width and pass it trough .css())
+ display: inline-block on .tabset
We've got a sticky footer that is working great in anything WebKit based but doesn't seem to work in Firefox (Or new versions of IE either).
There is extra space being generated below the footer of around 200px in height that is inheriting the background colour of body.
The extra space does not seem to be part of any div that we can find, including html, body, content, wrapper etc. etc. It also does not seem to be caused by any sort of padding or margins on any elements.
We've built it on Ryan Fait's CSS Sticky Footer method that uses a push div inside of the wrapper div, with a separate footer div.
You can check it out at redesign.treepuncher.com/freetrial/
Iframe at the bottom of your page and copyright is creating unnecessary space. You can stop iframe from being displayed if that does not affect your website's functionality.
Try this code:
.copy {
color: #FFFFFF;
float: right;
font-weight: 100 !important;
margin: 95px 15px 0 15px; //Fixes margin at the bottom of this div
}
iframe {
display: none; //Stops iframe from being displayed
}
The following css should make it sticky and remove unnecessary space at bottom
.footer {
background-color: #006837;
bottom: 0;
color: #FFFFFF;
font-family: "roboto",sans-serif;
font-size: 12px;
font-weight: 100;
height: 120px;
position: fixed;
width: 100%;
}
.wrapper {
height: auto !important;
margin: 0 auto;
min-height: 100%;
}
I'm implementing a simple ribbon-like heading that extends off the content area (both left and right) displaying a 3d effect with an image background (no css3 tricks).
I tried floating, negative margins and finally relative positioning but my problem is that all the solutions I tried increased the content's scrollable width (extending it to the right). I'd like to keep my ribbon as a "background effect" keep the content's scrollable width.
Check out my simplified working example: http://jsfiddle.net/c5cVG/16/
body {
background: blue;
}
body>div {
width: 200px;
margin: 0 auto;
background: white;
}
body>div>p {
padding: 5px;
}
body>div>h2 {
overflow: hidden;
padding: 10px 20px 5px;
background: red;
width: 190px;
left: -15px;
position: relative;
}
If you set the viewport width below 215px, you can see that the left-edge extension of the red "ribbons" stay outside of the viewport, and cannot be scrolled inside using the horizonal scollbar.
I'd like to get the same effect on the right-edge extension (overflowing the white area), but it pushes the right edge of the scrollable area and makes itself scrollable.
Any help or demo would be appreciated.
OK, I found a solution that looks fine for me in this thread: https://stackoverflow.com/a/2650215/2084434 (answer by Nikolaos Dimopoulos)
Wrapping the whole content in another div and applying
#wrapper {
width: 100%;
overflow: hidden;
min-width: 200px;
}
works OK.
Here's the updated fiddle: http://jsfiddle.net/jJaxp/2/