I am new to VueJS. I am developing an application using VueJS and Bootstrap. There is a div which I wish to render based on a condition.
I have been trying to use v-if on the div so that once the condition is true, the data property is set to true and the div gets displayed.
My code looks like this:
export default {
data(){
return {
detailsSectionOpen: false
}
},
methods:{
showDetails() {
if(this.detailsSectionOpen === false){
this.detailsSectionOpen = true;
}
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
detailsSection.classList.add("col-xl-3");
showSection.classList.add("col-xl-9", "col-md-6");
showSection.classList.remove("col-xl-12", "col-md-6");
},
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="content" style="padding-top: 3px;">
<div class="row">
<div class="col-xl-12 col-md-6" id="show" style="padding-left: 0px;padding-right: 0px;">
<div class="container-fluid">
<ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
<li class="breadcrumb-item active" style="margin-right: auto; margin-left: 0px; padding-top: 13px; color: #424242;
font-family: 'Source Sans Pro';
font-size: 18px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;">Files</li>
<li class="pull-right">
<button class="btn">
<i class="fa fa-sort-amount-asc">
</i>
</button>
</li>
<li class="pull-right">
<button v-if="gridView === false" #click="changeView" class="btn">
<i class="fa fa-th-large"></i>
</button>
<button v-if="gridView === true" #click="changeView" class="btn">
<i class="fa fa-list-ul">
</i>
</button>
</li>
</ol>
<!-- Line break -->
<hr class="breadcrumb-hr">
</div>
<div class="container-fluid">
<div style="width: 280px; height: 30px; margin-left: 15px; ">
<p style="color: #424242; font-family: 'Source Sans Pro'; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; text-align: left;">Recent</p>
</div>
<!-- Recently used files section begins here -->
<div class="row" style="padding-right: 15px; padding-left: 15px;">
<div class="col-md-5ths col-xs-6" v-for="(file,index) in recentFiles">
<stats-card>
<div slot="header" class="header-rectangle" #contextmenu.prevent="$refs.menu.open">
<img :src="file.source" style=" height: 50px; margin-top: 50px">
</div>
<div slot="footer" class="footer-rectangle" #contextmenu.prevent="$refs.menu.open" style="display: flex; flex-direction: column; justify-content: center;">
<div class="row" >
<div class="col-xl-9" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>{{file.name}}</span>
</div>
<div class="file-size-style" >
<span>{{file.size}} MB</span>
</div>
</div>
<div class="col-xl-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:">
<div v-show="!file.shared" style="float: right; padding: 0px 5px 5px 0px; margin-right: 10px;">
<i class='fas fa-users' id="image"></i>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<vue-context ref="menu">
<ul style="font-family: 'Source Sans Pro'; font-size: 15px; font-weight: normal; font-style: normal; text-decoration: none; text-align: left; ">
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fa fa-file' id="context-menu-icon"></i><span class="context-menu-span">Preview</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="fa fa-share-alt" id="context-menu-icon"></i><span class="context-menu-span">Share</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="fa fa-copy" id="context-menu-icon"></i><span class="context-menu-span">Copy/Move</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='far fa-star' id="context-menu-icon"></i><span class="context-menu-span">Add to Starred</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fas fa-cloud-download-alt' id="context-menu-icon"></i><span class="context-menu-span">Download</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fas fa-pencil-alt' id="context-menu-icon"></i><span class="context-menu-span">Rename</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fas fa-tag' id="context-menu-icon"></i><span class="context-menu-span">Tags</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="far fa-trash-alt" id="context-menu-icon"></i><span class="context-menu-span">Delete</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="far fa-chart-bar" id="context-menu-icon"></i><span class="context-menu-span">Access Stats</span></li>
</ul>
</vue-context>
</div>
<!-- Folder section begins here -->
<div v-if="gridView === true" style="width: 280px; height: 30px; margin-left: 15px;">
<p style="color: #424242; font-family: 'Source Sans Pro'; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; text-align: left;">Folders</p>
</div>
<div v-if="gridView === true" class="row seven-cols" style="padding-right: 15px; padding-left: 15px;">
<div class="col-md-1" id="no-padding" v-for="(folder,index) in folders">
<stats-card>
<div slot="header" :data-key="index" class="folder-rectangle" #click="folderSelected=index" :class="{'folder-selected':folderSelected==index}">
<div class="row">
<div class="col-xl-3" style="padding-right: 15px;padding-left: 15px;">
<div class="clearfix" v-if="folder.shared" style="margin-top: 8px; margin-left: 10px;">
<i class="material-icons" id="folder-image"></i>
</div>
<div class="clearfix" style="margin-top: 8px; margin-left: 10px;" v-else>
<i class="material-icons" id="folder-image">folder</i>
</div>
</div>
<div class="col-xl-9" style="padding-left: 7px;padding-right: 7px;padding-top: 7px;padding-bottom: 7px;">
<div class="file-name-style" style="padding-right: 5px; padding-left: 5px;">
<span>{{folder.name}}</span>
</div>
<div class="file-size-style" style="padding-bottom: 5px;padding-top: 10px;padding-left: 5px;">
<span>{{folder.numFiles}} files</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
</div>
<!-- Files section begins here -->
<div v-if="gridView === true" style="width: 280px; height: 30px; margin-left: 15px;">
<p style="color: #424242; font-family: 'Source Sans Pro'; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; text-align: left;">Files</p>
</div>
<div v-if="gridView === true" class="row" style="padding-bottom: 15px; margin-bottom: 20px; padding-right: 15px; padding-left: 15px;">
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<img src="https://image.flaticon.com/icons/png/512/136/136526.png" style="height: 50px; margin-top: 50px">
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<i class="far fa-file-image" style=" height: 50px; margin-top: 50px; color:#4CAF50; font-size: 40px;"></i>
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<img src="http://www.dap.asn.au/wp-content/uploads/2017/01/pdfLogo.png" style=" height: 50px; margin-top: 50px;">
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<img src="https://www.cleverducks.com/wp-content/uploads/2018/01/Excel-Icon.png" style="height: 50px; margin-top: 50px">
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
</div>
<!-- List View section begins here -->
<list-view :gridView="gridView" :folders="folders">
</list-view>
</div>
</div>
<!-- File Details section begins here -->
<div v-if="detailsSectionOpen" id="details" ref="detailsSection">
<div class="content">
<div class="container-fluid">
<ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
<li class="pull-right">
<button class="btn" #click="closeDetailsSection">
<i class="fa fa-close">
</i>
</button>
</li>
</ol>
<!-- Line break -->
<hr class="breadcrumb-hr-details">
</div>
<div class="container-fluid">
<div style="width: 280px; height: 30px;">
<p style="color: #424242;width: 239px;height: 30px;font-family: 'Source Sans Pro'; font-size: 16px;
font-weight: bold;
font-style: normal;
text-decoration: none;
text-align: left;">Details</p>
</div>
<div class="row">
<div class="col">
<div style="height: 100px; width: 100px; margin: 0 auto" >
<i class="fas fa-folder" style="font-size: 100px; color: #878D99"></i>
</div>
<div style="max-width: 100%;">
<ul style="list-style: none;padding-left: 20px;padding-right: 20px; padding-top: 60px;padding-bottom: 60px;" class="details-ul">
<li>Shared with: ~ 15 people</li>
<li>Name: Folder Name</li>
<li>Type: Folder</li>
<li>Files: 20</li>
<li>Location: Home</li>
<li>Owner: John</li>
<li>Created: March 10, 2018</li>
<li>Opened: March 10, 2018, 7 PM by Jenny</li>
<li>Modified: March 10, 2018, by me</li>
<li>Downloaded: March 10, 2018, by John </li>
<li>Retention Policy: None</li>
<li>Tags: Add</li>
<li>Description: Add</li>
</ul>
</div>
<div style="height: 100px; width: 100px; margin: 0 auto" >
<button class="plus-circle-btn"><i class="fa fa-plus-circle"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am able to see the div being rendered on the DOM when the method showDetails() is called.
But, when I try getting the element by its ID, the result is null. So, document.getElementById('details') returns null.
I think it has something to do with the reactivity in Vue and how v-if works. Can someone please help me resolve this issue?
Thank you!
v-if adds/removes an element from the DOM. You can't show or hide something that doesn't exist in the DOM.
Trying to hide or show another DOM element based on a different element's v-if doesn't make any sense as you could simply add another v-if="condition" and it would work the same way.
If you really can't add another check to the DOM then you should Watch the same data element in VUE that the if is watching...
Do this by adding a class as that's better for toggles since ID's are only supposed to be used once per page. You can add this class anywhere in the DOM based on the Vue state.
<div v-if="visibleCheck">
This element will be visible if visibleCheck = true
</div>
<div id="anotherElement" v-bind:class="visibleCheck ? 'isVisble' : 'notVisible'">
If visibleCheck = true this div will have a class .isVisible
If visibleCheck = false/null this div will have a class .notVisible
</div>
Then do something with those classes:
.isVisible {
display:block;
}
.notVisible {
display:none;
}
The whole point of Vue is NOT to watch the DOM for changes but to base the DOM changes on the data
Using your example:
<div id="whatever" v-bind:class="detailsSectionOpen ? 'col-xl-9' : 'col-xl-12'">
stuff
</div>
You can try using $nextTick, it will be called after the component re-render:
showDetails() {
if(this.detailsSectionOpen === false){
this.detailsSectionOpen = true;
}
this.$nextTick(() => {
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
detailsSection.classList.add("col-xl-3");
showSection.classList.add("col-xl-9", "col-md-6");
showSection.classList.remove("col-xl-12", "col-md-6");
})
}
}
Related
I am trying to create a website where you can buy some sneakers, when the cart is clicked I want a div showing "your cart is empty" or the number of the items in the cart. my problem is it shows behind the carousel instead of over the carousel. I'm attaching the pictures of how it suppose ti look and how my one looks:
This is my HTL code:
<header>
<div id="header">
<div id="navLogo">
<div id="nav">
<div id="navMenu">
<button type="button" class="btn" data-mdb-toggle="modal" data-mdb-target="#exampleModal">
<image id="navIcon" src="./images/icon-menu.svg"></image></button>
</button>
<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="nav-menu">
<div class="modal-body">
<button type="button" class="btn" data-mdb-dismiss="modal"><image id="closeImg" src="./images/icon-close.svg"></image></button>
<ul class="nav-list">
<li class="nav-item">
<a class="nav-link" href="#">Collections</a>
<li class="nav-item">
<a class="nav-link" href="#">Men</a>
<li class="nav-item">
<a class="nav-link" href="#">Women</a>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--End Modal-->
</div>
<div id="logo">
<img id="logoImg" src="./images/logo.svg"/>
</div>
</div>
<div id="cartAvatar">
<button id="cartIcon">
<img id="cart" src="./images/icon-cart.svg"/>
<span id="cartIconNumber">0</span>
</button>
<!--CART EMPTY-->
<div class= "cart-Empty">
<div class="cart-Title" >
<h4>Cart</h4>
</div>
<div class="cart-Cont">
<h4> Your cart is empty</h4>
</div>
</div>
<!--CART FULL-->
<div class="cartFull">
<div class="cartContent">
<div class="cart-Title">
<h4>Cart</h4>
</div>
<div class="cart-img">
<img id="imgCart" class='cart-item' src="./images/image-product-1-thumbnail.jpg" class="shopping-cart-image">
</div>
<div class="cart-item">
<div class = "cart-name">
<h6>Autumn Limited Edition...</h6>
</div>
<div class="numbers">
<div class="cart-prize">
<p id="sneakers.prize"> </p>
</div>
<div class="cart-amount">
<p id="quantityFromStorage"></p>
</div>
<div class="cart-total">
<p id="prizeFromStorage"><p>
</div>
<div class="cart-delete">
<button class= "delete" type="button"><img src="./images/icon-delete.svg" class="shopping-cart-image"></button>
</div>
<span id="checkout">Checkout</span>
</div>
</div>
</div>
<!--END FOR CART-->
</header>
<body>
<div id="mainContainer">
<div id="myCarousel">
<div id="fullCarousel">
<!--Carousel wrapper -->
<div id="carouselSneakers" class="carousel slide carousel-slide" data-mdb-ride="carousel">
<!-- Slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/image-product-1.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="./images/image-product-2.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="./images/image-product-3.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="./images/image-product-4.jpg" class="d-block w-100" alt="..." />
</div>
</div>
<!-- Controls -->
<div id="controls">
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselSneakers"
data-mdb-slide="prev" > <img class="controls" src="./images/icon-previous.svg">
</button>
<button class="carousel-control-next" type="button" data-mdb-target="#carouselSneakers"
data-mdb-slide="next"> <img class="controls" src="./images/icon-next.svg">
</button>
</div>
<!--Thumbnails-->
<div class="carousel-indicators">
<button id="imgdes"type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1">
<img src="./images/image-product-1-thumbnail.jpg" class="img-fluid" />
</button>
<button id="imgdes" type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="1" aria-label="Slide 2">
<img src="./images/image-product-2-thumbnail.jpg" class="img-fluid" />
</button>
<button id="imgdes" type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="2" aria-label="Slide 3">
<img src="./images/image-product-3-thumbnail.jpg" class="img-fluid" />
</button>
<button id="imgdes" type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="3" aria-label="Slide 4">
<img src="./images/image-product-4-thumbnail.jpg" class="img-fluid" />
</button>
</div>
</div>
</div>
</div>
<!--Modal carousel-->
<div id="myModal" class="modal-carousel">
<div id=closeModal><img id=closeCarousel src="./images/icon-close.svg"/></div>
</div>
This is my css
/* CART EMPTY */
.cart-Empty{
display:none;
border-radius:30px;
width: 50%;
height:60vh;
width: fit-content;
margin-top: 80px;
z-index: 999;
}
.cart-Title{
border-bottom: solid hsl(0, 0%, 75%);
margin-left:10px;
margin-right: 10px;
width: 200px;
}
.cart-Cont{
color:hsl(0, 0%, 75%);
text-align: center;
padding-top: 25%;
padding-bottom: 25%;
width :200px;
}
/* CART FULL*/
.cartFull{
display: none;
position:absolute;
z-index: 9999;
}
.cartContent{
display: flex;
flex-direction: row;
position:absolute;
margin-top: 20px;
}
#imgCart{
height: 80px;
margin-left: 20px;
border-radius: 10%;
}
.numbers{
display:flex;
flex-direction: row;
}
.cart-item{
display: flex;
flex-direction: column;
margin-left: 20px;
color:hwb(0 75% 25%);
align-items:baseline;
align-content: center;
justify-items: flex-start;
}
.cart-total{
color:black;
width: fit-content;
}
.delete{
margin-left: 40px;
border: none;
background-color: white;
}
#checkout{
margin:20px;
background-color:hsl(26, 100%, 55%);
border-radius: 15px;
border: none;
height: 70px;
color:white;
width:100%;
}
/* CAROUSEL */
.carouselSneakers{
height: 80vh;
border: solid 1px;
width: 30px;
background-color: white;
border-radius: 50px;
padding:8px;
}
.carousel-inner{
position: inherit;
}
.carousel-indicators{
display:none;
}
.controls{
background-color: white;
border-radius: 50px;
padding:8px;
}
And this is my JS code, I know is pure javascript
IS very basic but I'm just starting and learning by myself
cartIcon.addEventListener("click", cartIconClicked)
function cartIconClicked(event){
const buttonClicked = event.target;
cartIconNumber.innerText == 0 ?
cartEmpty.classList.toggle("cart-Empty"): cartFull.classList.toggle("cartFull");
quantityFromStorage = localStorage.getItem('quantity');
prizeFromStorage = localStorage.getItem('prize');
totalPrize.innerText = prizeFromStorage;
squantity.innerText= "X" + quantityFromStorage;
sprize.innerText ="$" + sneakers.prize + ".00";
cartFull
.querySelector('.delete')
.addEventListener('click', removeShoppingItem);
function removeShoppingItem(event){
const buttonDelete = event.target;
cartIconNumber.innerText > 0 ?
cartFull.classList.toggle("cartFull") : null;
cartIconNumber.innerHTML = 0;
cartIconNumber.style.display="none";
}
}
Can someone tell me how can I put the cart on top of the carousel?? thank you!!!
Add z-index:1; in your carouselSneakers CSS class and change z-index from 999 to 3 in your cart-Empty and cartFull class. Hopefully it will work but also try to ask for more help in comments if it's not working.
I want to make 4 buttons that do the same thing. When you click on the button the heart is filled and when you click again the heart is empty. But only the first button works. When I click on the other three button the first button goes off. I don't really understand what I need to do. How can I make all 4 buttons to work?
var btn = document.getElementById('btn');
function Toggle() {
if (btn.classList.contains("far")) {
btn.classList.remove("far");
btn.classList.add("fas");
}else{
btn.classList.remove("fas");
btn.classList.add("far");
}
}
document.querySelectorAll('button').forEach((btn) => btn.addEventListener('click', Toggle, (e) => { console.log('hello'); }))
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100;300;400;700;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&family=Open+Sans:wght#300;400;600;800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.title {
text-align: center;
padding: 1.8rem;
font-size: 2rem;
color: black;
font-family: 'Lexend Mega', sans-serif;
}
.populair-movies {
justify-content: center;
display: flex;
}
.populair-movies h3 {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 1.2rem;
padding-top: 0.2rem;
padding-bottom: 0.7rem;
}
.populair-movies p {
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
.stars {
padding-bottom: 0.3rem;
}
.populair-movies .card-container .card {
height: 300px;
width: 200px;
margin: 0.5rem;
}
.populair-movies .card-container .card img {
height: 100%;
width: 100%;
}
.styling-btn {
margin-top: 1rem;
padding: 0.5rem 1.1rem 0.5rem 0.5rem;
background: blue;
font-size: 1rem;
font-family: 'Open Sans', sans-serif;
border: none;
color: #e8efff;
outline: none;
border-radius: 5px;
cursor: pointer;
}
.styling-btn i {
margin-right: 0.7rem;
margin-left: 0.3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Populair Movies</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<!-- css file -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h2 class="title">POPULAIR MOVIES</h2>
<section class="populair-movies">
<div class="card-container">
<div class="card">
<img src="https://www.moviemeter.nl/images/cover/1133000/1133282.jpg" alt="The Midnight Sky">
<div class="info">
<h3>The Midnight Sky</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
5,6
</p>
</div>
<p>2020 ‧ Sci-fi/Drama ‧ 2 u 2 m</p>
<button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BOWRhYWFkMDEtNTFjZC00OWJkLWJmMWQtNzI2OWRjZjVjOGYyXkEyXkFqcGdeQXVyMzQwMTY2Nzk#._V1_.jpg" alt="Escape from Pretoria">
<div class="info">
<h3>Escape from Pretoria</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
6,8
</p>
</div>
<p>2020 ‧ Drama/Thriller ‧ 1 u 46 m
</p>
<button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BMWU0MzQwNjMtZGRiMC00M2UzLWE1YmItMWU3M2E0NmNkMDQ2XkEyXkFqcGdeQXVyNjEwNTM2Mzc#._V1_.jpg" alt="Kadaver">
<div class="info">
<h3>Kadaver</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
5,1
</p>
</div>
<p>2020 ‧ Drama/Horror ‧ 1 u 26 m
</p>
<button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BY2RmZmI0NDMtMGQzOC00YWU3LTkwYWUtMDRkNDBjZDg3YTkyXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_.jpg" alt="The Dig">
<div class="info">
<h3>The Dig</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
7,2
</p>
</div>
<p>2021 ‧ Drama/Geschiedenis ‧ 1 u 52 m
</p>
<button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
</section>
<script src="js/script.js"></script>
</body></html>
You're using the same id in all the icons. JavaScript is only getting the element with the first id.
function toggle(index) {
const icon = document.querySelectorAll("button i")[index];
icon.classList.toggle("far");
icon.classList.toggle("fas");
}
document.querySelectorAll('button').forEach((btn, index) => btn.addEventListener('click', function() {
toggle(index);
}));
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100;300;400;700;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&family=Open+Sans:wght#300;400;600;800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.title {
text-align: center;
padding: 1.8rem;
font-size: 2rem;
color: black;
font-family: 'Lexend Mega', sans-serif;
}
.populair-movies {
justify-content: center;
display: flex;
}
.populair-movies h3 {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 1.2rem;
padding-top: 0.2rem;
padding-bottom: 0.7rem;
}
.populair-movies p {
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
.stars {
padding-bottom: 0.3rem;
}
.populair-movies .card-container .card {
height: 300px;
width: 200px;
margin: 0.5rem;
}
.populair-movies .card-container .card img {
height: 100%;
width: 100%;
}
.styling-btn {
margin-top: 1rem;
padding: 0.5rem 1.1rem 0.5rem 0.5rem;
background: blue;
font-size: 1rem;
font-family: 'Open Sans', sans-serif;
border: none;
color: #e8efff;
outline: none;
border-radius: 5px;
cursor: pointer;
}
.styling-btn i {
margin-right: 0.7rem;
margin-left: 0.3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Populair Movies</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<!-- css file -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h2 class="title">POPULAIR MOVIES</h2>
<section class="populair-movies">
<div class="card-container">
<div class="card">
<img src="https://www.moviemeter.nl/images/cover/1133000/1133282.jpg" alt="The Midnight Sky">
<div class="info">
<h3>The Midnight Sky</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
5,6
</p>
</div>
<p>2020 ‧ Sci-fi/Drama ‧ 2 u 2 m</p>
<button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BOWRhYWFkMDEtNTFjZC00OWJkLWJmMWQtNzI2OWRjZjVjOGYyXkEyXkFqcGdeQXVyMzQwMTY2Nzk#._V1_.jpg" alt="Escape from Pretoria">
<div class="info">
<h3>Escape from Pretoria</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
6,8
</p>
</div>
<p>2020 ‧ Drama/Thriller ‧ 1 u 46 m
</p>
<button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BMWU0MzQwNjMtZGRiMC00M2UzLWE1YmItMWU3M2E0NmNkMDQ2XkEyXkFqcGdeQXVyNjEwNTM2Mzc#._V1_.jpg" alt="Kadaver">
<div class="info">
<h3>Kadaver</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
5,1
</p>
</div>
<p>2020 ‧ Drama/Horror ‧ 1 u 26 m
</p>
<button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BY2RmZmI0NDMtMGQzOC00YWU3LTkwYWUtMDRkNDBjZDg3YTkyXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_.jpg" alt="The Dig">
<div class="info">
<h3>The Dig</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
7,2
</p>
</div>
<p>2021 ‧ Drama/Geschiedenis ‧ 1 u 52 m
</p>
<button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
</section>
<script src="js/script.js"></script>
</body></html>
I am having following UI.
Everything works good when zoom is 100%. But when user zooms in the UI get disturbed and is seen as following:
The card within the div does not resize. I want all the cards to take the width of the div titled E. Setting card width to 100% is creating issue for other divs. As cards get stretched for div having with bigger than div E.
div E display once card. There may be multiple card visible on horizontal scroll. Similarly, div R shows 3 cards at once. It may contain more cards. When zooming, some content of the card visible gets hidden in div E. Similarly, the last of 3 cards in div R is also gets partially hidden.
Here is the codepen link and below the code:
#div_A {
background-color: #B14C08;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_B {
background-color: #157668;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_C {
background-color: #E61B00;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_D {
background-color: #0078D4;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_E {
background-color: #0D283D;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
.holder {
min-height: 240px;
padding: 0 2px 0 2px;
}
.holder .card_holder {
padding: 0;
max-width: 290px;
}
.holder .xyz {
overflow-x: auto;
min-height: 240px;
}
.shortdetail {
display: flex;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.content {
width: 287px;
position: relative;
animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
}
.card {
width: 100%;
height: 80px;
padding: 0px;
border: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
background-color: white;
position: relative;
overflow: hidden;
}
.shortdetail {
margin: 5px;
flex-direction: row;
z-index: 2;
position: relative;
}
.profileinfo {
width: 100%;
margin: 0px 10px;
color: #5a5a5a;
line-height: 1.2;
font-style: initial;
}
.profileinfo .row {
margin: 0;
}
.profileinfo .col-8,
.col-4 {
padding: 0;
}
.profileinfo label {
margin-bottom: 0px;
}
.name {
font-size: 13px;
font-weight: 600;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="col-8">
<div class="row rounded-top" style="background-color :#405755; color: white; font-weight: 600;">
<span class="col" style="padding: 5px; padding-left: 8px; font-size: 14px;">List</span>
</div>
<div class="row border border-primary" style="padding: 5px 0 5px 0;">
<div class="row" style="margin: 0px; margin-bottom:3px; width: 100%;">
<div class="col-3 holder">
<div class="rounded-top" id="div_A">
Div A <button>Prev</button> <button>Next</button>
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-9 holder">
<div class="rounded-top" id="div_B">
Div B
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 holder">
<div class="rounded-top" id="div_C">
Div C
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 holder">
<div class="rounded-top" id="div_D">
Div D
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 holder">
<div class="rounded-top" id="div_E">
Div E
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Do not fix width or height with px, try with % and see
I've recently started using bootstrap to make a website functioning for both computer and mobile phones/tablets.
While it scales everything nicely in the browser, when I resize my browser window, some words disappear in my interface.
How can I make it so that my text doesn't disappear and stay in their respective rectangles?
I'm running this webpage on a Siemens S7-1200 PLC. I have made a json file that fetches data from the PLC which I represent on my website. When I try it on my phone however, some of the text disappears.
The following Image represents how my page looks like on a web browser on my laptop:
When I resize my browser it looks like the following:
Notice the arrow I've added, the arrow points towards the '1' that is next to the text that says 'Mixer 1'.
Excuse my english, it's not my mother tongue.
My HTML code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- title -->
<title>Main Page</title>
<!-- scripts -->
<!-- css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">
<img src="img/logo.png">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="main.html"><h2>Main</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="motoren.html"><h2>Motoren</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="verwarming.html"><h2>Verwarming</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io1.html"><h2>DI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io2.html"><h2>DQ</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io3.html"><h2>AI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="alarm.html"><h2>Alarm</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="diagnostics.html"><h2>Diagnostics</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="parameters.html"><h2>Parameters</h2></a>
</li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay">
<div class="customTable">
<div class="container-fluid">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-pixel-width-100">Overzicht</div>
<div class="col" id="ovznormaal">Normaal</div>
<div class="col" id="ovzengsave">Energy Save</div>
<div class="col" id="ovzhyg">Hygieniseren</div>
<div class="col" id="ovzhygdone">Hygieniseren Klaar</div>
<div class="col" id="ovzdrleeg">Leeg Draaien</div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Motoren</div>
<div class="col" id="mix1">Mixer 1</div>
<div class="col" id="mix2">Mixer 2 (EC100)</div>
<div class="col" id="ventil">Ventilator</div>
<div class="col" id="percent"><p id="percnum">0 %</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Verwarming</div>
<div class="col">Product Temperatuur</div>
<div class="col"><p id="prodTemp">000.0 C</p></div>
<div class="col">Mat 1 Temperatuur</div>
<div class="col"><p id="m1temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">IO</div>
<div class="col">Mat 2 Temperatuur</div>
<div class="col"><p id="m2temp">000.0 C</p></div>
<div class="col">Mat 3 Temperatuur</div>
<div class="col"><p id="m3temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Alarmen</div>
<div class="col">Verwarming Matten</div>
<div id="mt1" class="col">Mat 1</div>
<div id="mt2" class="col">Mat 2</div>
<div id="mt3"class="col">mat 3</div>
<!--<div class="col"></div>-->
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Diagnostics</div>
<div class="col">Programma Keuze</div>
<div id="kort" class="col"><p id="shortprog">Kort 0000 Min</p></div>
<div id="lang" class="col"><p id="longprog">Lang 0000 Min</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Parameters</div>
<div class="col">Operationele stand</div>
<div class="col">
<div class="switchcontainer">
<form>
<input type="submit" value="Auto">
<input type="hidden" name='"2_HMI".AUTOTEST' value="0">
</form>
<form>
<input type="submit" value="Handmatig">
<input type="hidden" name='"2_HMI".AUTOTEST' value="1">
</form>
<!--<button id="Auto">Auto</button>
<button id="Handmatig">Handmatig</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/js/bootstrap4-toggle.min.js"></script>
<script type="text/javascript" src="js/custom/main.js"></script>
</body>
</html>
My CSS:
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
.header {
background-image: url('../img/test.png');
background-size: cover;
background-position: center;
position: relative;
}
.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.customTable {
padding-top: 8%;
padding-left: 2%;
width: 98%;
}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
}
#Auto {
width: 180px;
height: 100%;
}
#Handmatig {
width: 180px;
height: 100%;
}
I hope someone can give my some tips, I'm kind of a beginner to CSS/HTML/JS.
Your <DIV> text is wrapping into the box below it, add white-space: nowrap to your CSS for the DIVs under .col {} and .col-pixel-width-100 {}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
white-space: nowrap;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
white-space: nowrap;
}
You could also try adding the "text-nowrap" class. That is a bootsrtap class that will essentially do the same as what Bob Dole has suggested above
you can simply provide a new class to all the required columns. Here i have edited the code for you
HTML PART
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- title -->
<title>Main Page</title>
<!-- scripts -->
<!-- css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">
<img src="img/logo.png">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="main.html"><h2>Main</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="motoren.html"><h2>Motoren</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="verwarming.html"><h2>Verwarming</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io1.html"><h2>DI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io2.html"><h2>DQ</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io3.html"><h2>AI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="alarm.html"><h2>Alarm</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="diagnostics.html"><h2>Diagnostics</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="parameters.html"><h2>Parameters</h2></a>
</li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay">
<div class="customTable">
<div class="container-fluid">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-pixel-width-100">Overzicht</div>
<div class="col newclass" id="ovznormaal">Normaal</div>
<div class="col newclass" id="ovzengsave">Energy Save</div>
<div class="col newclass" id="ovzhyg">Hygieniseren</div>
<div class="col newclass" id="ovzhygdone">Hygieniseren Klaar</div>
<div class="col newclass" id="ovzdrleeg">Leeg Draaien</div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Motoren</div>
<div class="col newclass" id="mix1">Mixer 1</div>
<div class="col newclass" id="mix2">Mixer 2 (EC100)</div>
<div class="col newclass" id="ventil">Ventilator</div>
<div class="col newclass" id="percent"><p id="percnum">0 %</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Verwarming</div>
<div class="col newclass">Product Temperatuur</div>
<div class="col newclass"><p id="prodTemp">000.0 C</p></div>
<div class="col newclass">Mat 1 Temperatuur</div>
<div class="col newclass"><p id="m1temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">IO</div>
<div class="col newclass">Mat 2 Temperatuur</div>
<div class="col newclass"><p id="m2temp">000.0 C</p></div>
<div class="col newclass">Mat 3 Temperatuur</div>
<div class="col"><p id="m3temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Alarmen</div>
<div class="col newclass">Verwarming Matten</div>
<div id="mt1" class="col newclass">Mat 1</div>
<div id="mt2" class="col newclass">Mat 2</div>
<div id="mt3"class="col newclass">mat 3</div>
<!--<div class="col"></div>-->
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Diagnostics</div>
<div class="col newclass">Programma Keuze</div>
<div id="kort" class="col newclass"><p id="shortprog">Kort 0000 Min</p></div>
<div id="lang" class="col newclass"><p id="longprog">Lang 0000 Min</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Parameters</div>
<div class="col newclass">Operationele stand</div>
<div class="col newclass">
<div class="switchcontainer">
<form>
<input type="submit" value="Auto">
<input type="hidden" name='"2_HMI".AUTOTEST' value="0">
</form>
<form>
<input type="submit" value="Handmatig">
<input type="hidden" name='"2_HMI".AUTOTEST' value="1">
</form>
<!--<button id="Auto">Auto</button>
<button id="Handmatig">Handmatig</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS PART
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
.header {
background-image: url('../img/test.png');
background-size: cover;
background-position: center;
position: relative;
}
.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.customTable {
padding-top: 8%;
padding-left: 2%;
width: 98%;
}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
}
.newclass {
min-width: 300px;
}
#Auto {
width: 180px;
height: 100%;
}
#Handmatig {
width: 180px;
height: 100%;
}
PS I have added a new class named "newclass" and provided a min width....please change the min-width as you like
I think your issue lies with using line-height as a vertical align, as when the text wraps, it wraps with 98px of line-height.
I would start by removing it and re-aligning it with padding etc.
I use bootstrap wells to resemble cards. I currently have two different types of cards, the "normal" ones which will be in the middle of the screen, and the "special" ones which will be on the left and right side.
Template I'm trying to replicate:
Issues:
1.) It seems like the wells in bootstrap don't want to go to the very left or right of a page. They seem to always be contained in an invisible div/border and won't go anywhere else unless absolute positioning is used. I can't use absolute positioning because the middle content overlaps it if zoomed in. It gets rid of the responsive aspect of bootstrap which needs to stay.
2.) Without the use of absolute positioning, making new "special" cards on the side will add extra vertical space which will sink the middle content down the page
body {
background-color: #5C67B6;
}
html,
body {
height: 100%;
padding-top: 70px;
}
.btn-purple {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -140px;
}
.btn-info {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
right: 10%;
margin-left: 140px;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.customClass {
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.turbo {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well {
min-height: 320px;
max-height: 320px;
height: auto;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.well:hover {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well p {
margin-bottom: 50px;
}
.header {
display: inline-block;
width: 100%;
border: 1px solid red;
}
.playerOne {
float: right;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
.playerTwo {
float: left;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
#media only screen and (max-width: 900px) {
.playerOne {
width: 650px;
}
.playerTwo {
width: 633px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<div class="playerOne">
Special Cards
</div>
<div class="playerTwo">
Special Cards
</div>
</div>
<center>
<div class="input-group" style="width: 500px; padding-bottom: 2cm;">
<input type="text" class="form-control" placeholder="Search cards!">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
</center>
<div class="content">
<div class="container content-sm customClass">
<div class="row">
<center>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a aria-label="Previous" href="#"><span aria-hidden="true">«</span></a>
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
<a aria-label="Next" href="#"><span aria-hidden="true">»</span></a>
</li>
</ul>
</nav>
</center>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well turbo">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
</div>
</div>
</div>
I've tried using a flexbox and putting the wells in there which seemed to work until i zoomed in and noticed it was no longer responsive and overlapped the other content.
What is the best and most efficient way of adding wells to the left and right side of the page without adding unnecessary whitespace and maintaining responsiveness?
You can try with below example to get the same use col-xx-offset-xx bootstrap's classes
I posted a working example
You can use container-fluid instead of container.
.box {
border: 1px solid;
width: 100%;
height: 100px;
margin: 0px 0px 10px 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
</div>
Working codepen - codepen
I've no idea how to do it with fixed sizes, css is hard.
body {
padding-top: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">header row</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-lg-6">
<div class="well">
sample text
</div>
<div class="row">
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>