My div-overflow is not working.
LINK: jsfiddle
HTML:
<div class="modalDialog" id="chooseVariableDialog">
<h4>Choose Variables</h4>
<div class="" id="variablesContainer">
<div class="variablesDiv">
<div class="variablesType">Variables</div>
</div>
<div class="variablesDiv">
<div class="variablesType">Type</div>
</div>
<div class="variablesDiv">
<div class="variablesType">comp1</div>
</div>
<div class="variablesDiv">
<div class="variablesType">extern1</div>
</div>
<div class="variablesDiv">
<div class="variablesType">coord1</div>
</div>
<div class="variablesDiv">
<div class="variablesType">id1</div>
</div>
</div>
</div>
CSS:
div.variablesDiv {
float: left;
width: 150px;
align-content: center;
}
div.modalDialog {
width: 600px;
height:auto;
overflow:auto;
background-color: #F0F0F0;
top: 10%;
}
div.names {
float:left;
width:100px;
padding-left: 35px;
}
h4 {
color:#66CCFF;
text-align:center;
}
div.variablesType {
color: #66CCFF;
float:left;
padding-left: 45px;
}
div.variablesDiv {
float: left;
width: 150px;
align-content: center;
}
div#variablesContainer {
width: auto;
height: auto;
position: relative;
float:left
}
The 6 divs (variables, type, comp1, extern1, coords1 and id1) should be in a line, but I don't know why the overflow does not work.
try this Demo
HTML
<div class="modalDialog" id="chooseVariableDialog">
<h4>Choose Variables</h4>
<div class="" id="variablesContainer">
<div class="variablesDivWraper">
<div class="variablesDiv">
<div class="variablesType">Variables</div>
</div>
<div class="variablesDiv">
<div class="variablesType">Type</div>
</div>
<div class="variablesDiv">
<div class="variablesType">comp1</div>
</div>
<div class="variablesDiv">
<div class="variablesType">extern1</div>
</div>
<div class="variablesDiv">
<div class="variablesType">coord1</div>
</div>
<div class="variablesDiv">
<div class="variablesType">id1</div>
</div>
</div>
</div>
</div>
Jquery
var variablesDivCount = $('.variablesDiv').length;
$('.variablesDivWraper').width(variablesDivCount * 150);
The problem is with
div#variablesContainer {
width: auto;
height: auto;
position: relative;
float:left
}
By making width: auto you're telling the container to adapt to the width of its parent element, not its content.
Try width: 900px; and it will work.
Few css change will make the div scrollable.
1) Remove float:left and add display: table-cell property to div.variablesDiv. You have declared css for variablesDiv in two places. Remove any on of the declaration and use the following css for div.variablesDiv
div.variablesDiv {
/*float: left;*/
width: 150px;
align-content: center;
display: table-cell;
}
2) Modify overflow property of div.modalDialog to overflow-x: scroll
div.modalDialog {
width: 600px;
height:auto;
overflow-x:scroll;
background-color: #F0F0F0;
top: 10%;
}
Related
I have content navigation div overlapping menu navigation div. Please let me know what am i missing here. Please find fiddle link below:
https://jsfiddle.net/y4c2xs5j/1/
HTML:
<div class="top-nav">
<div class="menu-nav">
<div class="row">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
</div>
<div class="content-nav">
<div class="row">
<div class="col-md-12">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div>
<p>
Card content
</p>
</div>
</div>
<div class="col-md-4">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: red;
height: 100vh;
}
.top-nav {
width: 100vw;
}
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
}
As per my understanding, you want to cover only 60px width with menu-nav, and rest want to cover with content-nav, According to below code:
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
}
If I am getting correct then you just neeed to add one more property with content-nav, overflow:hidden;
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
overflow:hidden;
}
By adding overflow hidden, you will get complete width rest 60px with content-nav, That is issue cause by float:left, when we are use float property, then the issue is generated, for the same we have to use overflow:hidden
Try this code. Is this what you needed ?
<div class="top-nav">
<div class="menu-nav">
<div class="row">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
</div>
<div class="content-nav">
<div class="row">
<div class="col-md-12">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div>
<p>
Card content
</p>
</div>
</div>
<div class="col-md-4">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: red;
height: 100vh;
}
.top-nav {
width: 100vw;
display: flex;
flex-direction: column;
}
.menu-nav {
width: 100vw;
background: green;
height: 20vh;
float: left;
}
.content-nav {
width: calc(100vw - 100px);
background: yellow;
height: 100vh;
}
You just need to add one property in ".content-nav" and also add clearifx class in the parent of both tag (.menu-nav, .content-nav)
<div class="top-nav clearfix">
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
float: left;
}
Whenever you use rows and columns, please check if you have at least one container that contains them. The gap you see on the right is caused by the negative margins from the rows.
The easy fix is to have .container-fluid on or inside menu and content nav.
On menu and content nav
<div class="top-nav">
<div class="menu-nav container-fluid">
...
</div>
<div class="content-nav container-fluid">
...
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/x9d3bvLp/8/
Inside menu and content nav
<div class="top-nav">
<div class="menu-nav">
<div class="container-fluid">
...
</div>
</div>
<div class="content-nav">
<div class="container-fluid">
...
</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/x9d3bvLp/7/
You don't need to calculate the width for content-nav as fluid container will set its width to 100%:
.content-nav {
/*width: calc(100vw - 60px);*/
background: yellow;
height: 100vh;
}
I want to center vertically text, when the elements height is unknown?
html
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
css
/* CSS used here will be applied after bootstrap.css */
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
Elements "Ex1, Ex2" count is unknown, so, if there are more of those, obviously, the table row will get bigger in height. I need some solution, that would be responsive to this also...
https://www.codeply.com/go/bp/4ZEUS7Q7lm
Just add row-ht-eq class to row <div class="second-row">
CSS:
.row-ht-eq {
display: flex;
align-items: center;
}
position: absolute;
top: 50%;
transform: translateY(-50%);
Also you can play with:
display: table-cell;
vertical-align: middle;
Note: Use span Element as helper.
Html:
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
Css:
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
Full Code:
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
Change your text class to:
.left-col-text {
margin:0 auto;
}
This will automatically decide equal distance from top to bottom.
<style type="text/css">
#displayHeader {
img {
width: 100%;
max-width: 100%;
max-height: 100%;
}
.header-img-inner {
max-height:100%;
}
}
</style>
<div id="displayHeader" style="height: 83.03px;">
<div class="header-inner">
<div class="row">
<div id="headerCol0" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
<img src="test.svg">
<p>TEST</p>
</div>
</div>
<div id="headerCol1" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
<img src="test.svg">
</div>
</div>
<div id="headerCol2" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
<img src="test.svg">
<p>tt</p>
</div>
</div>
</div>
</div>
</div>
<div id="displayContent" style="height: 264.8px;">
<div class="inner">
</div>
<div>
</div>
<div>
</div>
<div>
Image and text go out of the div block, why is this happening?
No float left, right used. It's not working with position:relative for parent and position absolute for child, but still not work well.
I only set maximum height for image when I set in on the header-img-inner
Why not use position: inherit; so as to make the image and whatever you want inside the div to inherit the position. This might help, give it a try.
Do you want something like this?
.block {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
margin: 20px;
}
.block:before {
content: '\200B';
/* content: '';
margin-left: -0.25em; */
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered {
display:inline-block;
vertical-align: middle;
width: 300px;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
}
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some Text</h1>
<img src="Untitled-2.jpg" height="150px">
</div>
</div>
Please check this link:-https://css-tricks.com/centering-in-the-unknown/
I am building a UI component that has columns of information. Each column needs to be individually scrollable. I have found that on SO.com before, but I am having trouble reconciling that with the other requirement - that the page scrolls horizontally to show columns that do not fit on screen.
I have the horizontal scrolling working but cannot get it to work in conjunction with individual column scrolling. The code:
#board {
float: left;
height: 98%;
max-height: 98%;
width: 4300px; /*smaller than columns to force horizontal scroll */
margin: auto;
border: none;
overflow-x: scroll;
}
#columns {
height: 98%;
float: left;
width: 4800px; /* need this much width */
margin: auto;
border: none;
overflow-x:auto;
}
.column {
float: left;
padding-bottom: 50px;
width: 240px;
height: 100%;
max-height: 100%;
padding: 5px;
padding-bottom: 100px;
margin-left: 5px;
overflow-y: auto;
overflow-x: hidden;
}
<div id="board">
<div id="columns">
<div id="col1" class="column">
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
</div>
<div id="col2" class="column">
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
</div>
<!-- 12-16 more columns -->
</div>
</div>
Edited to fix id vs class issue in html.
I tried to simplify your code to only include what's necessary to solve your problem, but it should work. There are a couple errors in your CSS too: you have a style for #boards but the outer container has a class boards not an id, and you have a style for #columns but the middle inner container has an id of positions.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.board {
height: 100%;
width: 200px;
overflow-x: scroll;
}
#columns {
height: 100%;
width: 500px;
white-space: nowrap;
}
.column {
vertical-align: top;
height: 100%;
display: inline-block;
width: 150px;
overflow-y: auto;
overflow-x: hidden;
}
.card {
height: 200px;
background: #F00;
margin-bottom: 5px;
}
<div class="board">
<div id="columns">
<div class="column">
<div class="card">...content...</div>
<div class="card">...content...</div>
<div class="card">...content...</div>
<div class="card">...content...</div>
</div>
<div class="column">
<div class="card">...content...</div>
<div class="card">...content...</div>
<div class="card">...content...</div>
</div>
<div class="column">
<div class="card">...content...</div>
</div>
I need the following HTML (jsfiddle):
<div class="main">
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
To look something like this:
Not like this:
Can you change your HTML layout a little ?
.main {
display: table;
height: 100px;
border: solid 1px;
}
.inner {
display:table-cell;
vertical-align:middle
}
.top, .bottom {background:yellow;}
<div class="main">
<div class="inner">
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
</div>
Check this below.
Just set the display of the parent to table-cell:
.main {
display: table-cell;
height: 100px;
border: solid 1px;
vertical-align: middle;
}
<div class="main">
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
position: relative;
top: 50%;
transform: translateY(-50%);
HTML:
<div class="main">
<div class="wrapper">
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
</div>
CSS:
.main {
display: inline-block;
height: 100px;
border: solid 1px;
line-height: 100px;
vertical-align: middle;
}
.wrapper {
line-height: 1em;
display: inline-block;
vertical-align: middle;
}
DEMO: https://jsfiddle.net/q0kLojwx/5/