I am currently working on a project and I need some help trying to position an icon on the upper right corner of the page. Ive ben playing around with it but haven't had any luck. I am using the semantic-ui icon
import React from 'react'
import { Icon } from 'semantic-ui-react';
const ShoppingCart = () => {
return(
<Icon.Group size='big'>
<Icon link name='shopping cart' />
<Icon corner='top right'/>
</Icon.Group>
)
}
export default ShoppingCart;
this is the css that I am using for the positioning
i {
position: absolute;
bottom: 3000px;
/* left: 80%; */
margin-left: 380px !important;
}
You can provide a cutom class name to your icon,
<Icon.Group size="big" className="shopping_cart_icon">
<Icon link name="shopping cart" />
<Icon corner="top right" />
</Icon.Group>
Using this class name you can apply the CSS, top: 0 & right:0 will place your icon to upper right corner.
.shopping_cart_icon{
position : absolute;
top : 0;
right : 0;
}
Demo
Related
I have created a iFrame on my 3D website in which renders a path from my portfolio. I have been attempting to scroll or touch (mobile) this iFrame for a while now, the desktop version works fine, you can scroll, access pages, etc although on mobile, the touch event does not seem to happens.
I have searched several posts and fixes, but none of them made the touch event, or touch scroll from this iframe to work.
You can access my website through https://niltonsf.dev and on the top right select viewWebpage to focus on the html screen.
Here is the component in which renders the iframe:
import { Html } from "#react-three/drei";
import { Dispatch, SetStateAction } from "react";
import { isMobile } from "react-device-detect";
import * as THREE from "three";
interface MonitorProps {
geometry: THREE.BufferGeometry;
screen: THREE.Mesh;
bakedTexture: THREE.Texture;
setIsPointerOnHtml: Dispatch<SetStateAction<boolean>>;
isFocusOnHtml: boolean;
}
export default function Monitor({
geometry,
screen,
bakedTexture,
setIsPointerOnHtml,
isFocusOnHtml,
}: MonitorProps) {
return (
<>
<primitive object={screen}>
<group position={[-2.57, 1.8, -0.01]} rotation-y={1.565}>
<Html
transform
prepend
wrapperClass="htmlScreen"
scale={0.35}
distanceFactor={1.17}
zIndexRange={[0, 0]}
>
<div
onClick={(e) => {
if (!isFocusOnHtml) e.preventDefault();
}}
onPointerEnter={(e) => {
if (isFocusOnHtml) setIsPointerOnHtml(true);
}}
onPointerLeave={(e) => {
if (isFocusOnHtml) setIsPointerOnHtml(false);
}}
>
<iframe
id="iframe"
src="https://niltonsf.dev/static"
// src="http://192.168.1.13:3000/static"
title="myStaticWebsite"
style={{
width: isMobile ? 1200 : 1500,
}}
/>
</div>
</Html>
<mesh>
<planeGeometry args={[1.535, 0.69]} />
<meshPhysicalMaterial
blending={THREE.NoBlending}
opacity={0}
color={"black"}
side={THREE.DoubleSide}
/>
</mesh>
</group>
</primitive>
<mesh geometry={geometry}>
<meshBasicMaterial map={bakedTexture} />
</mesh>
</>
);
}
This is the main css file:
#root {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
-webkit-overflow-scrolling: touch;
}
.htmlScreen iframe {
height: 700px;
border: none;
background: #000;
overflow-y: scroll;
touch-action: touch;
}
canvas {
touch-action: touch;
}
EDIT: It seems to be something with iPhones, Android devices work correctly
I have a React project and this is how its index-page:
inside div, I have side bar and its main css:
.side-nav {
position: sticky;
top: 0;
left: 0;
height: 100vh;
z-index: 100;
width: calc(3.5vw + 3.5vh);
this is how sidebar,navbar and main page stacked.
const BaseLayout: React.FC<BaseLayoutProps> = (props) => {
const { className, user, navClass = "with-bg", loading, children } = props;
return (
// display:flex will keep sideBar and main, side by side
<div style={{ display: "flex" }}>
<SideBar />
<Header className={navClass} user={user} loading={loading} />
{children}
</div>
);
};
this is main div for Header
.port-navbar.port-default {
width: 100vw;
z-index: 15;
height: calc(3.5vw + 3.5vh);
}
and this is the main div for index-page:
background-color: green;
there is another component under header. I want that component should be under header. In the current structure, I do not understand why index-page does not start right after the header.
Also, I do not understand why I have extra space on the right side of header.
first of all side-nav is not the class name of the header so the styles will not perform on it.
second, you need to use this for the Header component:
position: absolute;
if that didn't work please show some more details and a snippet.
I am new to React and Material-UI and I want to print my current dialog.
The problem is that I cannot find a way to maximize my Dialog for priting (set to fullScreen) without doing it in the Browser, too. So I basically want a smaller Dialog in my Browser and for the Dialog the maximal size.
Here is my basic code in TSX:
import React, { Component} from 'react';
import { Button, Dialog } from '#material/core';
export default class MUITester extends Component {
render(){
return (
<Dialog fullScreen={false}>
<div>
<Button onClick={() => window.print()}>
PRINT
</Button>
</div>
</Dialog>
);
}
And the corresponding css file:
#media print {
.print {
fullScreen=true;
color: blue;
}
}
Can I solve it using css? Or do I have to use React/Material-UI?
I solved it! Change the classes of Dialog:
<Dialog classes={{paperFullScreen: "prePrint printDialog"}} fullScreen>
Here my css:
.prePrint {
height: auto !important;
max-width: 600px !important;
}
/*Print Dialog*/
#media print {
.printDialog {
max-width: 100% !important;
}
}
You can set the width of your dialog like this:
<Dialog fullWidth={true} maxWidth='md'>
<div>
<Button onClick={() => window.print()}>
PRINT
</Button>
</div>
</Dialog>
As given in the Documentation
For printing div, which is inside dialog, use below code, and add css also
import React, { Component} from 'react';
import { Button, Dialog } from '#material/core';
export default class MUITester extends Component {
render(){
return (
<Dialog classes={{paperFullScreen: "prePrint"}} fullScreen>
<div id="DialogPrint">
some text some text , some paragraph and so on
</div>
<div >
<Button onClick={() => window.print()}>
PRINT
</Button>
</div>
</Dialog>
);
}
}
add below code in css
.prePrint {
height: auto !important;
max-width: 600px !important;
}
/*Print Dialog*/
#media print {
body * {
visibility: hidden;
}
#DialogPrint,
#DialogPrint * {
visibility: visible;
}
#DialogPrint {
position: absolute;
left: 0;
top: 0;
}
}
I was looking for a full-screen Dialog on mobile and a simple dialog for desktop and the below example resolved my issue, please take a look if helps.
import useMediaQuery from '#mui/material/useMediaQuery';
function MyComponent() {
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
return <Dialog fullScreen={fullScreen} />;
}
You can check demo on MUI official documentation.
You just need to add fullScreen flag to modal component in order to achieve full screen.
Like below
<Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
And if you don't want to use fullScreen, simply remove that fullScreen flag and don't need to use CSS here.
I have a component that has a state "style" which changes to a random color in my colors array whenever a button is clicked. The state is passed inside a style attribute so that the backgroundColor would become whatever the state is. This is working but whenever I try to add css to the button, it stops working as intended. I have a hunch that it could be due to the position absolute that I used but I have no idea why it's doing that.
All I could do was comment out the CSS to make the button work again but that really doesn't solve my issue.
import React, {Component} from 'react';
import "./Tap.css";
class Tap extends Component{
constructor(props){
super();
this.state={
style: ''
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
const colors = ["#68ad45", "#123456", "#987546", "#ab23c6", "#324517", "#456819"];
let i = Math.floor(Math.random() * 6);
this.setState({
style: colors[i]
});
}
render(){
return(
<div className="Tap" style={{backgroundColor: this.state.style}}>
<button onClick={this.handleClick}>Click Here</button>
</div>
);
}
}
export default Tap;
// ========================== CSS file ==========================
.Tap button{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
outline: none;
padding: 10px;
font-size: 200px;
cursor: pointer;
}
No error messages, just no result coming from the button after it's been styled with the css.
This is because: position: absolute which is added to button,
So Tab div have no height now
One solution: is to div that div fixed height:
.Tap {
height: 50px;
}
See Example 1
But if you noticed that the tab not aligned with button because of absolute position.
Other Solution position the Tab not the button as absolute with some padding:
See example 2
Just do this simple change <button onClick={this.handleClick} style={{backgroundColor: this.state.style}}>Click Here</button>
check sample code - https://stackblitz.com/edit/react-soy8a4
I have an app file which contains my own custom appbar and different page components:
const styles = theme => ({
appBar: {
width:'100%',
},
});
class App extends Component {
render() {
const {classes} = this.props;
return (
<React.Fragment>
<CssBaseline />
<AppBar position="sticky" className={classes.appBar} />
<Page1 show={someCondition} />
<Page2 show={someCondition} />
.
.
<Page99 show={someCondition} />
</React.Fragment>
);
}
}
The Appbar is sticky so it always shows on the top.
Each page component has a button which is always on the top of that page:
const styles = theme => ({
button: {
width:'100%',
},
});
class Page99 extends Component {
render() {
const {classes} = this.props;
return (
<React.Fragment>
<div>
<Button variant="contained" className= {classes.button}>
Action Button
</Button>
</div>
{/* Some other stuff */>
</React.Fragment>
);
}
}
I know want this button to always be right under the appbar. So when the user scrolls down this button should remain sticky just like the appbar does. I tried to set the positioning to sticky hoping it would stack underneath it but it wouldn't. The appbar is dynamic so I don't know the exact height it will be since on different resolutions it will look different so I couldn't use something like fixed positioning.
You can set position of page container as relative and set button as absolute.
the you can align it to top right of the page or wherever you want.
Check this fiddle is this is what you need
.componentparent {
position: relative;
height:100px;
max-height: 50px;
overflow: auto;
}
.button {
position: fixed;
top: 30px;
}
.otherelements{
top: 70px;
position: relative;
}
<div id="parent-container">
<div> your app bar </div>
<div class='componentparent'>
<button class='button'>my button</button>
<div class='otherelements'>your component</div>
</div>
</div>
Place your button inside your appbar and set your button to position to absolute and add top: 100% to move it exactly at the bottom of appbar.