I am making a responsive site sandbox.mercomcorp.com and I want to STOP horizontal scroll I used html, body {
width: 100%;
overflow-x: hidden;
} in my css but all that did was take away the visible scroll bars. I want to stop horizontal for good because that is how responsive sites are suppose to be attached is my css.
#phone {font-size:18px; }
p.serviceheader {font-size:18px; color:#464646;}
#servicetext {margin-top:-227px; margin-left:15px; color:#ffffff;}
#servicelink {margin-top:-4px; margin-left:15px}
#securitylink {margin-top:20px; margin-left:2px}
#networkinfrastructurelink {margin-top:-20px; margin-left:-2px}
#itlink {margin-top:-20px; margin-left:8px}
#datalink {margin-top:46px; margin-left:8px; color:#ffffff;}
#personnellink {margin-top:6px; margin-left:15px}
#hometext {font-size:31px; text-align:right; line-height:1.5; font-weight:bold; margin-top:-25px;}
#abouthome {margin-left:20px; float:left;}
#contacthome {font-size:23px; color:#464646; font-weight:bold;}
#prefooter {color:#464646; font-size:23px;}
#careershome {color:#464646; font-size:18px; margin-top:-5px;}
#jointeam {color:#464646; font-size:23px; margin-top:35px;}
#benefits {color:#464646; font-size:23px; margin-top:7px;}
#joinus {color:#464646; font-size:23px; margin-top:38px; }
#employees {color:#464646; font-size:18px; margin-top:10px; line-height:20px;}
p.corporateoffice {font-size:20px; color:#464646;}
p.officetext {color:#464646;}
#footer-links {font-size:12px;}
#chamberlogo {margin-top:10px; margin-left:28px;}
#sbalogo {margin-left:3px;margin-top:30px;}
#bicsilogo {margin-left:53px;}
#alliance {margin-left:15px;}
#mbchamber {margin-left:3px;}
#pmilogo {margin-left:55px;}
.prefooterlink a {color:#464646;}
#afcealogo {margin-bottom:-9px; margin-left:30px;}
#bbb {margin-left:17px;}
#infocommlogo {margin-left:40px;}
h1.relatedpgs {font-size:24px; color:#990812; margin-left:-8px;}
h1.pheader {font-size:26px;}
.customheader {margin-top:-60px;}
.bodycontentalign {margin-left:11px;}
.navalign {margin-top:-15px; margin-left:11px;}
.topphone {margin-top:-25px;margin-left:105px;}
.socialicons {margin-top:-32px; margin-left:60px;}
.footercontactinfo {background:url('/wp-content/uploads/2012/05/ragedge-right.gif') repeat-y scroll right top #ECECEC;
color: #5a5858;
float: left;
min-height:260px;
width: 260px;
}
.footerlogos {background:url('/wp-content/uploads/2012/05/ragedge-left.gif') repeat-y scroll left top #ECECEC;
color: #5A5858;
float: left;
min-height:260px;
width: 680px;
margin-left:-95px;
}
.innerpagenav {background-color:#ececec;}
#block-69 {margin-top:-15px;}
#block-72 {margin-top:-74px; margin-left:-1px;}
#block-73 {margin-top:-70px; margin-left:-19px; background-color:#000000; color:#ffffff;}
#block-372 {margin-top:-55px;}
#block-370 {margin-top:-45px;}
#block-25 {margin-top:25px;}
#datacentertext {margin-top:-245px; margin-left:10px; color:white;}
#itintegrationtext {margin-top:-245px; margin-left:10px; color:white;}
#securitytext {margin-top:-245px; margin-left:10px; color:#ffffff;}
#networkinfrastructuretext {margin-top:-245px; margin-left:10px; color:#ffffff;}
#vtctext {margin-top:-245px; margin-left:5px; color:#ffffff;}
/*regular site css*/
html, body {
width: 100%;
overflow-x: hidden;
}
.container
{
background-color:white;
display:inline-block;
height:100%;
width: 100%;
/*border: solid 1px #aaa;*/
text-align: left;
font-size: 1em;
/*letter-spacing:px; */
/*white-space: nowrap; */
/*line-height: 12px; */
}
.square
{
width:19.5%;
margin:auto;
/* border: solid 1px #ccc; */
display: inline-block;
vertical-align:middle;
}
.words
{
background-color:#990913; color:white;
text-align:left;
width:12.8em;height:15em;
line-height:30px;
text-align:center;
}
#block-72 li.widget
{
margin-bottom:2%;
}
.title
{
/*display:inline-block;*/
font-size:18px;
padding-bottom:5px;
/*color:#444444;*/
}
#block-73 li.widget
{
margin-top:5%;
}
#block-66
{
/*background-color:purple;*/
position:relative;
top:-1px;
margin-left:105px;
}
#block-67
{
padding-top:5%;
}
#block-52
{
padding-top:15px;
}
a.linktext
{
color:#464646 !important; font-size:20px;
}
a.linktext1
{
color:#464646 !important; font-size:20px;
}
a.linktext2
{
color:#464646 !important; font-size:20px;
}
.centerlink
{
text-align: center!important;
}
.fb-hide
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.corporateoffice
{
color:#464646;
font-size:20px;
}
.officetext
{
color:#464646;
}
#media screen and (device-width:800px)
{
.words
{
/*color:orange;*/
}
/* .hide
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}*/
a.linktext1
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
#media screen and (min-width: 768px)and (orientation:portrait)/*ipad*/
{
.container
{
height:100%;
width:100%;
text-align:center;
background-color:white;
display:inline-block;
}
.square
{
margin:auto;
width:15em!important;
text-align:center;
display:inline-block;
}
.words
{
width:100%;
}
a.linktext
{
color:#464646 !important; font-size:17px;
}
a.linktext1
{
color:#464646 !important; font-size:17px;
}
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.centerlink
{
text-align: center;
}
#block-65
{
margin:-65 0 0 0 ;
position:absolute;
left:75px;
}
#block-66
{
position:absolute;
top:360px!important;
left:400px!important;
font-weight:bold!important;
font-size:23px;
line-height:1px;
}
.officetext
{
font-size:12px;
}
.corporateoffice
{
font-size:14px;
}
.data
{
width:100%!important;
}
#block-249
{
position:absolute;
top:360px!important;
left:400px!important;
font-weight:bold!important;
font-size:23px;
line-height:1px;
}
#block-301
{
position:absolute;
top:360px!important;
left:400px!important;
font-weight:bold!important;
font-size:23px;
line-height:1px;
}
#block-126
{
position:absolute;
top:360px!important;
left:400px!important;
font-weight:bold!important;
font-size:23px;
line-height:1px;
}
#block-31
{
position:absolute;
top:360px!important;
left:400px!important;
font-weight:bold!important;
font-size:23px;
line-height:1px;
}
#block-10
{
position:absolute;
top:360px!important;
left:400px!important;
font-weight:bold!important;
font-size:23px;
line-height:1px;
}
#block-358
{
position:absolute;
top:360px!important;
left:400px!important;
font-weight:bold!important;
font-size:23px;
line-height:1px;
}
.hwr-form-title
{
line-height:25px;
}
}
/*#media screen and (min-width: 768px)and (orientation:landscape)
{
.hide
{
width:68%;
height: 185px;
margin: auto !important;
}
}*/
#media screen and (min-width:1025px) /*and (orientation:landscape)*/
{
.hide
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
a.linktext1
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
/*#media screen and and (min-width:) (max-width:1024px) and (orientation:landscape)
{
.topphone
{
font-weight:bold;
}
a.linktext1
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}*/
#media screen and (min-width:712px) and (max-width:1024px) and (orientation:landscape)/*between*/
{
.container
{
/* height:100%;*/
width:100%;
text-align:center;
background-color:white;
/*display:inline-block;*/
}
.square
{
margin:auto;
width:12em;
text-align:left;
}
.words
{
width:100%;
height:210px;
/*color:red;*/
}
a.linktext1
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
#media screen and (max-width: 680px) and (orientation:landscape)/*landscape small phone*/
{
#wrapper-4,#wrapper-5,#wrapper-9,#wrapper-10,#wrapper-11,#wrapper-12,#wrapper-13,#wrapper-14,#wrapper-15,#wrapper-16,#wrapper-17/*stops from scrolling horizontal*/
{
width:auto;
overflow: hidden;
padding :0.5em;
}
.hide /*logo*/
{
width:68%;
height: 185px;
/*display: block;*/
margin: auto !important;
}
.footerlogos
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.container
{
/* height:100%;*/
width:100%;
text-align:center;
background-color:white;
/*display:inline-block;*/
}
.square
{
margin:auto;
width:20em;
text-align:left;
}
.words
{
width:100%;
font-size:16px;
height:180px;
text-align:center;
}
#block-72 li.widget
{
margin-bottom:2%;
}
.title
{
/*display:inline-block;*/
font-size:18px;
padding-bottom:5px;
/*color:#444444;*/
}
#block-73 li.widget
{
margin-top:5%;
}
/*#block-66
{
width:100%
display:inline;
font-weight:bold;
position:absolute;
left:-25px;
top:25px;
letter-spacing:2px;
white-space:nowrap;
font:OpenSans-Semibold;
}*/
/*.phonenav
{
font-size:20px!important;
line-height:200%;
}*/
.insideimg
{
/* align:center;*/
/* position:absolute;*/
/*top:300px;*/
height:auto;
width:300px;
float:right;
}
/*.officetext
{
position:absolute;
top:500%;
width:100%;
font-size:20px;
white-space:nowrap;
color:red;
}*/
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.centerlink
{
text-align: center;
}
/*#block-38
{
margin:0;
position:absolute;
top:1625px;
width:100%;
color:red!important;
}*/
.corporateoffice
{
font-color:black!important;
font-size:17px!important;
font:semi-bold;
white-space:nowrap !important;
}
.officetext
{
font-size:16px!important;
}
/* .fb
{
position:absolute;
left:2px;
text-align:right;
background:white;
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}*/
/*.fb-hide
{
position:absolute;
left:2px;
text-align:right;
background:white;
}*/
.socialicons
{
display:inline-block;
/* background-color:grey!important;*/
position:relative;
left:350px;
top:-15px!important;
z-index:2;
}
/*.fb
{
background:white;
}
*/
a.linktext
{
color:#464646 !important; font-size:20px;
}
a.linktext1
{
color:#464646 !important; font-size:20px;
}
.block-type-hwr-contact #hwr-contact-27 .hwr-form-title
{
line-height:90%;
}
/*.topfooter
{
margin:0;
position:absolute;
top:80px!important;
background:transparent
}
.botfooter
{
margin:0;
float:right;
position:absolute;
top:1px;
right:-330px;
background:transparent;
}*/
/*.contact {
position:absolute;
top:700px!important;
color:green;
margin-top:100px!important;
}*/
.contact
{
background:blue!important;
display:inline!important;
/*position:absolute!important;*/
top:19px!important;
}
#block-358
{
position:absolute;
top:230px!important;
left:5px!important;
font-weight:bold!important;
/*background:red!important;*/
}
#block-66
{
position:absolute;
top:230px!important;
left:5px!important;
font-weight:bold!important;
/*background:blue!important;*/
}
#block-249
{
position:absolute;
top:230px!important;
left:5px!important;
font-weight:bold!important;
/*background:orange!important;*/
}
#block-301
{
position:absolute;
top:230px!important;
left:5px!important;
font-weight:bold!important;
/* background:pink!important;*/
}
#block-126
{
position:absolute;
top:230px!important;
left:5px!important;
font-weight:bold!important;
/*background:purple!important;*/
}
#block-31
{
position:absolute;
top:230px!important;
left:5px!important;
font-weight:bold!important;
/* background:green!important;*/
}
#block-10
{
position:absolute;
top:230px!important;
left:5px!important;
font-weight:bold!important;
/*background:grey!important;*/
}
.customheader
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
/* #media screen and (min-width:601px) and (max-width:679px)
{
.container
{
width:100%;
text-align:center;
background-color:white;
}
.square
{
margin:auto;
width:15em;
text-align:left;
}
.words
{ width:100%;
}
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.topphone
{
font-weight:bold;
}
}*/
#media screen and (device-width:600px)/*tablet 7 inch*/
{
.container
{
/* height:100%;*/
width:100%;
text-align:center;
background-color:white;
}
.square
{
margin:auto;
width:12.85em;
text-align:left;
}
a.linktext1
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.centerlink
{
text-align: center;
}
.socialicons
{
position:absolute!important;
top:260px!important;
left:395px!important;
/*background:red!important;*/
}
}
/*#media only screen and (device-height:568px) and (device-width:320px) and (-webkit-min-device pixel-ratio:2) and (orientation :landscape) *//*iphone 5*/
#media screen and (device-aspect-ratio: 40/71)
{
.container
{
/* height:100%;*/
width:100%;
text-align:center;
background-color:white;
}
.square
{
margin:auto;
width:18em;
text-align:left;
}
#block-66
{
/*left:65px!important;*/
font-size:10px!important;
/*background:blue!important;*/
}
.words
{
height:205px;
font-size:18px;
}
.officetext
{
font-size:10px!important;
}
.corporateoffice
{
font-size:12px!important;
}
/* .botfooter
{
float:right;
position:absolute;
top:2px;
right:20px;
}*/
}
#media only screen and (max-width:500px) and (orientation:landscape)/*iphone4*/
{
.container
{
width:100%;
text-align:center;
background-color:white;
}
.square
{
margin:auto;
width:15em!important;
text-align:left;
}
.words
{
width:100%;
height:203px!important;
text-align:center;
font-size:16px!important;
}
/*.botfooter
{
float:right;
position:absolute;
top:15px;
right:8px!important;
}*/
.officetext
{
font-size:12px!important;
}
.coporateoffice
{
font-size:14px!important;
}
.contact1{
position:absolute;
top:2050px!important;
margin-top:0px;
/*margin-top:100px!important;*/
}
#block-66
{
/* position:absolute;*/
left:-215px!important;
top:254px!important;
}
.socialicons
{
position:absolute;
left:300px!important;
top:215px!important;
}
#block-358
{
position:absolute;
top:245px!important;
left:-210px!important;
font-weight:bold!important;
}
#block-249
{
position:absolute;
top:245px!important;
left:-210px!important;
font-weight:bold!important;
}
#block-301
{
position:absolute;
top:245px!important;
left:-210px!important;
font-weight:bold!important;
}
#block-126
{
position:absolute;
top:245px!important;
left:-210px!important;
font-weight:bold!important;
}
#block-31
{
position:absolute;
top:245px!important;
left:-210px!important;
font-weight:bold!important;
}
#block-10
{
position:absolute;
top:245px!important;
left:-210px!important;
font-weight:bold!important;
}
.contact
{
display:inline!important;
/*position:absolute!important;*/
top:19px!important;
}
}
#media screen and (min-width:481px) and (orientation:portrait)
{
container
{
width:100%;
text-align:left;
height:auto;
background-color:white;
}
.square{
margin:auto;
width:18em;
text-align:left;
display:inline-block;
background-color:white;
}
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.words
{
width:100%;
}
}
#media screen and (min-width: 320px) and (max-width: 480px)/*small devices*/
{
.hide/*logo*/
{
margin-top:10%;
margin-bottom:2px;
display:block;
}
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.container
{
width:100%;
text-align:left;
height:auto;
background-color:white;
}
.square{
margin:auto;
width:100%;
text-align:left;
display:inline-block;
background-color:white;
}
.words
{
color:white;
font-size:18px;
text-align:center;
background-color:#990913;
width:100%;
height:150px;
}
.title
{
width:100%;
}
#block-73 li.widget
{
margin-top:30%;
}
#block-66
{
position: relative;
top: 45px!important;
padding-left:60%;
font-weight:bold !important;
z-index:3;
line-height:4px;
}
#block-358
{
position: relative;
top: 45px!important;
padding-left:60%;
font-weight:bold !important;
z-index:3;
line-height:4px;
}
#block-249
{
position: relative;
top: 45px!important;
padding-left:60%;
font-weight:bold !important;
z-index:3;
line-height:4px;
}
#block-301
{
position: relative;
top: 45px!important;
padding-left:60%;
font-weight:bold !important;
z-index:3;
line-height:4px;
}
#block-126
{
position: relative;
top: 45px!important;
padding-left:60%;
font-weight:bold !important;
z-index:3;
line-height:4px;
}
#block-31
{
position: relative;
top: 45px!important;
padding-left:60%;
font-weight:bold !important;
z-index:3;
line-height:4px;
}
#block-10
{position: relative;
top: 45px!important;
padding-left:60%;
font-weight:bold !important;
z-index:3;
line-height:4px;
}
/*.phonenum
{
background-color:white;
position:absolute;
top:5px;
z-index:-1;
}*/
.insideimg
{
/* align:center;*/
/* position:absolute;*/
/*top:300px;*/
height:120px;
width:140px;
float:right;
}
.centerlink {
text-align: center;
}
.footer
{
color:black!important;
font-size:20px;
}
.fb
{
background:white;
}
.fb-hide
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.insideimg
{
/* align:center;*/
/* position:absolute;*/
/*top:300px;*/
height:auto;
float:right;
}
}
#media screen and (max-width: 319px)
{
.container
{
width:100%;
text-align:left;
height:auto;
background-color:white;
}
.square{
margin:auto;
width:20em;
text-align:left;
display:inline-block;
background-color:white;
}
.words
{
width:100%;
}
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
You need to put into your html head the meta viewport tag, something like:
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Related
I am displaying some content using dangerouslySetInnerHtml in Reactjs for a blog page, but bullet points are not showing, however the same code and page is being used in another project and that is perfectly working fine. Unable to get whats the problem here i will be attaching the code. The renders fine, the only problem here is that it does not shows bullets for tags. May be some alternative to dangerouslySetInnerHTMl can solve the problem for me.
Here is how my Content looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
#font-face {
font-family: 'DuplicateIonic-Regular';
src: url("") format("embedded-opentype");
src: url("") format("opentype"), url("") format("woff"), url("") format("truetype"), url("") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DuplicateIonic-Medium';
src: url("") format("embedded-opentype");
src: url("") format("opentype"), url(""), url("") format("truetype"), url("") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DuplicateIonic-Bold';
src: url("") format("embedded-opentype");
src: url("") format("opentype"), url("") format("woff"), url("") format("truetype"), url("") format("svg");
font-weight: normal;
font-style: normal;
}
body {
padding-right: 8px;
padding-left: 8px;
}
img {
max-width: 100%;
}
.textbody {
font-size: 15px;
color: #6B6767;
line-height: 130%;
font-family: 'Helvetica', Arial, sans-serif;
}
.textbody hr {
margin: 20px 0 30px 0;
border: 0;
border-top: 1px solid #ccc;
}
.textbody a {
color: red;
}
.textbody h1,
.textbody h2,
.textbody h3,
.textbody h4 {
color: #E2051B;
font-size: 18px;
font-family: BurlingamePro-Bold, Arial;
margin: 0;
line-height: 140%;
}
.textbody h1.grey,
.textbody h2.grey,
.textbody h3.grey,
.textbody h4.grey {
color: #666;
}
.textbody h2 {
font-size: 16px;
}
.textbody h2.dark {
color: #555;
font-size: 18px;
}
.textbody h2.dark-thin {
color: #333;
text-transform: uppercase;
font-family: BurlingamePro-Bold, Arial;
font-size: 20px;
margin-bottom: 10px;
line-height: 130%;
}
.textbody h2.pink {
color: #F16A7C;
text-transform: uppercase;
font-family: BurlingamePro-Bold, Arial;
font-size: 20px;
margin-bottom: 10px;
line-height: 130%;
}
.textbody p {
margin-bottom: 25px;
}
.textbody table {
width: 100%;
border-collapse:collapse;
}
.textbody table,
.textbody th,
.textbody td {
border: 1px solid #6B6767;
padding: 3%;
line-height: 120%;
font-size: 15px;
}
.textbody a {
color: #E2051B;
}
.textbody a.btn {
color: #fff;
}
.textbody .special-info {
border-top: 2px solid #ededed;
border-bottom: 2px solid #ededed;
padding: 20px 0;
margin-bottom: 30px;
}
.textbody .special-info h2 {
margin-bottom: 10px;
}
.textbody .caption {
color: #666;
display: block;
text-align: center;
font-style: italic;
}
.textbody .embed-video {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
margin-bottom: 25px;
}
.textbody .embed-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.textbody ul,
.textbody ol {
margin: 0;
padding: 0 0 0 25px;
text-align: left;
}
.textbody ul li,
.textbody ol li {
margin-bottom: 10px;
}
.textbody ol {
padding-left: 40px;
}
.textbody ol.no-indent {
padding-left: 25px;
}
.textbody .qns {
color: #E2051B;
font-family: BurlingamePro-Bold, Arial;
margin-bottom: 10px;
}
.textbody .ans {
margin-bottom: 30px;
}
.textbody .no-margin li {
margin: 0;
}
.textbody ol.alpha {
list-style-type: lower-alpha;
}
.textbody .table-wrap {
width: 100%;
overflow-x: auto;
}
.textbody .bluebar {
background-color: #0070b9;
}
.textbody .pinkbar {
background-color: #ef4270;
}
.textbody section.border-bottom {
border-bottom: 1px solid #ededed;
padding-bottom: 25px;
margin-bottom: 25px;
}
.textbody section.border-bottom.no-border {
border: 0;
padding-bottom: 0;
}
.textbody .height300 {
height: 300px;
}
.textbody .height200 {
height: 200px;
}
/* 12 Points Style */
.font30{font-size:30px;}
.offers-bg{background-image:url('https://www.frasersexperience.com/files/images/frx1212-bg2.jpg');}
.date-container{text-align:center;margin-bottom:35px;}
.date{
display:inline-block;background-color:#F5C046;border:3px solid #000;padding:15px;
font-family:DuplicateIonic-Bold;color:#000;}
.deal-2column{margin-bottom:20px;}
.deal-img-wrap{display:inline-block;position:relative}
.tag{position:absolute;top:0;left:0;display:inline-block;width:42%;text-align:left}
.deal-2column{
margin-left:0;
margin-right:0;
}
/* End 12 Points Style */
*{
box-sizing: border-box;
}
.text-right {
text-align: right!important;
}
.text-center {
text-align: center!important;
}
.row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: none;
}
.col-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.order-first {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.order-last {
-webkit-box-ordinal-group: 14;
-ms-flex-order: 13;
order: 13;
}
.order-0 {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4 {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6 {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7 {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8 {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-9 {
-webkit-box-ordinal-group: 10;
-ms-flex-order: 9;
order: 9;
}
.order-10 {
-webkit-box-ordinal-group: 11;
-ms-flex-order: 10;
order: 10;
}
.order-11 {
-webkit-box-ordinal-group: 12;
-ms-flex-order: 11;
order: 11;
}
.order-12 {
-webkit-box-ordinal-group: 13;
-ms-flex-order: 12;
order: 12;
}
.offset-1 {
margin-left: 8.333333%;
}
.offset-2 {
margin-left: 16.666667%;
}
.offset-3 {
margin-left: 25%;
}
.offset-4 {
margin-left: 33.333333%;
}
.offset-5 {
margin-left: 41.666667%;
}
.offset-6 {
margin-left: 50%;
}
.offset-7 {
margin-left: 58.333333%;
}
.offset-8 {
margin-left: 66.666667%;
}
.offset-9 {
margin-left: 75%;
}
.offset-10 {
margin-left: 83.333333%;
}
.offset-11 {
margin-left: 91.666667%;
}
.flex-row {
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
}
.flex-column {
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
}
.flex-row-reverse {
-webkit-box-orient: horizontal !important;
-webkit-box-direction: reverse !important;
-ms-flex-direction: row-reverse !important;
flex-direction: row-reverse !important;
}
.flex-column-reverse {
-webkit-box-orient: vertical !important;
-webkit-box-direction: reverse !important;
-ms-flex-direction: column-reverse !important;
flex-direction: column-reverse !important;
}
.flex-wrap {
-ms-flex-wrap: wrap !important;
flex-wrap: wrap !important;
}
.flex-nowrap {
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
-ms-flex-wrap: wrap-reverse !important;
flex-wrap: wrap-reverse !important;
}
.justify-content-start {
-webkit-box-pack: start !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
}
.justify-content-end {
-webkit-box-pack: end !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important;
}
.justify-content-center {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
}
.justify-content-between {
-webkit-box-pack: justify !important;
-ms-flex-pack: justify !important;
justify-content: space-between !important;
}
.justify-content-around {
-ms-flex-pack: distribute !important;
justify-content: space-around !important;
}
.align-items-start {
-webkit-box-align: start !important;
-ms-flex-align: start !important;
align-items: flex-start !important;
}
.align-items-end {
-webkit-box-align: end !important;
-ms-flex-align: end !important;
align-items: flex-end !important;
}
.align-items-center {
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
}
.align-items-baseline {
-webkit-box-align: baseline !important;
-ms-flex-align: baseline !important;
align-items: baseline !important;
}
.align-items-stretch {
-webkit-box-align: stretch !important;
-ms-flex-align: stretch !important;
align-items: stretch !important;
}
.align-content-start {
-ms-flex-line-pack: start !important;
align-content: flex-start !important;
}
.align-content-end {
-ms-flex-line-pack: end !important;
align-content: flex-end !important;
}
.align-content-center {
-ms-flex-line-pack: center !important;
align-content: center !important;
}
.align-content-between {
-ms-flex-line-pack: justify !important;
align-content: space-between !important;
}
.align-content-around {
-ms-flex-line-pack: distribute !important;
align-content: space-around !important;
}
.align-content-stretch {
-ms-flex-line-pack: stretch !important;
align-content: stretch !important;
}
.align-self-auto {
-ms-flex-item-align: auto !important;
align-self: auto !important;
}
.align-self-start {
-ms-flex-item-align: start !important;
align-self: flex-start !important;
}
.align-self-end {
-ms-flex-item-align: end !important;
align-self: flex-end !important;
}
.align-self-center {
-ms-flex-item-align: center !important;
align-self: center !important;
}
.align-self-baseline {
-ms-flex-item-align: baseline !important;
align-self: baseline !important;
}
.align-self-stretch {
-ms-flex-item-align: stretch !important;
align-self: stretch !important;
}
.mm-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.mm-list .item {
width: 49%;
margin-top: 20px;
border: 1px solid #ccc;
padding: 2px;
text-align: center;
height: 250px;
position: relative;
}
.mm-list .item .tag {
position: absolute;
top: 10px;
left: 0;
background-color: #E2051B;
color: #fff;
padding: 5px 10px;
font-family: BurlingamePro-Bold, serif;
font-size: 14px;
}
.mm-list .item .thumb {
position: relative;
}
.mm-list .item .thumb img {
height: 150px;
width: 100%;
object-fit: cover;
}
.mm-list .item .thumb .promo {
background-color: #FFCC00;
position: absolute;
bottom: 0;
width: 100%;
font-family: BurlingamePro-Bold, serif;
padding: 5px 0;
color: #000;
}
.mm-list .item .thumb .promo .text {
font-size: 12px;
}
.mm-list .item .thumb .promo .code {
font-size: 15px;
}
.mm-list .item .storename {
color: #E2051B;
font-family: BurlingamePro-Bold, serif;
margin-top: 10px;
}
.mm-list .item .mall {
color: #666;
font-size: 12px;
font-family: BurlingamePro-Bold, Arial;
line-height: 130%;
display: table;
height: 55px;
width: 100%;
}
.mm-list .item .mall .text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.mm-list .item {
width: 32%;
}
.noapp{
display:none
}
-->
</style>
<script>
function sendToApp(obj){
var data = JSON.stringify(obj);
postMessage(data);
}
</script>
</head>
<body bgcolor='#eaeaea'><div class="textbody"><p>
Love to shop? It’s time you got rewarded for it!<br />
<br />
<br />
<br />
</p>
<p>
<img alt="" src="" style="; ;" /></p>
<p>
!</p>
<div>
<span style="color:#f00;"><strong>TERMS AND CONDITIONS</strong></span></div>
<div>
</div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div></body>
</html>
Here is how i am trying to display this:
<div style={{ paddingLeft: scale(11), paddingRight: scale(11) }}>
<div
dangerouslySetInnerHTML={{
__html: this.state.content
}}></div>
</div>
I am learning React and JavaScript and now I have this CodeSandbox but I can't convert it to JavaScript React I have tried this for the Card Component:
import React, { useState } from "react";
const Card = props => {
const [expanded, setExpanded] = useState(false);
const RenderCard = (className) => {
return (
<div
className={`card ${className}${expanded ? " expanded" : ""}`}
onClick={() => {
setExpanded(!expanded);
}}
>
<div className="image">
<img alt="digger" src={props.image} />
</div>
<div className="info">
<div
className="bg1"
style={{ backgroundImage: "url('" + props.image + "')" }}
/>
<div
className="bg2"
style={{ backgroundImage: "url('" + props.image + "')" }}
/>
<div
className="bg3"
style={{ backgroundImage: "url('" + props.image + "')" }}
/>
<h1>JCB OES System</h1>
<h2>Report Number #1</h2>
<h3>Load lifter work area</h3>
<div className="button">Open</div>
</div>
</div>
);
};
return (
<div className={`card-container${expanded ? " expanded" : ""}`}>
{expanded && <div className="background" />}
{<RenderCard className="card1"/>}
{<RenderCard className="card2"/>}
</div>
);
};
export default Card;
And I show the Card like this. It's very simple, it's just that when I click a card it does not pop up like the CodeSandbox does.
import Card from "./Card";
import "./styles.scss";
const CreateContent = () => {
return (
<div className="app">
<link rel="stylesheet" href="https://use.typekit.net/jli8mqj.css" />
<Card image="https://www.thetimes.co.uk/imageserver/image/methode%2Fsundaytimes%2Fprodmigration%2Fweb%2Fbin%2Fbeae8dfb-0a41-4f8e-b076-ffd68417287b.jpg?crop=1024%2C683%2C0%2C0&resize=685" />
<Card image="https://www.virginexperiencedays.co.uk/content/img/product/large/PJCBRA__01.jpg" />
<Card image="https://www.toyfarmers.co.uk/images/britains-jcb-3cx-backhoe-loader.jpg" />
<Card image="https://seatylive.blob.core.windows.net/eventimages/2019-Aug-20-Tue_18-37-31-969.png" />
</div>
);
};
export default CreateContent;
The styles is the same, with no changes: I understand that the expanded background when set to expanded=true using the hook that the scss style for background should be in effect but all I get is a black screen.
.app {
font-family: sans-serif;
text-align: center;
padding: 4em 0;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
}
.card-container {
font-family: niveau-grotesk, sans-serif !important;
position: relative;
z-index: 0;
&.expanded {
z-index: 3;
#keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.background {
animation: fade-in .3s ease-out;
z-index: 2;
position: fixed;
background: black;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
}
.card {
margin: 0 auto;
width: 25em;
cursor: pointer;
border-radius: .5em;
box-shadow: 0 50px 100px -20px rgba(50,50,93,.25),
0 30px 60px -30px rgba(0,0,0,.3),
0 -18px 60px -10px rgba(0,0,0,.03);
margin-bottom: 4em;
&.card2 {
transition: .2s ease-out;
position: absolute;
top: 0;
width: 25em;
left: 50%;
z-index: 4;
transform: translateX(-50%);
&.expanded {
width: 40em;
}
}
.image {
img {
display: block;
border-top-left-radius: .5em;
border-top-right-radius: .5em;
width: 100%;
}
}
$button-color: rgb(87, 87, 228);
&:hover {
.info .button {
color: white;
background: $button-color;
}
}
.info {
background: white;
position: relative;
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em;
overflow: hidden;
padding: .9em 1.2em;
text-align: left;
$darkness: 0;
&:after {
content: '';
position: absolute;
top: -20%;
left: -20%;
right: -20%;
bottom: -20%;
height: 140%;
width: 140%;
// filter: blur(8px);
// -webkit-filter: blur(8px);
background: linear-gradient(to right,
rgba(0, 0, 0, 0.4) 30%,
rgba(0, 0, 0, 0) 100%);
}
.bg1, .bg2 {
position: absolute;
top: -20%;
left: -20%;
right: -20%;
bottom: -20%;
height: 140%;
width: 140%;
z-index: 0;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
transform: rotate(180deg);
filter: blur(16px);
}
.bg2 {
background-position: bottom;
transform: rotate(0deg);
opacity:0.4;
}
.bg3 {
background-position: top;
transform: rotate(180deg);
opacity:0.4;
}
.button {
transition: .2s ease-out;
text-transform: uppercase;
line-height: 1.2em;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1.8em;
z-index: 1;
background: white;
border-radius: 1em;
padding: .4em 1.1em;
font-weight: 600;
color: $button-color;
}
h1, h2, h3 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
max-width: 13em;
color: white;
position: relative;
z-index: 1;
text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
}
h1 {
line-height: .8em;
letter-spacing: .03em;
font-size: 1.1em;
font-weight: 900;
padding: .1em 0;
}
h2 {
letter-spacing: .02em;
font-size: 1.0em;
font-weight: 400;
padding: .1em 0;
opacity: 0.6;
}
h3 {
letter-spacing: .02em;
font-size: .9em;
font-weight: 400;
padding: .1em 0;
}
}
}
}
What am I missing?
To swap your Code Sandbox from TypeScript to JavaScript you should just need to:
Remove all typescript specific syntax from your ".ts" and ".tsx" files (interfaces, typings, etc)
Change all the file extensions to their JavaScript equivalent i.e. ".ts" -> ".js" and ".tsx" -> ".jsx".
Update the "main" property of the "package.json" file to point to the renamed entry point. i.e. "src/index.jsx".
I created a quick CodeSandbox with this already done.
Weird issue with fontawesome icons and semantic UI that I can't figure out. If I use the included icons with semantic UI everything works great and displays in the proper place.
If I use the fontawesome react component the icon ends up in some seemingly random place
code sandbox show the example https://codesandbox.io/embed/semantic-ui-example-i7o3w
Any help is much appreciated
It's because font-awesome icons are unstyled SVGs while Semantic-UI looks for a styled i element to display a font specific icon via a string.
To work around it, you'll basically have to do something like this:
<Search
value="FA comp - broken"
icon={
<i className="icon">
<FontAwesomeIcon
style={{ marginTop: 13 }} // alternatively you can do: position: "relative", top: 13
icon="thumbs-down"
/>
</i>
}
/>
Semantic-UI specifically looks for an i.icon element + classname to add styles to it: .ui.icon.input > i.icon. One of the many downsides of using a UI framework is that you're forced to work within its confined architecture.
As follow up to Matt's great help - I dug in to the semantic-ui LESS library and figured out the overrides needed for fontawesome to behave pretty well with it.
here are the icon.overrides and input.overrides with a few notes that are needed for fontawesome to behave nicely.
With the newest fontawesome version (5.10.2) the sizing issues are generally addressed in-library so most display issues that I previous encountered are not a problem.
/* site/elements/input.overrides */
/* just the overrides to replace i for ANYTHING icon so we can use font awesome
semantic always assumes the icon is ONLY an i - that's it - we so far have a link / an A and a span and an svg element
for semantic - SO I'm just going to pull out all the hardcodes and just go with .icon and see how that behaves
just make sure the top level element for the 'icon' has the class 'icon' and you *should* be good don't put icon on every
child element - or rather you don't have to...
SVGs get squared nicely - anything else will need moving
*/
/*--------------------
Loading
---------------------*/
.ui.loading.loading.input > .icon:before {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: #loaderMargin;
width: #loaderSize;
height: #loaderSize;
border-radius: #circularRadius;
border: #loaderLineWidth solid #loaderFillColor;
}
.ui.loading.loading.input > .icon:after {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: #loaderMargin;
width: #loaderSize;
height: #loaderSize;
animation: button-spin #loaderSpeed linear;
animation-iteration-count: infinite;
border-radius: #circularRadius;
border-color: #loaderLineColor transparent transparent;
border-style: solid;
border-width: #loaderLineWidth;
box-shadow: 0px 0px 0px 1px transparent;
}
/* Transparent Icon */
.ui.transparent.icon.input > .icon {
width: #transparentIconWidth;
}
/*--------------------
Icon
---------------------*/
.ui.icon.input > .icon {
cursor: default;
position: absolute;
line-height: 1;
text-align: center;
top: 0px;
right: 0px;
margin: 0em;
height: 100%;
width: #iconWidth;
opacity: #iconOpacity;
border-radius: 0em #borderRadius #borderRadius 0em;
transition: #iconTransition;
}
.ui.icon.input > .icon:not(.link) {
pointer-events: none;
}
.ui.icon.input > .icon:before,
.ui.icon.input > .icon:after {
left: 0;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
margin-top: #iconOffset;
}
.ui.icon.input > .link.icon {
cursor: pointer;
}
.ui.icon.input > .circular.icon {
top: #circularIconVerticalOffset;
right: #circularIconHorizontalOffset;
}
/* Left Icon Input */
.ui[class*="left icon"].input > .icon {
right: auto;
left: #borderWidth;
border-radius: #borderRadius 0em 0em #borderRadius;
}
.ui[class*="left icon"].input > .circular.icon {
right: auto;
left: #circularIconHorizontalOffset;
}
/* Focus */
.ui.icon.input > input:focus ~ .icon {
opacity: 1;
}
/* site/elements/icon.overrides */
/*!
refactored these to be a svg rather than i . so they can be svg icons for font awesome
straight copy and paste from https://github.com/Semantic-Org/Semantic-UI-LESS/blob/master/definitions/elements/icon.less
regex find and replace find: \ni. replace \nsvg.
DO NOT COPY THE LAST LINE OF THE FILE - otherwise you'll end up in an endless loop compiling
also don't copy the theme section - it's unneeded
*/
svg.icon {
display: inline-block;
opacity: #opacity;
margin: 0em #distanceFromText 0em 0em;
width: #width;
height: 100%;
font-family: 'Icons';
font-style: normal;
font-weight: #normal;
text-decoration: inherit;
text-align: center;
speak: none;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
backface-visibility: hidden;
}
svg.icon:before {
background: none !important;
}
/*******************************
Types
*******************************/
/*--------------
Loading
---------------*/
svg.icon.loading {
height: 1em;
line-height: 1;
animation: icon-loading #loadingDuration linear infinite;
}
#keyframes icon-loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*******************************
States
*******************************/
svg.icon.hover {
opacity: 1 !important;
}
svg.icon.active {
opacity: 1 !important;
}
svg.emphasized.icon {
opacity: 1 !important;
}
svg.disabled.icon {
opacity: #disabledOpacity !important;
}
/*******************************
Variations
*******************************/
/*-------------------
Fitted
--------------------*/
svg.fitted.icon {
width: auto;
margin: 0em !important;
}
/*-------------------
Link
--------------------*/
svg.link.icon, svg.link.icons {
cursor: pointer;
opacity: #linkOpacity;
transition: opacity #defaultDuration #defaultEasing;
}
svg.link.icon:hover, svg.link.icons:hover {
opacity: 1 !important;
}
/*-------------------
Circular
--------------------*/
svg.circular.icon {
border-radius: 500em !important;
line-height: 1 !important;
padding: #circularPadding !important;
box-shadow: #circularShadow;
width: #circularSize !important;
height: #circularSize !important;
}
svg.circular.inverted.icon {
border: none;
box-shadow: none;
}
/*-------------------
Flipped
--------------------*/
svg.flipped.icon,
svg.horizontally.flipped.icon {
transform: scale(-1, 1);
}
svg.vertically.flipped.icon {
transform: scale(1, -1);
}
/*-------------------
Rotated
--------------------*/
svg.rotated.icon,
svg.right.rotated.icon,
svg.clockwise.rotated.icon {
transform: rotate(90deg);
}
svg.left.rotated.icon,
svg.counterclockwise.rotated.icon {
transform: rotate(-90deg);
}
/*-------------------
Bordered
--------------------*/
svg.bordered.icon {
line-height: 1;
vertical-align: baseline;
width: #borderedSize;
height: #borderedSize;
padding: #borderedVerticalPadding #borderedHorizontalPadding !important;
box-shadow: #borderedShadow;
}
svg.bordered.inverted.icon {
border: none;
box-shadow: none;
}
/*-------------------
Inverted
--------------------*/
/* Inverted Shapes */
svg.inverted.bordered.icon,
svg.inverted.circular.icon {
background-color: #black !important;
color: #white !important;
}
svg.inverted.icon {
color: #white;
}
/*-------------------
Colors
--------------------*/
/* Red */
svg.red.icon {
color: #red !important;
}
svg.inverted.red.icon {
color: #lightRed !important;
}
svg.inverted.bordered.red.icon,
svg.inverted.circular.red.icon {
background-color: #red !important;
color: #white !important;
}
/* Orange */
svg.orange.icon {
color: #orange !important;
}
svg.inverted.orange.icon {
color: #lightOrange !important;
}
svg.inverted.bordered.orange.icon,
svg.inverted.circular.orange.icon {
background-color: #orange !important;
color: #white !important;
}
/* Yellow */
svg.yellow.icon {
color: #yellow !important;
}
svg.inverted.yellow.icon {
color: #lightYellow !important;
}
svg.inverted.bordered.yellow.icon,
svg.inverted.circular.yellow.icon {
background-color: #yellow !important;
color: #white !important;
}
/* Olive */
svg.olive.icon {
color: #olive !important;
}
svg.inverted.olive.icon {
color: #lightOlive !important;
}
svg.inverted.bordered.olive.icon,
svg.inverted.circular.olive.icon {
background-color: #olive !important;
color: #white !important;
}
/* Green */
svg.green.icon {
color: #green !important;
}
svg.inverted.green.icon {
color: #lightGreen !important;
}
svg.inverted.bordered.green.icon,
svg.inverted.circular.green.icon {
background-color: #green !important;
color: #white !important;
}
/* Teal */
svg.teal.icon {
color: #teal !important;
}
svg.inverted.teal.icon {
color: #lightTeal !important;
}
svg.inverted.bordered.teal.icon,
svg.inverted.circular.teal.icon {
background-color: #teal !important;
color: #white !important;
}
/* Blue */
svg.blue.icon {
color: #blue !important;
}
svg.inverted.blue.icon {
color: #lightBlue !important;
}
svg.inverted.bordered.blue.icon,
svg.inverted.circular.blue.icon {
background-color: #blue !important;
color: #white !important;
}
/* Violet */
svg.violet.icon {
color: #violet !important;
}
svg.inverted.violet.icon {
color: #lightViolet !important;
}
svg.inverted.bordered.violet.icon,
svg.inverted.circular.violet.icon {
background-color: #violet !important;
color: #white !important;
}
/* Purple */
svg.purple.icon {
color: #purple !important;
}
svg.inverted.purple.icon {
color: #lightPurple !important;
}
svg.inverted.bordered.purple.icon,
svg.inverted.circular.purple.icon {
background-color: #purple !important;
color: #white !important;
}
/* Pink */
svg.pink.icon {
color: #pink !important;
}
svg.inverted.pink.icon {
color: #lightPink !important;
}
svg.inverted.bordered.pink.icon,
svg.inverted.circular.pink.icon {
background-color: #pink !important;
color: #white !important;
}
/* Brown */
svg.brown.icon {
color: #brown !important;
}
svg.inverted.brown.icon {
color: #lightBrown !important;
}
svg.inverted.bordered.brown.icon,
svg.inverted.circular.brown.icon {
background-color: #brown !important;
color: #white !important;
}
/* Grey */
svg.grey.icon {
color: #grey !important;
}
svg.inverted.grey.icon {
color: #lightGrey !important;
}
svg.inverted.bordered.grey.icon,
svg.inverted.circular.grey.icon {
background-color: #grey !important;
color: #white !important;
}
/* Black */
svg.black.icon {
color: #black !important;
}
svg.inverted.black.icon {
color: #lightBlack !important;
}
svg.inverted.bordered.black.icon,
svg.inverted.circular.black.icon {
background-color: #black !important;
color: #white !important;
}
/*-------------------
Sizes
--------------------*/
svg.mini.icon,
svg.mini.icons {
line-height: 1;
font-size: #mini;
}
svg.tiny.icon,
svg.tiny.icons {
line-height: 1;
font-size: #tiny;
}
svg.small.icon,
svg.small.icons {
line-height: 1;
font-size: #small;
}
svg.icon,
svg.icons {
font-size: #medium;
}
svg.large.icon,
svg.large.icons {
line-height: 1;
vertical-align: middle;
font-size: #large;
}
svg.big.icon,
svg.big.icons {
line-height: 1;
vertical-align: middle;
font-size: #big;
}
svg.huge.icon,
svg.huge.icons {
line-height: 1;
vertical-align: middle;
font-size: #huge;
}
svg.massive.icon,
svg.massive.icons {
line-height: 1;
vertical-align: middle;
font-size: #massive;
}
/*******************************
Groups
*******************************/
svg.icons {
display: inline-block;
position: relative;
line-height: 1;
}
svg.icons .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
margin: 0em;
margin: 0;
}
svg.icons .icon:first-child {
position: static;
width: auto;
/* height: auto; */
vertical-align: top;
transform: none;
margin-right: #distanceFromText;
}
/* Corner Icon */
svg.icons .corner.icon {
top: auto;
left: auto;
right: 0;
bottom: 0;
transform: none;
font-size: #cornerIconSize;
text-shadow: #cornerIconShadow;
}
svg.icons .top.right.corner.icon {
top: 0;
left: auto;
right: 0;
bottom: auto;
}
svg.icons .top.left.corner.icon {
top: 0;
left: 0;
right: auto;
bottom: auto;
}
svg.icons .bottom.left.corner.icon {
top: auto;
left: 0;
right: auto;
bottom: 0;
}
svg.icons .bottom.right.corner.icon {
top: auto;
left: auto;
right: 0;
bottom: 0;
}
svg.icons .inverted.corner.icon {
text-shadow: #cornerIconInvertedShadow;
}
I'm trying to get this calendar control to work in jsfiddle.
http://jsfiddle.net/edwardtanguay/pe4sfex6/5/
My local version of this works, and I've added everything that I can, but it seems to have a problem with the less styles which in my local HTML are in a style tag, and when I try to add it into jsfiddle, it tells me to put styles in the CSS window, but they don't work there?
Does anyone know of a workaround to get this to work in jsfiddle?
<style type="text/less">
body { font-family:Arial; font-size:14px; }
body>span, body>h1 { float:left; width:100%; margin:0; padding:0; margin-bottom:10px; }
span { color:#888888;
>b { color:black; }
}
.vertical-centre (#height) { height:#height; line-height:#height !important; display:inline-block; vertical-align:middle; }
.border-box { box-sizing:border-box; -moz-box-sizing:border-box; }
#border-colour:#CCC;
calendar { float:left; display:block; .border-box; background:white; width:300px; border:solid 1px #border-colour; margin-bottom:10px;
#secondary-colour:#2875C7;
#spacing:10px;
#icon-width:40px;
#header-height:40px;
>div.header { float:left; width:100%; background:#secondary-colour; height:#header-height; color:white;
>* { .vertical-centre(#header-height); }
>i { float:left; width:#icon-width; font-size:1.125em; font-weight:bold; position:relative; .border-box; padding:0 #spacing; cursor:pointer; }
>i.fa-angle-left { text-align:left; }
>i.fa-angle-right { text-align:right; margin-left:#icon-width*-1; }
>span { float:left; width:100%; font-weight:bold; text-transform:uppercase; .border-box; padding-left:#icon-width+#spacing; margin-left:#icon-width*-1; text-align:center; padding-right:#icon-width; color:inherit; }
}
>div.week { float:left; width:100%; border-top:solid 1px #border-colour;
&:first-child { border-top:none; }
>span.day { float:left; width:100%/7; .border-box; border-left:solid 1px #border-colour; font-size:0.75em; text-align:center; .vertical-centre(30px); background:white; cursor:pointer; color:black;
&:first-child { border-left:none; }
&.today { background:#E3F2FF; }
&.different-month { color:#C0C0C0; }
&.selected { background:#secondary-colour; color:white; }
}
&.names>span { color:#secondary-colour; font-weight:bold; }
}
}
</style>
We are writing an application in Ionic, Cordova, AngularJS.
My code is here https://jsfiddle.net/sweety1112/wag7ye4b/1/
My problem is that ui-sref or ng-click is not working as expected. Are there any errors?
$stateProvider
.state('app', {
url: '',
abstract: true,
templateUrl: 'HomePage.html'
})
.state('app.home', {
url: '/home',
templateUrl:'templates/HomeScreen.html',
controller: 'HomePageCtrl'
})
.state('app.scan',
{ parent:'app',
url: '/scan',
templateUrl: 'templates/Scan.html'
// controller: 'SettingsController'
})
.state('app.help', {
url: '/help',
templateUrl:'templates/Help.html'
})
In HTML i have
$scope.funOne=function(){
alert("Button Clicked"); };
Then this should be called from the html
<div> <br/><br/><br/><br/><br/><br/><div ng-click="funOne()"><h1> Home Screen</h1> </div>
<div class="centerButton" ng-click="funOne()">
<a ui-href="app.help"> <img src='assets/img/start_btn.png'/> </a>
<p>START</p>
</div>
ng-click is working from the div which has Home Screen but it is not working on Image. Even ui-sref is not working on the image.
Updated the fiddle with the css classes as well changed the ng-click position. Your css is conflicting with the ng-click and hence needs to be at the parent level.
Updated Fiddle
Css Changed:
.bar-positive {
background-color: #C12537;
border: none;
}
.container {
width:550px;
height:550px;
position:relative;
z-index: -1;
display:block;
}
.container .left, .right div p {
top: 44%;
left: -14%;
}
.container .right {
transform: rotate(90deg);
}
.rotate div p {
position:absolute;
margin:0;
padding:0;
font-family:'Roboto';
font-size: 22px;
color: #FFFFFF;
top:27%;
left:20%;
}
.text {
transform: rotate(360deg);
}
.container img {
position:absolute;
}
.rotate img {
width:100%;
/*-webkit-transform-origin: 70% 105%;*/
z-index: -1;
position:relative;
}
.rotate {
width:72%;
transition: transform 0.5s linear;
transform-origin: 70% 105%;
position:absolute;
}
.bottom img {
/*-webkit-transform: rotate(180deg);*/
z-index: -1;
margin-top: 308px;
margin-left: 141px;
transform: rotate(180deg);
}
.left img {
transform: rotate(270deg);
z-index: -1;
}
.right img {
/*-webkit-transform: rotate(90deg);*/
z-index: -1;
}
.rotate.right div p {
top:22%;
left:9%;
transform: rotate(270deg);
}
.rotate.bottom div p {
position: absolute;
margin: 0;
padding: 0;
font-family:'Roboto';
font-size: 22px;
color: #FFFFFF;
top: 79%;
left: 100%;
}
.rotate.left div p {
top:78%;
left:26%;
transform: rotate(360deg);
}
/*New style**/
.rotate div {
position: absolute;
padding:0;
margin:0;
width:100%;
height:100%;
left:0;
right:0;
top:0;
bottom:0;
transition: transform 0.5s linear;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.centerButton img, .centerButton p {
position:absolute;
width:100%;
top:-50%;
left:-50%;
right:-50%;
bottom:-50%;
margin:auto;
}
.centerButton p {
height:10%;
text-align:center;
font-family:'Roboto';
font-size: 22px;
color: #FFFFFF;
}
.centerButton {
width:50%;
height:50%;
margin:auto;
position:absolute;
top:-45%;
left:-50%;
right:-52%;
bottom:-50%;
}
UPDATE:
Your z-index in the css class was giving the issue. Corrected that in the updated fiddle
CSS for reference:
.bar-positive {
background-color: #C12537;
border: none;
}
.container {
width:550px;
height:550px;
position:relative;
z-index: 9999;
display:block;
}
.container .left, .right div p {
top: 44%;
left: -14%;
}
.container .right {
transform: rotate(90deg);
}
.rotate div p {
position:absolute;
margin:0;
padding:0;
font-family:'Roboto';
font-size: 22px;
color: #FFFFFF;
top:27%;
left:20%;
}
.text {
transform: rotate(360deg);
}
.container img {
position:absolute;
}
.rotate img {
width:100%;
/*-webkit-transform-origin: 70% 105%;*/
z-index: 9999;
position:relative;
}
.rotate p {
z-index:9999;
}
.rotate {
width:72%;
transition: transform 0.5s linear;
transform-origin: 70% 105%;
position:absolute;
}
.bottom img {
/*-webkit-transform: rotate(180deg);*/
z-index: 9999;
margin-top: 308px;
margin-left: 141px;
transform: rotate(180deg);
}
.left img {
transform: rotate(270deg);
z-index: 9999;
}
.right img {
/*-webkit-transform: rotate(90deg);*/
z-index: 9999;
}
.rotate.right div p {
top:22%;
left:9%;
transform: rotate(270deg);
}
.rotate.bottom div p {
position: absolute;
margin: 0;
padding: 0;
font-family:'Roboto';
font-size: 22px;
color: #FFFFFF;
top: 79%;
left: 100%;
}
.rotate.left div p {
top:78%;
left:26%;
transform: rotate(360deg);
}
/*New style**/
.rotate div {
position: absolute;
padding:0;
margin:0;
width:100%;
height:100%;
left:0;
right:0;
top:0;
bottom:0;
transition: transform 0.5s linear;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.centerButton img, .centerButton p {
position:absolute;
width:100%;
top:-50%;
left:-50%;
right:-50%;
bottom:-50%;
margin:auto;
}
.centerButton p {
height:10%;
text-align:center;
font-family:'Roboto';
font-size: 22px;
color: #FFFFFF;
}
.centerButton {
width:50%;
height:50%;
margin:auto;
position:absolute;
top:-45%;
left:-50%;
right:-52%;
bottom:-50%;
}