I tried many ways but it's not working. I just need a simple button that is visible only on hover.
I have this:
<div class = "input-edit">
<button type = "button" class = "edit-button">
<mat-icon class = "material-icons"> edit </mat-icon>
</button>
Edit:
SOLUTION:
.input-edit{opacity: 0} .input-edit:hover{opacity: 1 }
CSS is the way to go and as Prakash suggested, that could be one nice approach, use opacity and you can even use a transition to make the effect smooth
.input-edit {
opacity: 0;
transition: opacity 0.5s ease;
}
.input-edit:hover {
opacity: 1;
}
The display: none; property would not work because otherwise the button would not exist. In this case you can give the button an opacity: 0; and for hovering an opacity: 1;.
Here's the code:
.input-edit {
opacity: 0;
transition: all 0.2s; /* Use a transition if you want */
}
.input-edit:hover {
opacity: 1;
}
<div class = "input-edit">
<button type = "button" class = "edit-button">
<mat-icon class = "material-icons"> edit </mat-icon>
</button>
you can use display: none; property
.edit-button{
display: none;
}
.input-edit {
min-height:50px;
}
.input-edit:hover .edit-button{
display: block;
}
<div class = "input-edit">
<button type = "button" class = "edit-button">
<mat-icon class = "material-icons"> edit </mat-icon>
</button>
</div>
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
<div class = "myDIV">Edit</div>
<button type = "button" class = "edit-button hide">
<mat-icon class = "material-icons"> edit </mat-icon>
</button>
Related
I need to color and zoom the text when the cursor "approaches" the text (so basically when the mouse enters the area of the div surrounding the text). Right now i can make it work coloring the text only when i hover directly on it. I'll paste a snippet of the code.
HTML:
<div fxLayout="row wrap" class="max container">
<div fxFlex="100%" fxLayoutAlign="center">
<!--here there is an image-->
</div>
<div fxFlex="100%" class="centered-text" fxHide fxShow.gt-lg>
<h2 [ngClass]="{'gradient' : this.gradient,'lighter':lighter, 'zoom':zoom, 'scale':1.2}" style="margin: 0;" class="font">
hoverMe
</h2>
</div>
</div>
Typescript:
import {Component, Input, OnInit} from '#angular/core';
#Component({
selector: 'iet-box-academy',
templateUrl: './box-academy.component.html',
styleUrls: ['./box-academy.component.scss']
})
export class BoxAcademyComponent implements OnInit {
#Input() scale = 1;
#Input() img = '';
#Input() title = 'TITOLO';
#Input() descr = '';
#Input() align = "centerer";
#Input() lighter = false;
#Input() zoom = true;
#Input() gradient: boolean = false;
constructor() {
}
ngOnInit(): void {
}
}
CSS:
.container {
position: relative;
text-align: center;
color: black;
}
.zoom {
transition: transform .2s; /* Animation */
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5);
color: #00D3FF;
}
https://jsfiddle.net/wdfc7g9a/14/
You can add the :hover to the parent and add a child selector:
Change:
.zoom:hover {
transform: scale(1.5);
color: #00D3FF;
}
To:
.container:hover .zoom {
transform: scale(1.5);
color: #00D3FF;
}
Demo:
.container {
border: 1px solid red;
}
.container:hover .zoom {
background: yellow;
}
<div class="container">
This is a text
<div class="zoom">highlight this text</div>
More text
</div>
I recommend you to use centered-text class instead of zoom class. Because it is easier to give a transparent padding to it so you can have the "approaching" animation played without needing to hover directly on the text.
This code will fix your problem the moment you copy paste it to your Custom CSS:
.centered-text {
transition: all 0.3s;
margin: 0 auto;
padding:13px;
}
.centered-text:hover {
transform: scale(1.4);
color: #00D3FF;
transition: all 0.3s;
}
I'm trying to make a reddit clone MERN and need a dropdown like the dorpdown in the reddit search bar
the styling is not an issue the issue is to make the dropdown appear when the input bar is focused
also i am using tailwindcss
can anyone please tell me how to do this?
I suppose you want to show the select not just when you focus the input but also when you are interacting with the select: you may avoid JS at all and use the :focus-within pseudoclass
.dropdown select {
display: none;
}
.dropdown:focus-within select {
display: block;
}
<div class="dropdown">
<input />
<select>
<option>option</option>
</select>
</div>
but if you need this to be working only on input focus
.dropdown select {
display: none;
}
.dropdown input:focus + select {
display: block;
}
<div class="dropdown">
<input />
<select>
<option>option</option>
</select>
</div>
const show = () => {
document.querySelector('.content').classList.add("active")
}
const hide = () => {
document.querySelector('.content').classList.remove("active")
}
.dropdown{
display: flex;
flex-direction: column;
position: relative;
width: 200px;
}
input{
width: 100%;
}
.content{
background: red;
padding: 4px;
position: absolute;
top: 100%;
width: 100%;
display: none;
}
.active{
display: flex;
}
<div class = "dropdown">
<input onFocus = "show()" onBlur = "hide()" />
<div class = "content">
Dropdown
</div>
</div>
React and Tailwind
const Dropdown = () => {
const [isFocus, setIsFocus] = React.useState(false);
return (
<div className = "w-40 border m-4">
<input
className = "w-full"
onFocus={() => setIsFocus(true)}
onBlur={() => setIsFocus(false)}
/>
{ isFocus && <div className = "bg-red-300">Dropdown</div>}
</div>
);
};
Goal:
When you click on the icon menu in the header toolbar, it should be expanded and the content of "<mat-sidenav-content>" should be moved more to the right due to the space of the sidenav menu.
Problem:
When clicking on the icon menu the content of "<mat-sidenav-content>" doesn't move to the right side direction due to the expansion space of the sidenavemenu. The content is static when you expand the sidenav bar menu.
What part am I missing?
Info:
*Using angular 9
*A example of a content that will be moved when you make the sidebar nav menu to appear.
(https://stackblitz.com/angular/qoaqpenxjqy)
*When the menu is not expanded, the icon should appear and not the text.
Stackblitz:
https://stackblitz.com/edit/angular-ymkpvj-hso3tw
Thank you!
<mat-toolbar color="primary" class="example-toolbar">
<button mat-icon-button (click)="isExpanded = !isExpanded" >
<mat-icon>menu</mat-icon>
</button>
<h1 class="example-app-name">Nested Menus</h1>
</mat-toolbar>
<mat-sidenav-container class="example-container" >
<mat-sidenav #sidenav class="example-sidenav"
mode="side"
opened="true"
(mouseenter)="mouseenter()"
(mouseleave)="mouseleave()"
>
<mat-nav-list>
<mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
<mat-icon mat-list-icon>home</mat-icon>
<span class="full-width" *ngIf="isExpanded || isShowing">Parent Menu</span>
<mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
</mat-list-item>
<div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded">
<a mat-list-item href="...">Submenu Item 1</a>
<a mat-list-item href="...">Submenu Item 2</a>
<mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent">
<span class="full-width" *ngIf="isExpanded || isShowing">Nested Menu</span>
<mat-icon class="menu-button" [ngClass]="{'rotated' : showSubSubMenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
</mat-list-item>
<div class="submenu" [ngClass]="{'expanded' : showSubSubMenu}" *ngIf="isShowing || isExpanded">
<mat-list-item>SubSubmenu Item 1</mat-list-item>
<mat-list-item>SubSubmenu Item 2</mat-list-item>
</div>
</div>
</mat-nav-list>
<mat-nav-list>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
test test test test test test test
</mat-sidenav-content>
</mat-sidenav-container>
<!-- Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license -->
import {Component, ViewChild} from '#angular/core';
import {FormBuilder, FormGroup} from '#angular/forms';
/** #title Fixed sidenav */
#Component({
selector: 'sidenav-fixed-example',
templateUrl: 'sidenav-fixed-example.html',
styleUrls: ['sidenav-fixed-example.css'],
})
export class SidenavFixedExample {
/**
options: FormGroup;
constructor(fb: FormBuilder) {
this.options = fb.group({
bottom: 0,
fixed: false,
top: 0
});
}
*/
constructor() {}
events: string[] = [];
isExpanded = true;
showSubmenu: boolean = false;
isShowing = false;
showSubSubMenu: boolean = false;
mouseenter() {
if (!this.isExpanded) {
this.isShowing = true;
}
}
mouseleave() {
if (!this.isExpanded) {
this.isShowing = false;
}
}
}
.example-container {
height: 500px;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.example-sidenav-content {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.example-sidenav {
user-select: none;
}
.full-width {
width: 100%;
}
.menu-button {
transition: 300ms ease-in-out;
transform: rotate(0deg);
}
.menu-button.rotated {
transform: rotate(180deg);
}
.submenu {
overflow-y: hidden;
transition: transform 300ms ease;
transform: scaleY(0);
transform-origin: top;
padding-left: 30px;
}
.submenu.expanded {
transform: scaleY(1);
}
Demo make opened propery isExpanded
[opened]="isExpanded"
but if you want to show small icon while closing then you need to change css. Because navigation position is absolute but, content is relative. and content changes with margin-left property to opened property value.
Possible solution
make both position relative and remove margin-left property for content in true condition of opened
.mat-sidenav{
position: relative !important;
height: 100%;
overflow: auto;
float: left;
}
.mat-drawer-content {
margin-left: 0 !important;
}
you should put them inside style.css. Demo
I have 2 classes one is .bot class and 2nd is .tools class. On click of filter-button class I am trying to activate (display) tools class which has dropdown button. For some reason this is not working for me.
Here is my scss code
.bot {
&:active {
.tools {
display: block;
}
}
}
Here is my html code
<button class="bot" (click)="toggleFilters()">Filter <fa-icon [icon]="filter">
</fa-icon>
</button>
<div class="demos">
<div class="tools"
*ngIf="Data.length > 1">
</div>
Try using this instead
.filter-button {
&:active {
+ .demos {
.tools {
display: block;
}
}
}
}
note the + selector
I'm trying to display a overlay when a certain Input field is clicked. I'm doing this in react. How can I do this?
This is my code
import React, { Component } from 'react';
import cam from '../../Resources/img/cam.png';
import SinglePost from '../../Components/Post/single_post';
class Middle extends Component {
constructor(props) {
super(props);
this.state = {
posts: []
}
}
render() {
function popup_ques(e) {
e.preventDefault();
alert("now the overlay should appear");
}
return (
<div className="middle_div">
<input className='post_data_input' placeholder="Ask your question here" ref="postTxt" onClick={popup_ques}/>
</div>
);
}
}
export default Middle;
What is the approach I should take?
I have created a sample react component.
I hope this will help you in somewhat way to achieve what you want.
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
style : {
width : 350
}
};
this.openNav = this.openNav.bind(this);
this.closeNav = this.closeNav.bind(this);
}
componentDidMount() {
document.addEventListener("click", this.closeNav);
}
componentWillUnmount() {
document.removeEventListener("click", this.closeNav);
}
openNav() {
const style = { width : 350 };
this.setState({ style });
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
document.addEventListener("click", this.closeNav);
}
closeNav() {
document.removeEventListener("click", this.closeNav);
const style = { width : 0 };
this.setState({ style });
document.body.style.backgroundColor = "#F3F3F3";
}
render() {
return (
<div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style={{fontSize:30,cursor:"pointer"}} onClick={this.openNav}>☰ open</span>
<div
ref = "snav"
className = "overlay"
style = {this.state.style}
>
<div className = "sidenav-container">
<div className = "text-center">
<h2>Form</h2>
<p>This is a sample input form</p>
</div>
<a
href = "javascript:void(0)"
className = "closebtn"
onClick = {this.closeNav}
>
×
</a>
<div className = "list-group">
{/*your form component goes here */}
{this.props.children}
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<Test/>,
document.getElementById('test')
);
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.overlay h2, .overlay p {
color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="test"></div>
Input:
<input onFocus={() => this.setState({show_overlay: true})} />
somewhere arround in same render() function add overlay div:
<div
style={{display: this.state.show_overlay === true ? 'block' : 'none'}}
>
overlay
</div>
of course add styling to div as needed to have proper overlay effect, what's needed by your UI
To turn overlay off, you will need to add another event listener on some action, like e.g. click
<button onClick={() => this.setState({show_overlay: false})}>
Close overlay
</button>