'How to change the width of a column dynamically based on the data inside it in css
Please consider a page where there are 2 columns:
Width of the left column: 75%
Width of the right column: 25%.
Consider we have few list of icons displayed in the right column. What if the list of icons and its associated text increases the viewing pane? Instead of using a vertical scrollbar, we need to increase the width of the right column, like:
Width of the left column: 67%
Width of the right column: 33%.
With the increase in right column, we should be able to show the data in 2 column (earlier when the right column was 25%, we were showing the data in one column inside that right column) in the right column. Showing the data in 2 columns from 1 column is achieved using display: flex.
But How to achieve the dynamic increase of width of right column from 25% to 33% and the decrease of the left column from 75% to 67%.
Here is the code we have in place:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<div class="split left">
<div class="centered">
<div class="header"></div>
<div class="version">
<span id="versionname">versionxyz</span><br />
<span class="system-additional-information">AdditionalInfo</span>
</div>
</div>
</div>
/* Important part where my changes should be */
<div class="split right">
<div class="container">
<div class="launch" id="Launch">
<div class="test1">
<div class="section">
<div class="item">
<div class="main-heading-wrapper" align="left">
<div class="main-heading">Heading 1</div>
</div>
</div>
<div class="item">
<div class="icon">
<a class="webstart-page-link" href="/url">
<div class="web-icon">
<img style="width: 32px;height: 31px;margin-top: 8px;" src="/icon/icon1.svg" alt="icon" />
</div>
<span class="sub-heading" style="margin-left: 16px;margin-top: 16px;width:50%" title="test">test</span>
</a>
</div>
</div>
</div>
<div class="section webpage">
<div class="item">
<div>
<div class="main-heading">Another Heading 2</div>
</div>
</div>
<div class="item">
<div class="icon">
<a class="webstart-page-link" href="/url2">
<div class="icon">
<img style="width: 32px;height: 31px;margin-top: 8px;" src="/icon/icon2.svg" alt="icon" />
</div>
<span class="sub-heading" style="margin-left: 16px;margin-top: 16px;width:50%" title="Test2">Test2</span>
</a>
</div>
</div>
</div>
</div>
<div class="test2">
<div class="section WebPage2">
<div class="item">
<div class="main-heading-wrapper" align="left">
<div class="main-heading">WebPage2</div>
</div>
</div>
<div class="item">
<div>
<a class="webstart-page-link" style="padding-bottom:16px;align-items:center" href="Url">
<img style="width:24px" src="/icon/icon2.svg" />
<span class="sub-heading" style="margin-left:6px;width:100%" title="Test3">Test3</span>
</a>
</div>
</div>
</div>
<div class="section resources">
<div class="item">
<div class="main-heading-wrapper" align="left">
<div class="main-heading">Resources</div>
</div>
</div>
<div class="item">
<div>
<a class="webstart-page-link" style="padding-bottom:8px;" href="/about">About</a>
</div>
</div>
<div class="item">
<div>
<a class="webstart-page-link" style="padding-bottom:8px;" href="/url/">Test4</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">${tagline}</div>
<div class="popupdim" id="dimmer"></div>
${popups}
</body>
</html>
Css Styles:
<style type="text/css">
* {
padding: 0;
margin: 0;
border: 0;
font-family:Verdana, Geneva, sans-serif;
font-size: 9px;
}
a:active, a:link, a:visited {
text-decoration: none;
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
color: #138dc9;
display:flex;
}
.webstart-page-link:hover{
color: rgba(0, 0, 0, 0.87) !important;
text-decoration: none;
}
.webstart-page-link:hover span{
color: rgba(0, 0, 0, 0.87) !important;
text-decoration: none;
}
.webstart-page-link:hover > svg{
fill-opacity :0.87 !important;
text-decoration: none;
}
.webstart-page-link > svg{
fill-opacity :0.6 !important;
text-decoration: none;
}
.split {
height: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
}
.webpage {
}
.item{
align-self: auto;
}
.left {
left: 0;
width: 75%;
background-image:linear-gradient( to bottom, #004f5f 4%, rgba(0,135,152, 0 ) 96% ),url(icon/webstart-body.png);
background-repeat: no-repeat;
background-size: cover;
min-width: 65%;
}
.left:after {
${testbackground}
}
.centered {
padding: 40px;
}
.right {
right: 0;
width: 25%;
min-width: 384px;
background-color: #ffffff;
max-width: 35%;
}
.container {
background-color: #ffffff;
}
.header {
height: 39px;
margin-bottom: 10px;
background-image: url(icon/${icon});
background-position: center;
background-repeat: no-repeat;
}
.version {
text-align: center;
padding-top: 40px;
}
.licenseexpires {
position: fixed;
top: 0;
left: 0;
right: 0;
border: 3px solid #F0B902;
background: url(icon/warning.png) no-repeat 6px 6px white;
padding: 6px 6px 6px 32px;
font-size: 12px;
font-weight: bold;
}
.nolicense {
text-align: center;
padding: 10px;
color: #000000;
font-family:Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: bold;
}
#versionname, #systemdisplaytype, .systemdisplayseparator {
color: #FFFFFF;
font-weight:normal;
font-size: 20px;
font-family: "Noto Serif","DejaVu Serif",serif;
}
span.systemdisplayseparator {
padding: 0 5px;
}
span.systemdisplayseparator::after {
content: "\2022";
}
#versionfull {
color:#999;
font-weight:normal;
font-size: 10px;
font-family: "Noto Serif","DejaVu Serif",serif;
}
.columns {
position: relative;
}
.columns img {
margin-bottom: 8px;
}
.leftcolumn {
position: relative;
width: 465px;
border-right: #CCC 2px solid;
float: left;
margin-bottom: 10px;
}
.topbox {
}
.bottombox table, .popup table {
width: 450px;
border-spacing: 20px;
}
.bottombox table tr td, .rightcolumn table tr td, .popup table tr td {
text-align: center;
vertical-align: top;
width: 33%;
}
.main-heading{
font-size: 16px;
font-family: "Noto Serif","DejaVu Serif",serif;
color: rgba(0, 0, 0, 0.87);
height: 22px;
padding-top: 32px;
padding-bottom: 16px;
}
.sub-heading{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
font-size: 14px;
color:rgba(0, 0, 0, 0.6);
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
vertical-align: middle;
line-height: 16px;
display: inline-block;
}
.web-icon{
width: 48px;
height: 48px;
background-color: #004f5f;
margin-bottom: 12px;
}
.launch {
padding-left: 40px;
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh;
padding-top: 20px;
}
.inDesignTable{
padding-left: 40px;
display: none;
}
.back-to-screen{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
font-size: 14px;
margin-top: 1px;
color: #138dc9;
display: inline-block;
vertical-align: middle;
line-height: 16px;
}
.back-to-screen-link svg{
fill: #138dc9 !important;
}
.back-to-screen-link:hover span{
color: #065da9 !important;
}
.back-to-screen-link:hover svg{
fill: #065da9 !important;
}
.icon {
text-align: center;
vertical-align: top;
background: white;
}
.bottombox {
border-top: #CCC solid 2px;
width: 450px;
}
.rightcolumn {
position: relative;
float: left;
}
.rightcolumn table {
width: 250px;
border-spacing: 20px;
}
.footer {
position: fixed;
bottom: 0;
margin-bottom: 16px;
margin-left: 16px;
padding: 5px 0px 5px 0px;
font-size: 10px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
color: #ffffff;
z-index: 1;
}
.test1{
width: 50%;
}
.test2{
width: 50%;
}
.popup {
height: 400px;
width: 465px;
border: #697f9c 5px solid;
position: fixed;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -232px;
z-index: 10000;
border-spacing: 20px;
background-color: #fff;
display:none;
}
.popupdim {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #000000;
position: fixed;
z-index: 19;
display:none;
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}
.close {
background-image: url(icon/close-button.png);
position: absolute;
top: 0px;
right: 0px;
}
h2 {
padding: 10px;
color: #000000;
font-family:Verdana, Geneva, sans-serif;
font-size: 16px;
}
h2 .firstword {
color: #000000;
font-family:Verdana, Geneva, sans-serif;
font-size: 16px;
}
html, body{
height: 100%;
margin: 0;
}
.system-additional-information {
color:#FFFFFF;
font-weight:normal;
font-size: 12px;
font-family: "Noto Serif","DejaVu Serif",serif;
}
</style>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|