I would like to know how can I style my dropzone in a circle box? Because my image isn't fit nicely in my div box and the styling is a mess. I am not sure which css is wrong right now
CSS
.dropzone{
border-radius:100%;
width: 100px;
height: 100px;
min-height: 0px !important;
}
.dropzone .dz-preview .dz-image > img {
width: 100%;
border-radius: 100%;
height: 100%;
}
.dropzone .dz-preview .dz-image {
width: 100%;
background-color: none;
}
.dropzone .dz-default.dz-message {
display: none;
}
<b-row class="mb-3">
<b-col cols=12 >
<label for="input-live">My Information</label>
<b-button variant="light" style="float:right; background:white; border:none;" #click="deleteBabyInfo(form.id)">Delete</b-button>
<div class="image-container">
<vue-dropzone ref="myVueDropzone" class="dropzone" id="dropzone" #vdropzone-success="UploadCallback" #vdropzone-removed-file="removedCallback" v-on:vdropzone-sending="sendingEvent" :options="dropzoneOptions" ></vue-dropzone>
</div>
</b-col>
<b-col cols="5" style="position:absolute; top:70px; left: 160px;"><span>Upload Your Image</span></b-col>
</b-row>
script
export default {
components: {
vueDropzone: vue2Dropzone
},
data: () => ({
param: {
id: null,
},
dropzoneOptions: {
dictDefaultMessage: "",
url: '/api/profile/upload_img',
acceptedFiles:'image/*',
maxFiles: 1,
thumbnailWidth: 500,
addRemoveLinks: true,
dictRemoveFile: 'Delete',
thumbnailMethod: 'contain',
maxFilesize: 60,
resizeMimeType: 'image/jpeg',
resizeQuality: 0.6,
resizeWidth:1024,
headers: { "Document-Type": "my_img" },
},
Below are the output image
Related
I have sideNavbar and when click on side bar menu return menu componetns on the right side.
Below i have mention the image just look same output want.
Sandboxlink:https://m7tqt3.csb.app/
SideNavbar.js
---
import "./SideNavBar.css";
const SideNavBar = () => {
const menuItems = [
{
text: "Dashboard",
icon: "icons/grid.svg",
},
{
text: "Admin Profile",
icon: "icons/user.svg",
},
{
text: "Messages",
icon: "icons/message.svg",
},
{
text: "Analytics",
icon: "icons/pie-chart.svg",
},
{
text: "File Manager",
icon: "icons/folder.svg",
},
{
text: "Orders",
icon: "icons/shopping-cart.svg",
},
{
text: "Saved Items",
icon: "icons/heart.svg",
},
{
text: "Settings",
icon: "icons/settings.svg",
},
];
return (
<div
className={
"side-nav-container"
}
>
<div className="nav-upper">
<div className="nav-heading">
(
<div className="nav-brand">
<img src="icons/Logo.svg" alt="" srcset="" />
<h2>Showkart</h2>
</div>
)
</div>
<div className="nav-menu">
{menuItems.map(({ text, icon }) => (
<a
className={ "menu-item"}
href="#"
>
<img className="menu-item-icon" src={icon} alt="" srcset="" />
{ <p>{text}</p>}
</a>
))}
</div>
</div>
</div>
);
};
export default SideNavBar;
SideNavbar.css
/* NX = not expanded */
.side-nav-container {
background-color: var(--dark);
width: 300px;
height: 100vh;
position: relative;
color: var(--light);
transition: 0.4s;
}
.side-nav-container-NX {
width: 85px;
}
.nav-upper,
.nav-heading,
.nav-menu,
.menu-item,
.nav-footer {
/* border: 2px solid white; */
display: grid;
}
.nav-heading {
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr;
height: 75px;
}
.nav-brand {
display: flex;
color: var(--light);
}
.nav-brand img {
width: 40px;
padding: 0 10px;
}
.hamburger {
background: none;
border: none;
cursor: pointer;
margin: auto;
}
.hamburger span {
display: block;
margin-top: 5px;
background-color: var(--light);
border-radius: 15px;
height: 5px;
width: 35px;
transition: 0.4s;
}
.hamburger:hover span {
background-color: var(--primary);
}
.hamburger-in:hover span:nth-child(1) {
width: 25px;
transform: translateY(4px) rotate(-25deg);
}
.hamburger-in:hover span:nth-child(2) {
width: 40px;
}
.hamburger-in:hover span:nth-child(3) {
width: 25px;
transform: translateY(-4px) rotate(25deg);
}
/* ///////////////////// */
/* ///////////////////// */
/* ///////////////////// */
/* ///////////////////// */
.hamburger-out {
margin-left: 24px;
}
.hamburger-out:hover span:nth-child(1) {
width: 25px;
transform: translate(14px, 4px) rotate(-155deg);
}
.hamburger-out:hover span:nth-child(2) {
width: 40px;
}
.hamburger-out:hover span:nth-child(3) {
width: 25px;
transform: translate(14px, -4px) rotate(155deg);
}
.nav-menu {
grid-template-rows: repeat(7, 1fr);
margin-top: 50px;
}
.menu-item {
height: 57px;
display: flex;
color: var(--light);
text-decoration: none;
text-transform: uppercase;
margin: auto 20px;
border-radius: 10px;
}
.menu-item-NX {
margin: auto;
}
.menu-item:hover {
background-color: var(--primary);
}
.menu-item img {
width: 30px;
padding: 0 20px;
}
.nav-footer {
width: 100%;
height: 87px;
position: absolute;
bottom: 0;
grid-template-rows: 1fr;
grid-template-columns: 2fr 1fr;
}
.nav-details {
display: flex;
}
.nav-details img {
width: 50px;
padding: 0 20px;
}
.nav-footer-user-name {
font-size: 18px;
font-weight: 900;
}
.nav-footer-user-position {
margin-top: -15px;
color: var(--gray);
}
.logout-icon {
width: 30px;
margin: auto;
border-radius: 90px;
padding: 20px;
margin-left: 5px;
}
.logout-icon:hover {
background-color: var(--primary);
}
Notes: React router dom version: 5.3.1.
Output look like:
enter image description here
Routes to another components on right side
Firstly, if I undestand your question, you want a side navbar which allows you to navigate to different pages with your react app. If so:
<div className="nav-menu">
{menuItems.map(({ text, icon }) => (
<a <--- The problem is here
className={ "menu-item"}
href="#"
>
<img className="menu-item-icon" src={icon} alt="" srcset="" />
{ <p>{text}</p>}
</a>
))}
</div>
You are using anchor tag which will redirect you out of react router. You should use Link tag which allows to redirect to different pages within your react app.
const menuItems = [
{
text: "Dashboard",
icon: "icons/grid.svg",
navLink:'/dashboard'
},
{
text: "Admin Profile",
icon: "icons/user.svg",
navLink:'/admin'
},...]
<div className="nav-menu">
{menuItems.map(({ text, icon, navlink }) => (
<Link
className={ "menu-item"}
to={navlink}
>
<img className="menu-item-icon" src={icon} alt=""
srcset=""
/>
{ <p>{text}</p>}
</Link>
))}
</div>
Likewise you need to step up your App.js with BrowserRouter, Routes and Route to move between pages.
I have a list of items that are background-image and I need to go down through each item down (-38px) and display all of them changing only the background-position
enter image description here
Should be displayed in a line
enter image description here
My vue code:
CraftPage:
<template>
<div class="page-wrap">
<my-nav-craft/>
<div class="wrap">
<div class="construct">
<div class="left">
<h3 class="title">Basic</h3>
<ul class="items">
<my-li-crafts :items="items"/>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import MyNavCraft from "#/components/navCraft/navCraft";
import MyLiCrafts from "#/components/navCraft/liCraft";
export default {
components: {MyLiCrafts, MyNavCraft},
data() {
return {
items: [
{id: 1, posX: 0, posY: 0},
{id: 2, posX: 0, posY: -38}
]
}
},
}
</script>
<style scoped>
.page-wrap{
width: 100%;
display: flex;
flex-direction: column;
max-width: 1200px;
justify-content: center;
margin: 0px auto;
}
.wrap {
width: 100%;
background-color: #c6c6c6;
border-radius: 20px;
padding: 26px 23px 8px;
}
.left {
float: left;
width: 340px;
clear: both;
margin-bottom: 5px;
}
.items{
list-style: none;
}
.items__item {
background-image: url("../assets/icon_sprite.png");
width: 36px;
height: 36px;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
</style>
My element which needs to change background-position to -38px
My-li-craft:
<template>
<li class="items__item" v-for="item in items" :key="item.id"
:style="{backgroundPosition: item.posX + 'px' + ' ' + item.posY + 'px' }"
>
</li>
</template>
<script>
export default {
name: "my-li-crafts",
props: {
items: {
type: Array,
required: true
}
},
data() {
return {
}
},
methods: {
bgPos: function () {
let el = this.$el.querySelector('.items__item'), bgWidth = 20, bgHeight = 20;
for (let i = 0; i< 3; i++) {
return el.css({
"background-position": (el.width()-bgWidth+10) + "px " + (el.height()-bgHeight-10) + "px"
})
}
}
},
// computed: {
// bgPoss: function () {
// const el = this.$el.querySelector('.items__item'), bgWidth = 20, bgHeight = 20;
// return el.css({
// "background-position": (el.width()-bgWidth+10) + "px " + (el.height()-bgHeight-10) + "px"
// })
//
// }
// }
}
</script>
<style scoped>
.items__item {
background-image: url("../../assets/icon_sprite.png");
width: 36px;
height: 36px;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
</style>
I'm trying to put a title inside an image using the ngx-useful-swiper. However, if I use absolute position in the title, the h3 is on top of each other. I would like you to stay in each one. You are using the * ngFor directive for this. I tried to change the ng-container to div but it didn't work.
<section>
<swiper [config]="config">
<div class="swiper-wrapper">
<ng-container *ngFor="let img of images">
<img class="swiper-slide" [src]="img.src" [alt]="img.alt" />
<h3>{{ img.title }}</h3>
</ng-container>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</swiper>
</section>
import { Component, OnInit } from '#angular/core';
import { SwiperOptions } from 'swiper';
#Component({
selector: 'app-category',
templateUrl: './category.component.html',
styleUrls: ['./category.component.scss'],
})
export class CategoryComponent implements OnInit {
config: SwiperOptions = {
speed: 500,
pagination: { el: '.swiper-pagination', clickable: true },
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
spaceBetween: 20,
breakpoints: {
'480': {
slidesPerView: 3,
spaceBetween: 20,
},
'768': {
slidesPerView: 4,
spaceBetween: 20,
},
'1080': {
slidesPerView: 5,
spaceBetween: 20,
},
'1280': {
slidesPerView: 5,
spaceBetween: 20,
},
},
};
images: Array<object> = [
{
src: 'https://loremflickr.com/g/600/400/paris',
alt: 'Image 1',
title: "SUV's",
},
{
src: 'https://loremflickr.com/600/400/brazil,rio',
alt: 'Image 2',
title: 'Carros para a famÃlia',
},
{
src: 'https://loremflickr.com/600/400/paris,girl/all',
alt: 'Image 3',
title: 'Carros sedan',
},
{
src: 'https://loremflickr.com/600/400/brazil,rio',
alt: 'Image 4',
title: 'Carros econômicos',
},
{
src: 'https://loremflickr.com/600/400/paris,girl/all',
alt: 'Image 5',
title: 'Picapes',
},
{
src: 'https://loremflickr.com/600/400/brazil,rio',
alt: 'Image 6',
title: 'Hatch',
},
];
constructor() {}
ngOnInit(): void {}
}
section {
margin: 0.6rem 2rem 0.8rem 2rem;
swiper {
height: 190px;
width: 100%;
img {
border-radius: 8px;
background-position: center center;
background-size: cover;
overflow: hidden;
position: relative;
}
.ng-container {
text-align: center;
position: relative;
}
.title {
position: absolute;
top: 8px;
left: 16px;
}
// h3 {
// color: rgb(255, 255, 255);
// font-size: 24px;
// font-weight: 500;
// line-height: 36px;
// max-width: 180px;
// position: relative;
// // text-shadow: 1px 1px 2px black ;
// }
}
h3 {
position: absolute;
top: 8px;
left: 16px;
}
}
Thanks a lot.
It worked by wrapping the image and the title in a div:
<section>
<swiper [config]="config">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let img of images">
<div class="container-image">
<img [src]="img.src" [alt]="img.alt" />
<h3>SUV's</h3>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</swiper>
</section>
section {
margin: 0.6rem 2rem 0.8rem 2rem;
swiper {
height: 190px;
width: 100%;
.swiper-slide {
border-radius: 8px;
overflow: hidden;
}
.container-image {
position: relative;
text-align: center;
color: white;
h3 {
position: absolute;
top: 8px;
left: 16px;
}
}
img {
border-radius: 8px;
background-position: center center;
background-size: cover;
overflow: hidden;
position: relative;
}
}
}
just want to quickly thank the community at large for having helped me out many times already. You're all generous and helpful beyond measure. This is also my first post so I apologize if I forget to include anything.
I am currently a self-taught amateur web-developer attempting my first real project. I am using Next.js and am favoring server side rendering. So far everything has gone well, but while testing responsiveness I noticed that 1 of the 3 flip cards I'm using is displaying its back-face slightly too early. Also, this early back-face display only occurs when the window is over 1600px wide and is most easy to replicate on Chrome browsers.
The most confusing part of this is that from what I can tell, all 3 of my flip cards should be exactly the same, yet only one is having issues. Just to clarify, I've placed a flip card component inside of a slider component, hence the two code blocks
incoming code-wall:
Outer "slider" component
import React from 'react';
import SoloContent1 from './SoloContent1';
import SoloContent2 from './SoloContent2';
import SoloContent3 from './SoloContent3';
import CloseButton from './CloseButton';
export default class SliderSolo extends React.Component {
constructor(props) {
super(props);
this.state={
slide1: "slide1",
slide2: "slide2",
slide3: "slide3",
slideClass: "slide3",
}
this.slideLeft = this.slideLeft.bind(this);
this.slideRight = this.slideRight.bind(this);
};
slideRight() {
if (this.state.slideClass === this.state.slide1)
{
this.setState({ slideClass : this.state.slide2 })
}
else if (this.state.slideClass === this.state.slide2)
{
this.setState({ slideClass : this.state.slide3 })
}
else if (this.state.slideClass === this.state.slide3)
{
this.setState({ slideClass : this.state.slide1 })
}
}
slideLeft() {
if (this.state.slideClass === this.state.slide1)
{
this.setState({ slideClass : this.state.slide3 })
}
else if (this.state.slideClass === this.state.slide3)
{
this.setState({ slideClass : this.state.slide2 })
}
else if (this.state.slideClass === this.state.slide2)
{
this.setState({ slideClass : this.state.slide1 })
}
}
render() {
if (this.props.show === true) {
return (
<div className="slider">
<div className={this.state.slideClass} >
<SoloContent1 />
<SoloContent2 />
<SoloContent3 />
</div>
<button id="goLeft" onClick={this.slideRight}><i className="ChevronLeft" id="left"></i></button>
<button id="goRight" onClick={this.slideLeft}><i className="ChevronRight" id="right"></i></button>
<a onClick={this.props.onClose} id="closeLink"><CloseButton id="close" /></a>
<style jsx>
{`
.ChevronLeft {
position: absolute;
height: 75px;
width: 75px;
z-index: 10;
transform: rotate(90deg)
}
.ChevronRight {
position: absolute;
height: 75px;
width: 75px;
z-index: 10;
transform: rotate(-90deg)
}
#left {
right: 40px;
top: 0px;
}
#right {
right: -40px;
top: -5px;
}
.ChevronLeft::before,
.ChevronLeft::after {
position:absolute;
display:block;
content:"";
border:35px solid transparent;
}
.ChevronLeft::before {
border-top-color:#b00;
}
.ChevronLeft::after {
top:-10px;
border-top-color:#fff;
}
.ChevronRight::before,
.ChevronRight::after {
position:absolute;
display:block;
content:"";
border:35px solid transparent;
}
.ChevronRight::before {
border-top-color:#b00;
}
.ChevronRight::after {
top:-10px;
border-top-color:#fff;
}
#closeLink {
position: absolute;
width: 25px;
height: 25px;
cursor: pointer;
right: 6%;
top: 2%;
}
#media (max-width: 720px) {
#closeLink {
top: 45px;
right: 40px;
}
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 75px;
height: 75px;
background: none;
border: none;
cursor: pointer;
}
button:focus {
outline: none;
box-shadow: none;
}
#goLeft {
left: 5.5%;
}
#goRight {
right: 5.5%;
}
.slider {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
align-items: center;
overflow: hidden;
margin-top: 130px;
min-width: 450px;
}
i {
font-size: 2vw;
}
.slide1 {
position: relative;
width: 100%;
height: 60vh;
transition: 0.5s;
margin: auto;
}
#media (max-width: 720px) {
.slide1 {
height: 75vh;
margin-top: 6%
}
}
.slide2 {
position: relative;
width: 100%;
height: 60vh;
transition: 0.5s;
margin: auto;
transform: translateX(100%)
}
#media (max-width: 720px) {
.slide2 {
height: 75vh;
margin-top: 6%
}
}
.slide3 {
position: relative;
width: 100%;
height: 60vh;
transition: 0.5s;
margin: auto;
transform: translateX(200%)
}
#media (max-width: 720px) {
.slide3 {
height: 75vh;
margin-top: 6%
}
}
`}
</style>
</div>
);} else {
return null;
}
}
}
Inner "flip card" component
import React from 'react';
class SoloContent1 extends React.Component {
constructor(props) {
super(props);
this.state={
className1: "flipCard",
className2: "flipCard",
className3: "flipCard",
}
this.flip1 = this.flip1.bind(this);
this.unflip1 = this.unflip1.bind(this);
this.flip2 = this.flip2.bind(this);
this.unflip2 = this.unflip2.bind(this);
this.flip3 = this.flip3.bind(this);
this.unflip3 = this.unflip3.bind(this);
}
flip1() {
this.setState({ className1 : "flipCard is-flipped" })
}
unflip1() {
this.setState({ className1 : "flipCard" })
}
flip2() {
this.setState({ className2 : "flipCard is-flipped" })
}
unflip2() {
this.setState({ className2 : "flipCard" })
}
flip3() {
this.setState({ className3 : "flipCard is-flipped" })
}
unflip3() {
this.setState({ className3 : "flipCard" })
}
render() {
return (
<div id="contentContainer">
<div className="contentCanvas contentCanvas--card">
<div className="flipCardContainer" id="flipContainer1" onMouseEnter={this.flip1} onMouseLeave={this.unflip1}>
<div className={this.state.className1} id="card1">
<div className="card__face card__face--front" id="soloPro1"
style={{
backgroundImage: "url(" + `${require("../public/assets/img1.jpg")}` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
</div>
<div className="card__face card__face--back" id="soloPro2">
<div style={{
backgroundImage: "url(" + `${require("../public/assets/img1.jpg")}` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover",
filter: "blur(8px)",
}}>
</div>
<p className="cardText">Card 1 Back</p>
</div>
</div>
</div>
<div className="flipCardContainer" id="flipContainer2" onMouseEnter={this.flip2} onMouseLeave={this.unflip2}>
<div className={this.state.className2} id="card2">
<div className="card__face card__face--front" id="soloPro1"
style={{
backgroundImage: "url(" + `${require("../public/assets/img2.jpg")}` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
</div>
<div className="card__face card__face--back" id="soloPro2">
<div style={{
backgroundImage: "url(" + `${require("../public/assets/img2.jpg")}` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover",
filter: "blur(8px)",
}}>
</div>
<p className="cardText">Card 2 Back</p>
</div>
</div>
</div>
<div className="flipCardContainer" id="flipContainer3" onMouseEnter={this.flip3} onMouseLeave={this.unflip3}>
<div className={this.state.className3} id="card3">
<div className="card__face card__face--front" id="soloPro1"
style={{
backgroundImage: "url(" + `${require("../public/assets/img3.jpg")}` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
</div>
<div className="card__face card__face--back" id="soloPro2">
<div style={{
backgroundImage: "url(" + `${require("../public/assets/img3.jpg")}` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover",
filter: "blur(8px)",
}}>
</div>
<p className="cardText">Card 3 Back</p>
</div>
</div>
</div>
</div>
<style jsx>
{`
.cardText {
position: absolute;
height: 100%;
width: 100%;
transform: translateY(-65%)
}
#contentContainer {
position: absolute;
height: 100%;
width: 90%;
background-image: url('image');
background-color: rgb(192,192,192);
border-radius: 8px;
transform: translateX(0%);
right: 5%;
overflow: hidden;
border: 5px solid silver;
box-sizing: border-box;
}
#media (max-width: 720px) {
#contentContainer {
height: 100%;
min-height: 575px;
overflow: hidden;
}
}
.contentCanvas {
z-index: 1;
height: 100%;
width: 100%;
margin: auto;
margin-top: 0%;
}
#media (max-width: 720px) {
.contentCanvas {
transform: translate(0, 0%);
min-height: 525px;
height: 102%;
width: 100%;
margin-top: 0%;
}
}
.flipCard {
margin: auto;
list-style: none;
font-size: 1.6em;
width: 100%;
height: 100%;
padding: 0;
display: inline-block;
transition: transform 1s;
transform-style: preserve-3d;
position: relative;
cursor: pointer;
}
#media (max-width: 720px) {
.flipCard {
width: 100%;
height: 100%;
}
}
.card__face {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
}
.card__face--front {
background: white;
}
.card__face--back {
background: black;
transform: rotateY( 180deg );
}
.flipCard.is-flipped {
transform: rotateY( 180deg );
}
#media (max-width: 720px) {
.card__face--back {
background: black;
transform: rotateX( 180deg );
}
.flipCard.is-flipped {
transform: rotateX( 180deg );
}
}
#card1 {
}
#media (max-width: 720px) {
#card2 {
margin-top: -1%
}
}
#media (max-width: 720px) {
#card3 {
margin-top: -1%
}
}
.flipCardContainer {
perspective: 40rem;
z-index: 1;
height: 100%;
width: 33.333333333333333333333333%;
margin: auto;
display: inline-block;
}
#media (max-width: 720px) {
.flipCardContainer {
width: 100%;
height: 33%;
margin-top: 0%;
}
}
`}
</style>
</div>
);
}
}
export default SoloContent1;
Any and all help is appreciated. Also please don't be afraid to criticize my work. This is my first project after all and the last thing I want is to continue developing bad habits. Thank you all in advance.
In the end I was never able to figure out what was causing the issue. Though I discovered it was directly linked to the pixel width of the viewable window, regardless of which container the element was nested in. Also, beyond a certain width the issue began to pop up in the other flip cards.
Sorry I can't offer a real solution, though I did manage to get around it by causing the backface of each flip card to fade in as it flips.
I'm trying to do a loading overlay effect with an rotating icon in the middle. I use fontawesome.
So I coded this: http://jsfiddle.net/eys3d/7/
It works, but I'm trying to make it responsive. I mean, when the section size decreases, the spin size will decrease too (remaining centered). An if the size of the section increases, the oposite.
I tried to use em units, but I didn't get the result I expected.
Is this the best way to do it? How I can make it responsive?
CSS
section {
width: 200px;
height: 200px;
margin: 50px;
}
#overlay {
position: relative;
width: 100%;
height: 100%;
z-index: 99999999999;
background: rgba(0, 0, 0, 0.5);
}
#overlay i {
position: absolute;
top: 50%;
left: 50%;
}
.spin-big {
font-size: 50px;
height: 50px;
width: 50px;
margin-top: -25px;
margin-left: -25px;
}
.spin-normal {
font-size: 35px;
height: 35px;
width: 35px;
margin-top: -22.5px;
margin-left: -22.5px;
}
.spin-small {
font-size: 20px;
height: 20px;
width: 20px;
margin-top: -10px;
margin-left: -10px;
}
HTML
<section>
<div id="overlay">
<i class="fa fa-spinner fa-spin spin-big"></i>
</div>
</section>
<section>
<div id="overlay">
<i class="fa fa-spinner fa-spin spin-normal"></i>
</div>
</section>
<section>
<div id="overlay">
<i class="fa fa-spinner fa-spin spin-small"></i>
</div>
</section>
Any tip, advice or help will be appreciated, and If you need more info, let me know and I'll edit the post.
Why you won't try to use display:table attribute to your overlay div and display:table-cell to fontawesome i class? as below:
#overlay {
width: 100%;
height: 100%;
display:table;
background: rgba(0, 0, 0, 0.5);
}
#overlay i {
display:table-cell;
vertical-align:middle;
text-align:center;
}
Working Demo
you can use this for good effect
.loading
{
pointer-events: all;
z-index: 99999;
border: none;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
cursor: wait;
position: fixed;
background-color: rgba(0, 0, 0, 0.6);
}
Just run into this looking for a similar solution.
The only way to responsively change the font-size would be through media queries.
I.e:
#media min-device-width: 300px{
font-size: 8px;
}
#media min-device-width: 480px{
font-size: 12px;
}
ext..
-----------div in Layout Page---------------
<div class="loading-bg" id="dvSpinner">
<img src="~/Areas/Images/loader.gif">
</div>
----------css-----------
.loading-bg {
background: #e9e9e9;
display: none;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
z-index: 5000;
width: 100%;
}
.loading-bg img{
position: absolute;
top: 42%;
left: 46%;
height: 100px;
width: 100px;
}
-------------html------------
<div class="appendInputFieldForUAIHiddenDiv"
id="appendInputFieldForUAIHiddenDiv">
#Html.TextBoxFor(model => model.PrimaryEmail, new { #class = "form-control enter-email-FPHidden-div", id = "email-address-entered", name = "email-address-entered" })
#Html.ValidationMessageFor(model => model.PrimaryEmail)
<button type="submit" class="btn btn-info submit-button-FPHidden" onclick="submitbuttonFPHidden()">
#ASRP.Resources.Resource.Submit
</button>
</div>
--------------scripts--------------------------
function submitbuttonFPHidden() {
var username = $('#email-address-entered').val();
if (username == null || username == "") {
document.getElementById("email-address-entered").style.borderColor = "#ff0232";
return false;
}
if (!validateEmail(username)) {
document.getElementById("email-address-entered").style.borderColor = "#ff0232";
return false;
}
document.getElementById('dvSpinner').style.display = "block";
$.ajax({
url: "../User/ForgotPassword",
data: { email: username },
dataType: "json",
type: "post",
error: function (error, msg) {
$('div#dvSpinner').hide();
return false;
},
success: function (data) {
if (data.success) {
if (data.emailSent == "Successful") {
document.getElementById('FPHiddenDivContainer').style.display = "none";
document.getElementById('entered-email-address').style.display = "block";
document.getElementById('entered-email-address-para').innerHTML = document.getElementById('email-address-entered').value;
document.getElementById('PwdMsgNew').style.display = "none";
}
else if (data.emailSent == "Failure")
{
document.getElementById('FPHiddenDivContainer').style.display = "none";
document.getElementById('entered-email-address').style.display = "block";
document.getElementById('entered-email-address-para').innerHTML = document.getElementById('email-address-entered').value;
document.getElementById('PwdMsg').style.display = "none";
document.getElementById('lblThankYou').style.display = "none";
}
}
else {
var ddlLangValue = $('#ddlLangs').val();
setCookie("culture", ddlLangValue, 31536e3);
var resources = {}; // Global variable.
(function ($) {
$.getJSON("Resource/GetResources", function (data) {
resources = data;
alert(resources.fpUnabletoProcessReq);
});
})(jQuery);
}
document.getElementById('dvSpinner').style.display = "none";
}
});
return true;
}