I am making a few separate pages which each containing a modal (or two). I have made a css styling sheet to make JUST ONE of these full screen I would like the rest to stay the same size.
However this has affected all of my modals not just one.
My first course of action was to remove this modal (and the css sheet)from the folder it was contained within in a hope that the css style sheet would no longer affect the other modals now it is outside of the folder. This did not work.
So essentially I feel as if inline styling in this instance is the best course of action.However I am not sure how to do the styling for this specific modal.
I am here asking for any advice on how to either tackle the styling sheet issue or how to make this work through inline styling.
Here is my folder structure as you can see adminviewWorkstatioModal is in a separate folder along with viewWorkstationModal.css however the style of this still affects the rest of the files in the picture.
Example of one of the modals(template only)
class DisplayAddQuestion extends React.Component {
constructor(props) {
super(props);
this.handleClose = this.handleClose.bind(this);
this.handleShow = this.handleShow.bind(this);
this.handleRefresh = this.handleRefresh.bind(this);
this.state = {
show: false,
show1: false
};
}
handleClose() {
this.setState({
show: false,
show1: false
});
}
handleShow() {
this.setState({
show: true
});
}
handleRefresh() {
window.location.reload();
}
render() {
// console.log(this.state);
return (
<div className="header-container">
<button
className="btn btn-primary"
style={{ float: "right" }}
onClick={this.handleShow}
>
+
</button>
<Modal
className="modal-container custom-map-modal"
show={this.state.show}
onHide={this.handleClose}
animation={true}
>
<Modal.Header closeButton></Modal.Header>
<Modal.Body></Modal.Body>
</Modal>
</div>
);
}
}
And finally the css sheet
.modal-dialog {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
}
.modal-content {
height: auto !important;
min-height: 100% !important;
border-radius: 0 !important;
background-color: #ececec !important;
}
.modal-header {
border-bottom: 1px solid #9ea2a2 !important;
}
.modal-footer {
border-top: 1px solid #9ea2a2 !important;
}
Thanks in advance !!
Related
I'm trying to hide the slide thumb. I tried to do it without using a library but then I think that it should be better to use material-ui because maybe it would be easier but I'm here asking help.
Here is my code:
import * as React from "react";
import Slider from "#mui/material/Slider";
import "./style.css";
export default function ContinuousSlider() {
const [value, setValue] = React.useState(30);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<Slider
aria-label="Volume"
value={value}
onChange={handleChange}
focusVisible={false}
/>
);
}
style:
.MuiSlider-thumb {
background-color: orange;
box-shadow: none;
width: 0px;
height: 0px;
}
.MuiSlider-rail {
background-color: orange;
border: none;
}
.MuiSlider-track {
background-color: red;
border: none;
}
.MuiSlider-rail {
background-color: green;
}
working code here
result:
on focus
I was able to hide the main thumb but not the "secondary thumb". I don't know how to call it, the light blue one that appears clicking on the thumb.
How can I remove it?
I want the following style always, even when user drag the thumb:
You could add style override for hover (pseudo-class) and active state (for MUI it is .Mui-active)
.MuiSlider-thumb:is(:hover, .Mui-active) {
display: none;
}
Demo
Currently, I am using the React-bootstrap ProgressBar in my code in the following way:
<ProgressBar now={20} className="green-progress-bar" height="1px" style={{ height: "30.82px", margin:"10px 0px 10px 0px"}}/>
And in my CSS file, I have something like this:
.green-progress-bar .progress-bar{
height: 100%;
border: 1px solid #FFFFFF;
border-radius: 19.5px;
padding-right: 5px;
// I am aware I can do background-color: green;
// but I want to change it within the JS file
}
I would like to change the colour of the actual bar itself, but my attempts don't seem to be working.
For example, I tried:
<ProgressBar now={20} className="green-progress-bar" height="1px" style={{ height: "30.82px", margin:"10px 0px 10px 0px", "background-colour":"green"}}/>
But this just seems to be changing the outer ProgressBar container as opposed to the actual bar.
Here is a link to the documentation page.
NOTE: I am aware that I can put something like background-color: green; in my CSS file, but I am looking for a solution that changes it within the JS file so that I can later use a variable to change the bar colour.
If you have ref to your bar component you can find it's child by class and then change its color.
useEffect(() => {
if (ref.current) {
const inner = ref.current.querySelector(".progress-bar");
if ( inner ) {
inner.style.backgroundColor = "green";
}
}
}, [ref]);
<ProgressBar ref={ref} now={20} /* other stuff */ />
I want to achieve an effect like this one
in a React webpage but without using jQuery. I've looked for alternatives to that library, but without results. I've seen a lot of similar questions, but each of them are answered using jQuery.
The effect is basically changing the color of the logo (and other elements in the page) as I scroll down through different sections.
Does anyone know a way to achieve this?
A way this could be done is by centering the logo's to their own containers dynamically, kinda like simulating position fixed, but using position absolute, so each logo is contained in their own section, and not globally like position fixed would do.
This way when you scroll to the next section, the second section covers the first section making it look like its transitioning.
I created a proof of concept here:
https://codesandbox.io/s/9k4o3zoo
NOTE: this demo is a proof of concept, it could be improved in performance by using something like request animation frame, and throttling.
Code:
class App extends React.Component {
state = {};
handleScroll = e => {
if (!this.logo1) return;
const pageY = e.pageY;
// 600 is the height of each section
this.setState(prevState => ({
y: Math.abs(pageY),
y2: Math.abs(pageY) - 600
}));
};
componentDidMount() {
window.addEventListener("scroll", this.handleScroll);
}
render() {
const { y, y2 } = this.state;
return (
<div>
<section className="first">
<h1
className="logo"
style={{ transform: `translateY(${y}px)` }}
ref={logo => {
this.logo1 = logo;
}}
>
YOUR LOGO
</h1>
</section>
<section className="second">
<h1
className="logo"
style={{ transform: `translateY(${y2}px)` }}
ref={logo => {
this.logo2 = logo;
}}
>
YOUR LOGO
</h1>
</section>
</div>
);
}
}
CSS would be:
section {
height: 600px;
width: 100%;
position: relative;
font-family: helvetica, arial;
font-size: 25px;
overflow: hidden;
}
.first {
background: salmon;
z-index: 1;
}
.first .logo {
color: black;
}
.second {
background: royalBlue;
z-index: 2;
}
.second .logo {
color: red;
}
.logo {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 230px;
height: 30px;
}
I have a navigation bar for my webapp with the following css setup:
.navigation {
background: white;
display: flex;
height: 5em;
align-items: center;
padding: 0px 2em;
color: blue;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.075em;
border-bottom: 1px solid #E6E6E6;}
My issue is on mobile, my tabs in the navigation bar get all squeezed together. Is there a way in React that I can detect the width of the page and collapse all my navigation tabs into a dropdown menu? Or is this a CSS thing?
You could handle this in CSS, using proper media queries.
But if you prefer to do it with React, here is how you can implement it, listening to the window "resize" event:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
layoutMode: this.getLayoutMode(),
};
this.onResize = this.onResize.bind(this);
}
componentDidMount() {
window.addEventListener('resize', this.onResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResize);
}
onResize() {
this.setState({
layoutMode: this.getLayoutMode(),
});
}
getLayoutMode() {
return window.innerWidth > 1000 ?
'desktop'
: 'mobile';
}
render() {
return this.state.layoutMode === 'desktop' ? (
<NavigationBar />
) : (
<DropdownMenu />
);
}
}
Seriously, your best option is css. Let react focus on the structure of your DOM and on the interaction. Let css take care of styling.
So you can keep your react code simple like this:
render() {
var myMenu = ['Home','Settings','About us', 'Other stuff'];
return (
<div>
<button className='hamburger'>m</button>
<ul className='menu'>
{myMenu.map(item => {
return <MenuItem key={item} text={item}/>
})}
</ul>
</div>
);
}
And do the styling stuff in css (code below with Sass):
ul.menu
position: absolute
display: flex
flex-direction: row
width: 100%
li.menu-item
flex: 1 0 auto
padding: 10px
margin: 2px
background-color: grey
text-align: center
li.menu-item:hover
background-color: blue
button.hamburger
display: none
padding: 10px
margin: 2px
background-color: grey
#media screen and (max-width : 760px)
ul.menu
flex-direction: column
display: none
li.menu-item
background-color: orange
button.hamburger
display: block
position: absolute
button.hamburger:focus + ul.menu
display: flex
You can find a working demo in codepen here.
If you want to render a drop-down menu on mobile, here's one strategy:
Listen for media query changes in React: http://krasimirtsonev.com/blog/article/Using-media-queries-in-JavaScript-AbsurdJS-edition.
Use that listener to update this.state on the component (ex: this.state.isMobile).
Render different Navigation components based on the media query conditional (ex: this.state.isMobile ? <Navigation type="mobile" /> : <Navigation type="desktop" />).
I'm currently building a mobile-focused React.js application that relies quite heavily on form inputs. A major recurring headache for me has been that on a text input that brings up the virtual keyboard (both on Android and iOS) resizes, or more specifically "squishes" the screen and the elements within it as well, which ends up adversely affecting my intended design aesthetic and also negatively impacts the accessibility/viewability of the app itself by making elements usually smaller and harder to both see and interact with:
Example Before Picture
Example After Virtual Keyboard Pops Up
Notice how the inner placeholder text also shrinks on top of the input element being moved down. This is also true for the text I would type in. The heading has been moved up out of view almost entirely and I would have to physically scroll up to see it again.
I have tried to implement a solution similar to this one, but unfortuantely this is not preventing the window from lengthening as it does in the second picture from my app. Here is the relevant code snippet from my Html.js file:
class Html extends Component {
static propTypes = {
assets: PropTypes.object,
component: PropTypes.object,
store: PropTypes.object
}
constructor(props) {
super(props);
this.state = {
windowHeight: 0,
windowWidth: 0
}
}
handleResize(e) {
window.resizeTo(this.state.windowWidth, this.state.windowHeight);
}
componentDidMount() {
this.setState({
windowHeight: window.innerHeight,
windowWidth: window.innerWidth
}, window.addEventListener('resize', this.handleResize.bind(this)));
}
I also don't believe that I should set any CSS property like min-height on the main container, because I'd like this app to be as device-agnostic as possible, but I went ahead and did that for the input elements themselves.
Here is the HTML/JSX code for the element shown above:
<div className={styles.strains}>
<h1>{this.props.options[0]}</h1>
<div className="tagsDiv">
<TagsInput
ref="tags"
placeholder={this.props.options[1]}
className={styles2}
maxTagLength="30"
beforeTagAdd={this.handleBeforeTagAdd.bind(this)}
/>
<button onClick={this.onChange.bind(this)} disabled={this.state.unknown}>Add</button>
</div>
<Checkbox options={this.state.cbOptions} onChange={this.handleUnknown.bind(this)} />
</div>
The CSS behind it:
input:not([type=range]):not([type=checkbox]) {
border: .25vh solid $activeElement !important;
border-radius: 1vh;
font-size: 3.5vh;
padding-left: 3%;
min-height: 60px !important;
font-weight: 300;
outline: none;
}
.tagsDiv {
position: absolute;
max-height: 45vh;
}
.react-tagsinput {
position: absolute;
bottom: 25vh;
left: 10vw;
height: 37.25vh;
max-width: 80vw;
}
.react-tagsinput-input {
position: absolute;
text-indent: 1vw;
left: 2vw;
bottom: 7.5vh;
min-width: 55vw;
max-width: 55vw;
min-height: 60px !important;
}
Many thanks in advance to anyone who tries their hand at this!