I've been trying to attach a scroll bar when my div with class "mytable" overflows.
It seemed to work out when I recreated a chunk of this html in a new file with fresh css but there's so much stuff to move that I'd rather figure out whats wrong with this one.
Below is the html structure I have and this is how it looks like on my browser
<body>
<div class="wrapper">
<!-- The Modal -->
<div class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<div class="mytable">
<div class="row header">
<div class="cell small">
Kennel
</div>
<div class="cell small">
Type
</div>
<div class="cell medium">
Name
</div>...and bunch more rows
giving overflow hidden property to the html and the body removes the regular scroll bar but I cant manage to attach a scroll bar to my main div which acts as a table with the class name "mytable"
Tried using fixed size on height or width as advised on similar posts but none of them seemed to work.
html, body {
height: 100%;
overflow: hidden;
}
.wrapper {
margin: 0 auto;
padding: 40px;
max-width: 800px;
}
.mytable {
height: 100%;
overflow: auto;
margin: 0 0 40px 0;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: table;
table-layout: fixed;
}
Change your display property of .mytable from table to 'block' or whatever (except 'table' and 'inline' elements). It will start showing scrollbar
Try using
overflow: scroll;
in the div you want to have scroll bar.
Related
Context:
I am trying to create 3 charts on 1 row (each has a minimum width) such that on window resize, the charts should also resize and may go to next row depending on the browser total width.
Problem:
Currently, I am missing something in the css because the chart is overflowing within the demo container below. The tooltip looks fine, but only half of the chart is seen in the container and both the axes are also hidden.
Has someone implemented something similar before? I want to understand how to load the charts in the div.
P.S. In the code below, highcharts-container is the inbuilt div which contains the charts. I am using the latest version of Highcharts and Angular 7.
My current html code -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md4 demo>
<div class="demo-container">
<highcharts-chart [Highcharts]="Highcharts" [options]="options1" [callbackFunction]="cb1">
</highcharts-chart>
</div>
</div>
<div class="col-lg-4 col-md4 demo>
<div class="demo-container">
<highcharts-chart [Highcharts]="Highcharts" [options]="options2" [callbackFunction]="cb2">
</highcharts-chart>
</div>
</div>
<div class="col-lg-4 col-md4 demo>
<div class="demo-container">
<highcharts-chart [Highcharts]="Highcharts" [options]="options3" [callbackFunction]="cb3">
</highcharts-chart>
</div>
</div>
</div>
</div>
My css code (The main part) -->
.container-fluid{
width:100%
}
.demo{
margin: 20px 0;
min-width: 448px;
}
.demo-container{
position: relative;
border: 1px solid transparent;
box-shadow: 0 0 20px #1793f5;
width: 100%;
height: 100%;
}
.highcharts-container{
height: 100% !important;
width: 100% !important;
display: inline-block;
vertical-align: middle;
}
You could try to include the following CSS as a part of demo-container or container-fluid... one of it should do the deal for you.
height: 100% !important;
width: 100% !important;
Update
one of the harder challenges i have encountered, but add this to the style.css
and you have your contents dynamic inside its container.
.highcharts-background, .highcharts-root, .highcharts-container {
max-height: 100%;
max-width: 100%;
}
is this what you are looking for?
This was made using images of the graphs in the links you posted. I also used flexboxes which seems to be what you are looking for.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container-fluid div {
width: auto;
border: 2px solid red;
min-width: 33%;
}
.container-fluid{
display: flex;
flex-wrap: wrap;
border: 2px solid blue;
justify-content: center;
}
<div class="container-fluid">
<div class="chartOne">
<img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
</div>
<div class="chartOne">
<img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
</div>
<div class="chartOne">
<img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
</div>
</div>
I'm not quite sure how to title this better, so edits are welcome.
Basically I wanted to animate a right side sliding-in panel in a page over a fixed div panel.
My jQuery ajax does what its supposed to do to animate it. However, I just noticed that after adding the sliding-panel there was a horizontal scroll bar. Indeed it was my sliding-panel.
How can I "hide" it without extending or allowing the user to scroll horizontally and find the empty panel?
My HTML looks like this:
<div class="left-pane">
<div id="left-conent"></div>
</div>
<div class="sliding-panel" style="position: absolute;z-index: 1000;width: 400px;height: 90%;background-color: whitesmoke;right: -400px;">
<div id="pane-content-edit" class="pane-content">
</div>
</div>
<div id="right-pane" class="right-pane">
<div id="pane-content" class="pane-content">
...
</div>
</div>
CSS:
.right-pane{
width:400px;
height:90%;
background-color: whitesmoke;
z-index: 999;
right: 0;
position: absolute;
Apply to body if no overflow is needed. Read about overflow
.right-pane {
width: 400px;
height: 90%;
background-color: whitesmoke;
z-index: 999;
right: 0;
position: absolute;
}
body {
overflow: hidden;
}
<div class="left-pane">
<div id="left-conent"></div>
</div>
<div class="sliding-panel" style="position: absolute;z-index: 1000;width: 400px;height: 90%;background-color: whitesmoke;right: -400px;">
<div id="pane-content-edit" class="pane-content">
</div>
</div>
<div id="right-pane" class="right-pane">
<div id="pane-content" class="pane-content">
...
</div>
</div>
As a possible solution - use overflow-x: hidden on the body tag. But in case the user doesn't have a screen big enough to show the whole, horizontal scrollbar will not appear. Hence the usability of your website will be significantly reduced.
I can suggest you to have a look at this css library in order to achieve the effect of sliding panel - https://daneden.github.io/animate.css/. Then you just need to care about hiding your panel with display: none and when you need to show it - add bounceInRight class to it.
I'm planning to create a layout where one of the DIV is fixed using Bootstrap. However, the DIV is creating an undesirable effect.
JSFIDDLE: http://jsfiddle.net/cstoq3ec/
Here's the HTML
<div class="container">
<div class="row">
<div class="col-6">
<div class="simple">
This is just a plain block
</div>
</div>
<div class="col-6">
<div class="simple">
This is just a plain block
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="fixed">
hey
</div>
</div>
<div class="col-6">
<p class="scroll">
This is the scrollable section.
</p>
</div>
</div>
</div>
CSS:
.fixed {
position: fixed;
width: 100%;
background-color: red;
color: #fff;
box-sizing: border-box;
}
.scroll {
height: 1000px;
background-color: grey;
color: #fff;
}
.simple {
background-color: grey;
color: #fff;
margin: 15px 0;
}
Notice how the red color DIV is extended all the way to the right side! I want it to stay within its DIV. How should I proceed?
You can't. that's why you have position:absolute.
Once you use position:fixed on an element you get it completely out of the HTML flow so it does not matter what their parents are and their size. You used width:100%so it's 100% of window width.
Is you wonder why, then, it is affected by parent padding (left and top margin), it is because you haven't set any "left, top, bottom or right value" and modern browsers automatically set the values based on the parent. use your own value to check as you can see here: FIDDLE
.fixed {
position: fixed;
width: 100%;
background-color: red;
color: #fff;
box-sizing: border-box;
top:0;
left:0;
}
which, btw, in my opinion you should never rely on as You may have unexpected problems in some browsers. Once you use absolute or fixed position is highly recomend to set at least "top and left values".
If You need the fixed element same width as Your parent I would use javascript / Jquery so you calculate the width of the parent and then use the value to your fixed element.
As you can see ".template-1" with fixed height and ".card-container" have overflow hidden
the issue is when we type some text in .text field its height increases towards top, and all elements from top gets hidden.
If I removed content editable true or pre-inserted text is there..it works fine.
What I want is- Content/text should hide while typing beyond (bottom) of card-container - instead of hiding upper elements ie. image and .title
Here is code snippet
<div class="template-1">
<div class="card-container">
<div class="card-content">
<div contenteditable="true" class="title editable-field">title title title</div>
<div class="visual">
<img src="http://placehold.it/155X55">
</div>
<div class="text editable-field">
Text text
</div>
</div>
</div>
</div>
.template-1{
height: 200px;
}
.card-container, .card-container{
height: 100%
}
.card-container{
overflow: hidden;
border: 1px solid green;
}
.editable-field{
border: 1px solid red;
}
and Jsfiddle for same
https://jsfiddle.net/qkmLsy4h/
EDIT: .editable-field will have height: auto; always
Firstly, apologies for what appears to be a very common question, looking at the amount of similar questions, you are forgiven for being annoyed at yet another, but regardless of all the others that I have read (and tried to implement), and many other links found on Google, I'm still struggling to solve my problem, so I'm sorry, but here goes..
The footer I have is fine when the main content is longer than the browser window, but when there is very little content, rather than sticking to the bottom of the browser window, it sticks to the bottom of the main content, leaving a horrible blank space below the footer.
I've created a simple(ish) fiddle HERE using a stripped down version of my code.. here is the code for those that are able to see the issue without "fiddling"..
<body>
<!-- Header -->
<div id="header-wrapper">
<header class="5grid-layout" id="site-header">
<div class="row">
<div class="12u">
<div id="logo">
<h1 class="mobileUI-site-name">HEADER</h1>
</div>
</div>
</div>
</header>
</div>
<!-- Main -->
<div id="main-wrapper" class="subpage">
<div class="5grid-layout">
<div class="row">
<div class="12u">MAIN CONTENT </div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer-wrapper">
<footer class="5grid-layout" id="site-footer">
<div class="row">
<div class="12u">PROBLEM FOOTER</div>
</div>
</footer>
</div>
</body>
and here is the css..
#header-wrapper {
background: #12ff00;
height: 110px;
position: relative;
padding: 0.0em 0 1em 0;
}
#main-wrapper {
border-top: 3px solid #662d91;
border-bottom: 3px solid #662d91;
background: #ff5a00;
position: relative;
padding: 1em 0 2em 0;
}
#footer-wrapper {
background: #ff00fc;
position: relative;
padding: 1em 0 1em 0;
height: 100px;
}
Granted, a lot of the above Divs aren't needed for the sake of this demo, but I have left them in just in case it is one of these thats causing the problem. I'm still new to this, so I honestly have no idea.
so basically, how on earth do I get that footer to behave, previous attempts based on other Stack Overflow answers have left me with either no footer, or a footer that sits in the center of the screen regardless of whether there is a lot or little content.
Any help will be gratefully received.
I have answered this question before
Click Here
Or see this JSFiddle for a working example of a sticky footer.
HTML
<div class="wrapper">
<div class="header"></div>
</div>
<div class="footer"></div>
CSS
* {margin: 0;}
html, body {height: 100%;}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px; /* the bottom margin is the negative value of the footer's height */}
.footer { height: 200px;background-color:#000;}
The idea is that the bottom margin is the negative value of the footers height
Have you tried:
html, body {
height: 100%;
min-height: 100%;
}
#main-wrapper {
height:100%;
}
Here's a working DEMO1
UPDATES:
I've changed a few things in your code, but now its working!
Here are the changes:
added a #container for the header and main divs.
I've changed the footer padding from em to px, because I need precise height.
I gave the main-wrapper's background to #container
and the border-bottom to footer as border-top
DEMO2
The way I ussualy do this is using
http://www.cssstickyfooter.com/using-sticky-footer-code.html
If you can, try to stick close to that, it has compatibility with older browsers.
I didn't find better alternatives to this and is well explained