I am trying to use checkbox to allow multiple selection of the user's input. I need to enlarge the icon to 48px, however, the ripple and the clickable area is sit at the top-left corner. I expect it is in the center of the FontIcon. Any have one idea?
css:
const styles = {
mediumIcon: {
fontSize: 48,
},
}
Componets:
<Checkbox
checkedIcon={<FontIcon className="material-icons" >face</FontIcon>}
uncheckedIcon={<FontIcon className="material-icons" >face</FontIcon>}
iconStyle={styles.mediumIcon}
/>
package version:
"material-ui": "^0.16.6",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-tap-event-plugin": "^2.0.1",
Here is the html generated:
<div style="cursor: pointer; position: relative; overflow: visible; display: table; height: auto; width: 100%;">
<!-- react-empty: 124 -->
<input type="checkbox" value="on" style="z-index: 2; position: absolute; pointer-events: all; opacity: 0; width: 100%; height: 100%; cursor: inherit; left: 0px; box-sizing: border-box; padding: 0px; margin: 0px;">
<div style="display: flex; width: 100%; height: 100%;">
<div style="width: 24px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; position: relative; display: block; flex-shrink: 0; float: left; margin-right: 16px; margin-left: 0px; height: 24px; font-size: 48px;">
<div>
<span class="material-icons" style="user-select: none; color: rgba(0, 0, 0, 0.870588); position: absolute; font-size: 48px; display: inline-block; transition: opacity 650ms cubic-bezier(0.23, 1, 0.32, 1) 150ms; opacity: 0; fill: rgb(0, 188, 212);">face</span>
<span class="material-icons" style="user-select: none; color: rgba(0, 0, 0, 0.870588); font-size: 48px; display: inline-block; transition: opacity 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, transform 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; position: absolute; transform: scale(1); fill: rgb(0, 188, 212); opacity: 1;">face</span>
</div>
<div>
<span style="height: 200%; width: 200%; position: absolute; top: -12px; left: -12px; overflow: hidden; pointer-events: none; color: rgb(0, 188, 212);"></span>
</div>
<div style="position: absolute; overflow: hidden; height: 100%; width: 100%; top: 0px; left: 0px;"></div>
</div>
</div>
Related
Below are the HTML, CSS, and Javascript I use on my website. I'm using a MAMP server (via an apache) to get it online and have no problems getting it to run over wi-fi. However, when I try to access it via my mobile network the website crashes after viewing a few pages. I have port-forwarded my router.
I think (and please correct me if I'm wrong) that too much is loading on the page at once, which is what is making the website crash when testing it on a mobile network. How would I set up the page so that the photos lazy load? If anyone has any advice it'd be much appreciated.
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
<body>
<style>html{visibility: hidden; opacity: 0;}</style>
<title>MORIKOBOSHI・</title>
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">Home</li>
<li style="border-bottom: .05px solid lightgray;">Blog</li>
<li style="border-bottom: .05px solid lightgray;">About This Website</li>
<li style="border-bottom: .05px solid lightgray;">Bibliography</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;">
<input class="search2" id="txtSearch" type="text" placeholder="Custom Google Search" name="serach_bar" size="31" maxlength="255" value="" style="top: 185px; width: 180px; height: 26px;">
<input class="search1" type="submit" name="submition" value="Search" style="padding-left: 5px; top: 153px; height: 25px; width: 50px; display: inline-flex; justify-content: center;">
<input class="search2" type="hidden" name="sitesearch" value="default.html">
</form>
</div>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:morikoboshi.com' + document.getElementById('txtSearch').value;
return false;
}
</script>
<script>
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
if(!!window.performance && window.performance.navigation.type == 2)
{
window.location.reload();
}
</script>
</ul>
</nav>
</header>
<div class="setsumei">
<br><br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
<br><p style="text-align: justify; font-size: 16px;"></p>
<p style="text-align: center; font-size: 13px;">Author: ◯◯◯◯</p>
<p style="text-align: center; font-size: 13px;">Photos/Videos Taken：◯◯◯◯/◯◯/◯◯</p>
<br><br><p style="text-align: justify; font-size: 16px;">
#
</p>
</div>
<br><br><div class="image">
<img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">MORIKOBOSHI© | 日本語</footer>
</div>
</div>
<style>
html {visibility: visible;
opacity: 1;}
.body{background-color: white;
font-family: sans-serif;}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
So like the title says, what I am trying to achieve is that when I zoom out, I want my carousel to be 100% width of the screen all time, here is what I mean by that. Right now when I zoom out, my carousel looks like this:
But when it is 100% zoom, a.k.a my normal screen it looks like this:
So, how do I make this be resizable meaning it is going to be like it is on a normal screen (100%) on every zoom.
Here is my code:
const Works = () => {
var settings = {
centerMode: true,
dots: true,
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
centerPadding: "10px",
customPaging: (i) => <div className="works-dots"></div>,
arrows: false,
};
return (
<div className="mainWorks-container">
<div className="works-popup-container">
<h3 className="works-title">WORKS</h3>
<div className="works-popup-image-container">
<Slider {...settings}>
{worksImages.map((image, index) => {
return (
<div key={index} className="works-image">
<img
src={image.image}
alt={image.alt}
className="works-popup-image"
/>
<div className="image-overlay">
<h3>{image.title}</h3>
</div>
</div>
);
})}
</Slider>
</div>
</div>
<div className="works-button-container">
<a href="/">
<Button text="View Works" isFilled={false} type="border" />
</a>
</div>
</div>
);
};
export default Works;
This is my Works.js component.
.mainWorks-container {
height: 675px;
position: relative;
}
.works-popup-container {
height: 780px;
width: 986px;
background: url("../../../images/gradient-background.jpg") no-repeat;
background-size: cover;
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
}
.works-title {
margin-top: 50px;
letter-spacing: 0.5em;
font-size: 12px;
color: white;
text-align: center;
}
.works-popup-image-container {
.slick-list {
position: relative;
left: -30%;
width: 105rem;
}
.works-image {
position: relative;
margin-bottom: 8rem;
width: 385px;
height: 513px;
border-radius: 3px;
box-shadow: 0px 70px 100px -40px rgba(0, 0, 0, 0.5);
img {
width: 385px;
height: 100%;
object-fit: contain;
cursor: pointer;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 91.7%;
background: rgba(0, 0, 0, 0.5);
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
opacity: 0;
cursor: pointer;
text-align: center;
font-size: 1.2rem;
word-break: break-word;
}
.image-overlay:hover {
opacity: 1;
}
}
}
.works-dots {
background: rgba(247, 247, 247, 0.75);
border-radius: 50%;
width: 8px;
height: 8px;
margin: 0 5px;
}
.works-dots:hover {
height: 10px;
width: 10px;
transition: all 0.2s ease;
}
.slick-active {
.works-dots {
height: 10px;
width: 10px;
}
}
.works-button-container {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
And this is my worksStyles.scss file.
If anyone knows how to do this, I would be thankful.
i want to achieve radio button or check box like this:
it was on a website here
in above link if you choose Cheese Pizza Add > Medium > there you can find input buttons i am looking for.
My code:
<div class="boxes_area">
<div class="main_content">
Extra Cheese
</div>
<div class="right_side">
<div class="right_half_icon_one">
</div>
</div>
<div class="left_side">
<div class="left_half_icon_one">
</div>
</div>
<div class="full_side">
<div class="full_circle">
</div>
</div>
</div>
With css i achieved:
.right_side {
border: 1px solid;
border-radius: 50%;
padding: 5px;
}
.modal .modal-header {
border-bottom: 1px solid;
}
.modal .modal-footer {
border-top: 1px solid;
}
.right_half_icon_one img {
width: 35px;
}
.left_half_icon_one img {
width: 35px;
}
.boxes_area {
margin-top: 5px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
.full_circle img {
width: 35px;
}
.right_half_icon_one {
width: 35px;
height: 35px;
background: #212a5e;
border-radius: 100%;
position: relative;
}
.right_half_icon_one::before{
position: absolute;
top: -1px;
content: '';
left: 18px;
width: 18px;
height: 37px;
background: white;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.left_side {
border: 1px solid;
padding: 5px;
border-radius: 100%;
}
.left_half_icon_one {
width: 35px;
height: 35px;
background: #212a5e;
border-radius: 100%;
position: relative;
}
.left_half_icon_one::before{
position: absolute;
top: -1px;
content: '';
right: 18px;
width: 18px;
height: 37px;
background: white;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.full_side {
border: 1px solid;
padding: 5px;
border-radius: 100%;
}
.full_circle {
width: 35px;
height: 35px;
background: #212a5e;
border-radius: 50%;
}
but i want those with input and radio box form elements.
In order to implement some features in my react app I need to flip an image in a grid horizonaly when the user choose it with onClick event.
I've readed regarding states in react , and noticed that this is what I need.
When onClick event, flip the image.
The follwing code isn't working well.
The isExpanded working fine, but the image in the grid isn't fliping.
What I'm doing wrong ?
I have initiated the isExpanded to false in my constractor.
handleToggle(e){
e.preventDefault();
this.setState({
isExpanded: !this.state.isExpanded,
})
render() {
const {isExpanded } = this.state;
return (
<div
className={`image-root ${isExpanded ? 'image-flip' : ''}`}
style={{
backgroundImage: `url(${this.urlFromDto(this.props.dto)})`,
width: this.state.size + 'px',
height: this.state.size + 'px'
}}
>
<div>
<FontAwesome className="image-icon" onClick={(e)=>
this.handleToggle(e)} name="arrows-alt-h" title="flip"/>
</div>
</div>
);
}
}
The .scss code:
.image-root {
background-size: cover;
background-position: center center;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
position: relative;
border: 1px solid white;
> div {
visibility: hidden;
background: rgba(0, 0, 0, 0.7);
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: white;
padding: 15px;
text-align: center;
text-align: center;
box-sizing: border-box;
white-space: pre;
display: flex;
align-items: center;
justify-content: center;
}
&:hover > div {
visibility: visible;
}
.image-icon {
font-size: 20px;
vertical-align: middle;
border: 1px solid #ccc;
color: #ccc;
border-radius: 5px;
cursor: pointer;
padding: 12px;
margin: 3px;
&:hover {
color: white;
border-color: white;
}
}
.image-flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
The issue was accured due to the image-flip css was in the wrong scope.
I just move the image-flip css out of the image-root scope.
Thanks.
Is there a way to create such an oblique stripe using angularJS and Bootstrap?
You can do that only using css:
HTML:
<div class="rectangle">
<div class="strip-container">
<div class="strip">Sample Text</div>
</div>
</div>
CSS:
.rectangle{
margin: auto;
width: 200px;
height: 300px;
position: relative;
border: 1px solid #4B88CB;
}
.strip-container{
overflow: hidden;
width: 200px;
height: 200px;
position: absolute;
top: 0;
right: 0;
}
.strip{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display: block;
position: absolute;
right: -100px;
top: 20px;
padding: 20px 100px;
font-weight: bold;
text-transform: uppercase;
white-space: nowrap;
text-align: center;
background: #4B88CB;
color: #000;
font-size: 12px;
}
CHECK THE DEMO
You could for something like this
This solution has the advantage of having less "magic numbers" by having only the width of the stripe (could probably be fixed) and the top-offset in translate(50%, offset) as set values.
HTML
<div class="container">
<div class="stripe">
<p>
Sample Text
</p>
</div>
</div>
CSS
.container
{
position: relative;
width: 200px;
height: 400px;
border: 1px solid black;
overflow: hidden;
}
.stripe
{
position: absolute;
top: 0px;
right: 0px;
height: 64px;
width: 100%;
background-color: blue;
text-align: center;
transform: rotate(45deg) translate(50%, 32px);
transform-origin: 100% 0px;
}
see https://jsfiddle.net/Aides/58mryy97/