I am using reactjs-popup and it displays its content. But I am unable to set its width. It is not taking effect for some reason. What am I doing wrong?
I have tried width:'50%' and width:'50px'. But it always displays the popup in a very wide huge rectangle. If I resize the whole browser only then the popup reduces in size.
<Popup style={{width:'50%'}}
open={true}
closeOnDocumentClick
keepTooltipInside=".tooltipBoundary"
>
<div className="modal" style={{display:'flex', background: 'radial-gradient(#cde6f9, #6191bf)'}}>
<a className="close">
×
</a>
<div style={{alignitems: 'center', justifycontent: 'center'}}>
<h4>Enter Project Name : </h4>
<input style={{alignitems: 'center', justifycontent: 'center'}} type="text" name="fname"></input><br/><br/>
<button style={{alignitems: 'center', justifycontent: 'center'}} >Create</button>
</div>
</div>
</Popup>
Assuming that the Popup component comes from an external package, try to read the documentation for more styling options.
You can probably also view the component in node_modules/[package_name] folder. Try giving it a className there or style it using the style property.
Finally, you can try wrapping the popup with another element and capture the style using css.
Something like that:
.popup-wrapper {
width: 100%;
}
.popup-wrapper > * {
width: 50%;
}
You can certainly globally update the content styles as other posts here imply. But if you want to set the style for a specific popup...
If you inspect the <Popup HTML, you will see there are two divs. One has a class defined with popup-content and a second named popup-overlay. You can overwrite the styles here using the contentStyle and overlayStyle attributes of any given <Popup.
For example if you want to change the width of the content:
<Popup
...set other attributes here as needed
contentStyle={{ width: '100%' }}
>
Show this content
</Popup>
Wrap the popup in div and give it a class like modalWrapper.
You can target the main popup container div by using this css.
.modalWrapper > div > div {
width: 484px !important;
padding: 24px !important;
border-radius: 10px;
}
Related
I'm working on a reactJS web app . I get a value from the server , and i want to display it inside a grid item , but the problem is that the value is a long text,the value in my code is {signature} , and when it is displayed it does not fit the screen .
This is my try
<Paper className={classes.paper}>
<Grid container spacing={3} wrap="wrap">
<Grid item xs >
Your Signature:
<div style={{ flexWrap:'wrap' }}>
{signature}
</div>
</Grid>
</Grid>
</Paper>
<Copyright />
This is a screenshot of the result :
This is a simple css issue. You can try this.
<div style={{ maxWidth: '100%', overflow: 'hidden', wordBreak: 'break-all' }}>
You can wrap a long string with no spaces by using word-wrap css property with break-word value. Below is an example using HTML with CSS.
For React style; adapt the below css property to use camel case.
.wrap{
width: 200px;
word-wrap:break-word;
}
<div class="wrap">
oisphfpashdfpiahusdfpiuhapsiduhfpiuasdhfpiuahsdfpihaspiduhfpiasdhfpiuhasdpifuhapisduhfpiahsdfpihaspdifhpiausdhfpisdahfpihdspiuh
</div>
I'm trying to create a chat layout, and i'm having trouble getting the multline in the input box to expand in the same view rather than expanding downwards when typing in the input box and creating a scrollbar. I have added my sample code in the codesandbox link.
https://codesandbox.io/s/solitary-lake-bd85o
Just change the styles of your container <div> element to flex-box and set the max-height.
<div
style={{
maxHeight: "100vh",
margin: 0,
padding: 0,
display: "flex",
flexDirection: "column"
}}
>
// Your chat layout
</div>
With some additional tweaking you will easily get desired outcome.
I can't get the content of my nuka-carousel slides to be the same height. Setting heightMode="max" on the carousel sets the slide heights equal, but trying to expand the slide content isn't working right.
I've tried setting height on the slides to 100%, inherit, 100vh but no matter what, the slides expand to maybe 2-20x what they should be (depending on the div with the most content).
I've also tried using flexbox with flex:1 and I've tried with css-grid. Nothing seems to help
const Item = ({ children }) => (
<div
style={{
boxShadow: "rgb(153, 153, 153) 2px 2px 4px 2px"
// height: "100%"
// height: "100vh"
/// height: 'inherit'
}}
>
{children}
</div>
);
<Carousel
wrapAround
heightMode="max"
slidesToShow={1.25}
cellAlign="center">
{/* Item components with varying content */}
</Carousel>
Here's a codesandbox, If anyone has any suggestions I'd appreciate it.
https://codesandbox.io/s/brave-khorana-bowrz?file=/src/index.js
I need to display styled text inside div.
When doing it hard coded it works, but when using the variable value the style tags are not taking affect.
I tried this way but it didn't help:
<div contentEditable={true} dangerouslySetInnerHTML={{ __html: element.Display }}
style={{ width: '100%', backgroundColor: "lightgray" }}>
{/*{element.Display}*/}
{/*numOf(from(SHOPDB.DB2ADMIN.CLIENT), SHOPDB.DB2ADMIN.CLIENT.<span style={{backgroundColor: '#FFFF00'}}>LAST_NAME</span> = SHOPDB.DB2ADMIN.CLIENT.LAST_NAME) = 1*/}
</div>
References:
Display edited/styled text - react
Rendering raw html with reactjs
In 'Semantic UI React', I want to remove the vertical padding between stacked rows.
Why this inline styling doesn't succeed: style={{ padding: '0rem 0rem !important' }} ?
import React from 'react';
import { Grid, Segment } from 'semantic-ui-react';
function Footer() {
return (
<Grid textAlign="center" stackable>
<Grid.Row
divided
style={{ padding: '0rem 0rem !important' }}
>
<Grid.Column width="two">text_01</Grid.Column>
<Grid.Column width="two">text_02</Grid.Column>
</Grid.Row>
</Grid>
);
}
export default Footer;
(I want the two text elements to be in the middle of the page. On wide screen: next to each other. On small screen: stacked above each other. In both cases, they shouldn't be too far apart from each other, hence no padding. And each text element shouldn't spread over several lines.)
The only solution I found is to edit semantic-ui-css/semantic.css, replacing padding: 1rem 1rem !important (see below) with padding: 0rem 0rem !important. Then importing that CSS file instead of the usual semantic.min.css.
Is this actually an acceptable way of doing?
.ui.stackable.grid > .row > .wide.column,
.ui.stackable.grid > .wide.column,
.ui.stackable.grid > .column.grid > .column,
.ui.stackable.grid > .column.row > .column,
.ui.stackable.grid > .row > .column,
.ui.stackable.grid > .column:not(.row),
.ui.grid > .stackable.stackable.row > .column {
width: 100% !important;
margin: 0em 0em !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 1rem 1rem !important;
}
NB as I've never used Gulp, I don't want to build a custom theme just for this issue.
Answer to myself:
ReactJS "mostly" doesn't support the !important tag within inline styles. Don't use !important inside React inline styles!
probably, learning how to create a custom theme with Gulp would be the way to go.
instead of modifying semantic-ui-css/semantic.css, better create a css file specific to the component you're targetting. In practice:
create myComponent.css in same folder as MyComponent.js, and write your new CSS rules there.
add import ./myComponent.css inside MyComponent.js.
inspect the page with Chrome Developper Tools (for example) and check at the top of the Styles tab which CSS rules currently have highest specificity. The new rule need be more specific. To solve the question, we can add a noPadding class (!important is required to bypass the !important that's already in the existing less-specific rule):
.ui.stackable.grid > .row > .column.wide.noPadding {
padding: 0 !important;
}
inside MyComponent.js, add the corresponding class:
<Grid.Column
width="two"
className="noPadding">
text_01
</Grid.Column>
while creating the new css rules, beware CSS specificity, especially:
context doesn't impact specificity: even if MyComponent is nested within BigComponent.js, this doesn't give higher specificity to MyComponent.
child selector (>) doesn't increase specificity. The number of selectors does impact specificity. See:
CSS: Child selector higher precedence than class selecctor?
for questions regarding semantic-ui-react, best meet the community in their gitter chat room:
https://gitter.im/Semantic-Org/Semantic-UI-React
There's also this https://www.npmjs.com/package/react-with-important-style which looks promising.
See below I have basically replaced Grid.Column (which is notoriously hard to remove the padding) with my Wrapped var which calls withImportantStyle.
var Wrapped = withImportantStyle("div");
var columnStyle = {
padding: "0 !important"
};
var segmentStyleButtons = {
color:"red"
};
return (
<Grid stackable columns={2} reversed="mobile">
<Wrapped className="column" style={columnStyle}>
<Segment>
<List>
<List.Item as='a'>Reset Password</List.Item>
<List.Item as='a'>Resend Confirmation Link</List.Item>
</List>
</Segment>
</Wrapped>
<Wrapped style={columnStyle}>
<Segment style={{ ...segmentStyleButtons, textAlign: "right" }}>
<Button.Group>
<Button primary>Login</Button>
<Button.Or />
<Button secondary>Register</Button>
</Button.Group>
</Segment>
</Wrapped>
</Grid>
);