How to create a Horizontal Scrolling Menu starting from the centre as shown in the image below? I need to add scrolling to my page.
.vist {
text-align: center;
overflow: auto;
white-space: nowrap
}
If you make a width of 200% of the screen viewport, that should do it
.vist {
width: 200vw;
}
Related
.width-100vw {
width: 100vw;
}
.height-100vh {
height: 100vh;
}
.layout {
min-width: 1000px;
}
.flex {
display: flex;
}
.justify-center {
justify-content: center;
}
.absolute-scroll-x {
overflow-x: auto;
overflow-x: overlay;
}
.width-100 {
width: 100% !important;
}
.height-100 {
height: 100%;
}
.left-side {
width: calc((7 / 16 * 100%));
background-color: orange;
}
.right-side {
width: calc((9 / 16 * 100%));
background-color: red;
}
<div class="width-100vw height-100vh flex justify-center absolute-scroll-x">
<div class="width-100 height-100 flex layout">
<div class="height-100 left-side">
</div>
<div class="height-100 right-side">
</div>
</div>
Loom link
When I decrease the screen width to 344px (in chrome dev tools), then as per dev tools, the layout div is of width 1000px (correct), left div is of width 437.5px (correct) and right div is of width 562.5px (correct).
But scrolling clearly shows that the left div is way smaller than the 437.5px. Why is it so?
Answer is very simple. You can not scroll to the left past the beginning of the page. Y-axis scrolling begins at 0 and goes on to the end of the content, if you add more content it goes further, but if you move content up with lets say top: -5000px scrolling area will not be expanded, everything below 0 just gets cut off. Same with X-axis, everything on the left below 0 gets cut off.
Your main div has justify-content: center; style which puts your layout div always in the center, no matter how big it is. When main div is smaller then layout div, since layout has min-width: 1000px; it puts it to the center and as result everything on the left gets cut off.
Main div
Layout div (centered)
Bigger than Main div. Extends to the right and left, since it is centered, but everything to the left can not be reached with scrolling. Scrolling does not go below 0.
Left side element
Is actually correct size, but looks smaller because can not be accessed via scrolling.
In your case everything can be fixed by just removing justify-center from main div.
Is there any way to remove the horizontal scroll ?
There is no content towards the right but the area remains blank and scrolling comes .
The styles for modal are :
.ticketModal {
width: 1000px;
min-width: 1000px !important;
overflow: hidden;
max-width: 1000px;
}
You should add in your css overflow-x: hidden; to your main div or class, this will help you to remove horizontal scroll
If you don't want the horizontal scroll in the entire app. Simply add
*{
overflow-x: hidden;
}
This will remove the horizontal scroll for all the DOM elements
Here's the example of what I have so far:
https://codepen.io/anon/pen/jQZpNw
My objective is to center that box in the middle to the center of the page, and have the rest of the elements respond appropriately. I've ended up using margin-top: 10%; as a way to center the box, but the problem with this approach is that on smaller browser heights users will have to scroll. It's also not perfectly centered.
Ideally, what I'm looking for, is to:
Center the box (vertically and horizontally)
On small browser heights the center box should sit just underneath the navbar with a small margin, to eliminate the scrolling on small browsers.
Sticky the footer with a gap between the footer and the box when the browser height is really small.
When the center box expands its contents or the navbar expands its contents everything else should move appropriately and not overlap.
I made some javascript buttons to expand the navbar and centerbox so it's easier to experiment with. My actual app is obviously different, this is a stripped down version of what I have.
I tried a bunch of different things to get this to work with no luck, when I used calc() to set it to the center on small browser heights the footer or navbar would overlap the box. I'm out of ideas now, and CSS is not my strong suit. Thanks!
You can try a full page wrapper with a header, the footer, and the div you want centered. Using display:flex; with the flex-direction set to column and justify-content: space-between; you can basically center the div. It will be off a little bit if your header and footer are different sizes but you won't need a ton of media queries or code that is hard to maintain. Set the min-height of the wrapper to 100vh and your footer will be sticky, unless the window is too short to fit all of the pieces.
$('#nav-button').on('click', function(e) {
e.preventDefault();
$('#nav-content').toggleClass('expand');
});
header {
background: red;
padding: 5px;
}
header a {
color: white;
}
#nav-content {
height: 0;
transition: height .3s;
}
#nav-content.expand {
height: 300px;
}
footer {
color: white;
background: red;
padding: 5px;
}
#centered-box {
height: 200px;
width: 200px;
background: green;
margin: 10px auto;
}
#wrap {
min-height: 100vh;
display: flex;
justify-content: space-between;
flex-direction: column;
}
body {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<header>
<nav>
Expand
<div id="nav-content"></div>
</nav>
</header>
<div id="centered-box"></div>
<footer>This is the footer</footer>
</div>
Are you using media queries at all in your CSS? Media queries allow you to style elements a certain way if the browser window size falls within the query.
I have many addons and what I orginally wanted was an additional "addon bar" (like the "Addon bar restored") where I could put my addons' buttons. Unfortunately, Firefox Quantum (version 57+) only accepts WebExtensions or CSS code in the userChrome.css file. I'm trying this second option: modifying the .css file to make the url bar's width as big as I want and make the overflow of the navbar create a "second" bar (or rather, a second line) underneath it, where the overflowing addons' buttons will stay.
With the following code, I can increase the urlbar-container width to what I want, but nav-bar doesn't overflow and therefore the addons' buttons don't overflow to a second row.
#urlbar-container {
min-width: 1000px !important;
}
#nav-bar {
//dsplay: block;
overflow-x: visible !important;
overflow-y: visible !important;
overflow: visible !important;
max-height: 500px !important;
}
Does anyone know how can I: 1- increase the width of the urlbar-container and 2- make the nav-bar overflow so that instead of hiding the overflowing buttons it will display them in a new row underneath it?
This is a working code:
#urlbar {
width: 100%;
}
#urlbar-container {
//min-width: 1000px !important;
flex: 0 0 80% !important; /*change the size to what you like*/
}
#nav-bar-customization-target {
display: flex;
flex-wrap: wrap !important;
align-items: center;
align-content: center;
}
#nav-bar {
min-height: 80px;
height: 100%;
}
It works well, but I wish I could substitute rule min-height: 80px to something less hacky in #nav-bar. I tried 2em and 200%, but only pixels worked. This is bad because if I decrease the window's width, new flex rows are created, but they are cropped out due to the height restriction. Am I missing something?
I am using ngDialog for my popup windows. I can make it as wide as my whole screen but not as tall. Here is a style I am using:
<style>
.ngdialog.dialogcaseeditor .ngdialog-content {
width: 95%;
height: 100%;
padding-top: 5px;
overflow: auto;
}
</style>
height: 100%; does not even near give a maximum height.
Somewhere in the code then after a dialog is opened I can say something like this:
$dialog.dialog.find('.ngdialog-content').css('height', $window.innerHeight);
That will make the the popup window as tall as the whole screen, bu the screen itself will become scrollable, even though the popup does not exceed the screen.
As you can see, there is a vertical scroll bar on the right side.
Can this scroll issue be fixed?
Thanks
You can use CSS to hide scroll bars:
overflow-y: hidden;
overflow-x: hidden;