I want to make cards which are responsive but not fixed. What changes should I make to CSS so that it change change their sizes accordingly.
Here is the fiddle link for this Working Fiddle
The cars should change its size with resizing window however the position of the button should be at the bottom only, and in spite of content, size of all cards should be same.
CARD.HTML
<div class = 'col-md-2'>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 1</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 1 </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 2</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 2 , WHOLE PURPOSE IS TO MAKE TO NEXT LINE TO MAKE BUTTONS AT FIXED PLACE </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 3</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 3</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 4</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 4</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
</div>
CARD.CSS
.mycard {
background-color: #FFC20A;
color: black;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
padding: 5px 5px 5px 5px;
text-align: center;
height: 200px;
width: 230px;
border-radius: 10px;
font-size: 12px;
}
.card-header {
color: black;
height:24px;
padding: 1px 0px 1px 0px;
font-size: 16px;
text-align: center;
}
.card-block {
background-color: #b2b2b2;
color: black;
border-radius: 10px;
height: 100px;
width: 220px;
}
.card-name {
height:35px;
}
.cardfooter {
border-radius: 5px;
width:100%;
height: 34px;
bottom:0;
margin-bottom: 0px;
}
I believe all you need to do is change the card's width to min-width. This will force the card to be 100% width until 230px. As you can see in my altered version of your JSFiddle.
What you should keep in mind is your card content is broken down into rows of content. Each row looks like it should be 100% width of the card, therefore you don't need to actually apply a width to the content, just provide display: block. This will force it to be 100% width of it's parent. With content being 100% width of it's parent it's flexibility will always be dependent on the parent. Thus you can set the parents width to 100%, 50%, 200px whatever, the content will always follow.
Let me know if you need me to clarify anything :)
.mycard {
background-color: #FFC20A;
color: black;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
padding: 5px 5px 5px 5px;
text-align: center;
height: 200px;
min-width: 230px;
border-radius: 10px;
font-size: 12px;
}
.card-header {
color: black;
height:24px;
padding: 1px 0px 1px 0px;
font-size: 16px;
text-align: center;
}
.card-block {
background-color: #b2b2b2;
color: black;
border-radius: 10px;
height: 100px;
width: 220px;
}
.card-name {
height:35px;
}
.cardfooter {
border-radius: 5px;
width:100%;
height: 34px;
bottom:0;
margin-bottom: 0px;
}
<div class = 'col-md-2'>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 1</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 1 </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 2</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 2 , WHOLE PURPOSE IS TO MAKE TO NEXT LINE TO MAKE BUTTONS AT FIXED PLACE </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 3</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 3</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 4</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 4</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
</div>
Related
In html, I have a panel with a fixed height which contains cards. It can contain one card or many cards. Hence, because the panel has a fixed height, it can be needed to have a scrollbar displayed in order to visualize all cards. This works properly with the property overflow: auto.
However, when the scrollbar is displayed, cards are shift. I would like to avoid that or at least hide this shift with a trick. I checked a lot of similar questions that suggests to use padding-left: calc(100vw - 100%); but it did not work since it is not the body scrollbar. The width of the card needs to be responsive according to the container's width.
Something that could work is to set the overflow: overlay and add a padding-right. However, this is not a standard and not compatible with firefox.
Here, you can find a reproduce example:
let flag = true;
const setHeight = () => {
if (flag) {
document.getElementById('container').style.setProperty('height', '100%');
} else {
document.getElementById('container').style.removeProperty('height');
}
flag = !flag;
};
document.getElementById('button').addEventListener('click', setHeight);
setHeight();
.panel-container {
height: 300px;
width: 510px;
padding: 8px 20px 0;
background-color: blue;
overflow: auto;
}
.card {
height: 86px;
width: 100%;
background-color: grey;
border-radius: 3px;
border: 1px solid red;
margin-bottom: 10px;
cursor: pointer;
}
.scrollbar::-webkit-scrollbar-track {
width: 14px;
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 4px solid green;
}
.scrollbar::-webkit-scrollbar-corner {
background-color: transparent;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
<button id="button">With/Without overflow</button>
<div id="container" class="panel-container scrollbar">
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
</div>
In fact, it was quite simple. Just play with the margin and set the overflow to scroll.
let flag = true;
const setHeight = () => {
if (flag) {
document.getElementById('container').style.setProperty('height', '100%');
} else {
document.getElementById('container').style.removeProperty('height');
}
flag = !flag;
};
document.getElementById('button').addEventListener('click', setHeight);
setHeight();
.panel-container {
height: 300px;
width: 510px;
padding: 8px 12px 0 20px;
background-color: blue;
overflow: scroll;
}
.card {
height: 86px;
width: 100%;
background-color: grey;
border-radius: 3px;
border: 1px solid red;
margin-bottom: 10px;
cursor: pointer;
}
.scrollbar::-webkit-scrollbar-track {
width: 14px;
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 4px solid green;
}
.scrollbar::-webkit-scrollbar-corner {
background-color: transparent;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
<button id="button">With/Without overflow</button>
<div id="container" class="panel-container scrollbar">
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
</div>
I have these progress bars which are suppose to work as ratings and they look good:
I have applied some CSS and I change their width with JavaScript by reading values from text files.
But are not responsive at all and whenever the window is resized:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="second-part">
<div class="row">
<div class="side">
<div>5 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar11" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p11">150</div>
</div>
<div class="side">
<div>4 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar12" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p12">63</div>
</div>
<div class="side">
<div>3 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar13" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p13">15</div>
</div>
<div class="side">
<div>2 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar14" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p14">6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar15" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p15">20</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 90%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
#media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
JavaScript to change progress bar width:
var par1 = 4;
for(var i = 10; i < 16; i++) {
$('.p' + (i+1)).text(table[0][par1]);
$('.bar' + (i+1)).css("width", table[0][par1]);
par1++;
}
How could I make it more responsive? Thank you in advance!
I recommend using css flexbox, so the items wrap instead of overlap when the page is resized. You could use media queries with this to adjust the size of the items and container so they don't overlap/wrap. This site has a good explanation of flexbox: A Complete Guide to Flexbox.
I am creating my own full calendar and I have a problem with a border.
In places where divs touch, border lines are thicker because each element has own border and obviously in this places the border is rendered twice.
Depending on month, the calendar has different layout, so hardcoding isn't a good idea.
I prepared example here:
.block {
border: 1px solid black;
width: 80px;
height: 80px;
float: left;
}
<div class="block">1 </div>
<div class="block">2 </div>
<div class="block">3 </div>
<div class="block">4 </div>
<div class="block">5 </div>
<div class="block">6 </div>
<div class="block">7 </div>
View on JSFIddle
And my question is:
Is there a SMART or tricky way to solve this problem?
I may use plain JavaScript or CSS, but not jQuery.
Use this
.container{
display: inline-block;
border-top: 1px solid black;
border-left: 1px solid black;
}
.block {
border-right: 1px solid black;
border-bottom: 1px solid black;
width: 80px;
height: 80px;
float:left;
}
Wrap all your divs inside a container div and do the above mentioned styling. This way elements will not have overlapping borders.
.container {
display: inline-block;
border-top: 1px solid black;
border-left: 1px solid black;
}
.block {
border-right: 1px solid black;
border-bottom: 1px solid black;
width: 30px;
height: 30px;
float: left;
}
<div class="container">
<div class="block">1 </div>
<div class="block">2 </div>
<div class="block">3 </div>
<div class="block">4 </div>
<div class="block">5 </div>
<div class="block">6 </div>
<div class="block">7 </div>
<div style="clear: both"> </div>
<div class="block">8 </div>
<div class="block">9 </div>
<div class="block">10 </div>
<div class="block">11 </div>
<div class="block">12 </div>
<div class="block">13 </div>
<div class="block">14 </div>
<div style="clear: both"> </div>
<div class="block">15 </div>
<div class="block">16 </div>
<div class="block">17 </div>
<div class="block">18 </div>
<div class="block">19 </div>
<div class="block">20 </div>
<div class="block">21 </div>
<div style="clear: both"> </div>
<div class="block">22 </div>
<div class="block">23 </div>
<div class="block">24 </div>
<div class="block">25 </div>
<div class="block">26 </div>
<div class="block">27 </div>
<div class="block">28 </div>
<div style="clear: both"> </div>
<div class="block">29 </div>
<div class="block">30 </div>
<div class="block">31 </div>
</div>
Here I have reduced the height for better visibility.
A quick fix is just add
margin-right: -1px;
margin-bottom: -1px;
to the .block class.
https://jsfiddle.net/w76o9kL4/20/
Remove border right for every block except the last one.
<div class="block">1 </div>
<div class="block">2 </div>
<div class="block">3 </div>
<div class="block">4 </div>
<div class="block">5 </div>
<div class="block">6 </div>
<div class="block last">7 </div>
<style>
.block {
border: 1px solid black;
border-right: none;
width: 80px;
height: 80px;
float:left;
}
.last {
border-right : 1px solid black;
}
</style>
Simple css3 selector using + you can target sibling elements. Take a look
.block + .block {border-left:0px;}
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
.block {
border: 1px solid black;
width: 40px;
height: 40px;
float: left;
}
.block + .block {border-left:0px;}
<div class="block">1 </div>
<div class="block">2 </div>
<div class="block">3 </div>
<div class="block">4 </div>
<div class="block">5 </div>
<div class="block">6 </div>
<div class="block">7 </div>
when i click the Button1 the Panel1 is hidden and same is the functionality of all buttons. But when i hide the Panel1 the Panel2 is moved to Panel1's place and i want to be at place where it was. kindly help me
<head>
<title>JQuery Event Listener</title>
<script src = "jquery-3.0.0.js"></script>
<style>
header {
background-color: gray;
text-align: center;
}
main {
padding-left: 39%;
position: relative;
}
.panel {
display: inline-block;
}
.panel-Heading {
background-color: blue;
width: 60px;
padding: 5px;
border: 1px groove;
}
.panel-Body {
width: 60px;
padding: 5px;
border: 1px solid;
}
</style>
</head>
<body>
<header>
<br>
<h1>Let's Have Fun!</h1>
<button id = "btn1" data-panel="1">Button1</button>
<button id = "btn2" data-panel="2">Button2</button>
<button id = "btn3" data-panel="3">Button3</button>
<button id = "btn4" data-panel="4">Button4</button>
<br><br>
</header>
<br><br>
<main>
<div id="panel1" class="panel">
<div class = "panel-Heading">Panel1</div>
<div class = "panel-Body">Content</div>
</div>
<div id="panel2" class="panel">
<div class = "panel-Heading">Panel2</div>
<div class = "panel-Body">Content</div>
</div>
<div id="panel3" class="panel">
<div class = "panel-Heading">Panel3</div>
<div class = "panel-Body">Content</div>
</div>
<div id="panel4" class="panel">
<div class = "panel-Heading">Panel4</div>
<div class = "panel-Body">Content</div>
</div>
</main>
<script>
$(function(){
$("#btn1").on('click', function() {
$("#panel1").fadeToggle();
});
$("#btn2").on('click', function() {
$("#panel2").fadeToggle();
});
$("#btn3").on('click', function() {
$("#panel3").fadeToggle();
});
$("#btn4").on('click', function() {
$("#panel4").fadeToggle();
});
});
</script>
</body>
Add width: 60px; to your .panel class:
.panel {
display: inline-block;
width: 60px;
}
... then nest the divs you'd like to hide inside of them:
<div class="panel">
<div id="panel1">
<div class = "panel-Heading">Panel1</div>
<div class = "panel-Body">Content</div>
</div>
</div>
<div class="panel">
<div id="panel2">
<div class = "panel-Heading">Panel2</div>
<div class = "panel-Body">Content</div>
</div>
</div>
<div class="panel">
<div id="panel3">
<div class = "panel-Heading">Panel3</div>
<div class = "panel-Body">Content</div>
</div>
</div>
<div class="panel">
<div id="panel4">
<div class = "panel-Heading">Panel4</div>
<div class = "panel-Body">Content</div>
</div>
</div>
This will cause the nested div to disappear when the buttons are clicked, while the outer div remains in place to hold the space.
Also, since your JavaScript is below the elements it will be affecting, you don't need to wait for document ready. You're also writing more click handlers than you need to. You can probably swap all of your JavaScript out for the following:
$(".panel").on('click', function() {
$(this).children().first().fadeToggle();
});
Try this
$(function(){
$("#btn1").on('click', function() {
$("#panel1").fadeToggle();
});
$("#btn2").on('click', function() {
$("#panel2").fadeToggle();
});
$("#btn3").on('click', function() {
$("#panel3").fadeToggle();
});
$("#btn4").on('click', function() {
$("#panel4").fadeToggle();
});
});
.main {
width : 100%;
}
.main .panel-container{
display: inline-block;
width : 24% !important;
}
header {
background-color: gray;
text-align: center;
}
main {
padding-left: 39%;
position: relative;
}
.panel {
display: inline-block;
}
.panel-Heading {
background-color: blue;
width: 60px;
padding: 5px;
border: 1px groove;
}
.panel-Body {
width: 60px;
padding: 5px;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>JQuery Event Listener</title>
<script src = "jquery-3.0.0.js"></script>
<style>
</style>
</head>
<body>
<header>
<br>
<h1>Let's Have Fun!</h1>
<button id = "btn1" data-panel="1">Button1</button>
<button id = "btn2" data-panel="2">Button2</button>
<button id = "btn3" data-panel="3">Button3</button>
<button id = "btn4" data-panel="4">Button4</button>
<br><br>
</header>
<br><br>
<div class="main">
<div class="panel-container">
<div id="panel1" class="panel">
<div class = "panel-Heading">Panel1</div>
<div class = "panel-Body">Content</div>
</div>
</div>
<div class="panel-container">
<div id="panel2" class="panel">
<div class = "panel-Heading">Panel2</div>
<div class = "panel-Body">Content</div>
</div>
</div>
<div class="panel-container">
<div id="panel3" class="panel">
<div class = "panel-Heading">Panel3</div>
<div class = "panel-Body">Content</div>
</div>
</div>
<div class="panel-container">
<div id="panel4" class="panel">
<div class = "panel-Heading">Panel4</div>
<div class = "panel-Body">Content</div>
</div>
</div>
</div>
</body>
I am constructing a div on the fly using Jquery, and appending it to the body or any element.
after appending, when i try to get get the height it gives 0. In Chrome i checked all its height property its 0. what could be the problem.
This is my code to append :
var template = '<div class="capMainSection">
<div class="CAP"> </div>
<div class="scrolldiv repeatSection" style="display:none;"">
<div class="header sectionheader"> </div>
<div class="content">
<div class="leftColumn">
<div class="show" id="capInfo">
<div class="label1">CA Contacts:</div>
<div class="label2"><p>CA Lead:<span class="LeadName"></span><span class="LeadEmail"></span></p></div>
<div class="lable3"><p>Lead:<span class="vLeadName"></span><span class="vLeadEmail"></span></p></div>
</div>
<div class="hidden" id="facInfo">
<div class="label1"><span class="facid"></span><span class="facName"></span></div>
<div class="label2"><span class="city"></span><span class="state"></span><span
class="country"></span></div>
</div> </div>
<div class="rightColumn">
<div class="rightGroup">
<div class="groupproto">
<p><span class="protocolname show"></span>
<span class="date_class show"></span></p>
</div>
<div class="statusClass hidden"></div>
<div class="approvedFinding show"></div>
<div class="closedFinding show"></div>
<div class="verifiedFinding show"></div>
<div class="lasActivity show"></div>
</div>
<div class="linkButton">
<input type="button" class="lplinkbutton" value=">">
</div>
</div>
</div>
</div>
</div>';
i am cloning the div first then appending
templateNode = $('.repeatSection').clone(true);
//change the display none to show
$(templateNode).find('.content').attr('id',capRow);
$('.capMainSection').append($(templateNode));
css
.content {
clear: both;
font-size: 13px;
}
.leftColumn {
float: left;
width: 40%;
padding: 10px 0 10px 10px;
}
.rightColumn {
float: right;
width: 50%;
padding: 0;
}
Try this:
.capMainSection {overflow: hidden;}
Or, you can do this:
.capMainSection:after {
content: " ";
display: block;
clear: both;
}