I am using <style jsx> in Next JS to style my components. When that code is compiled #media query isn't executed successfully.
Here is my <style jsx> part of the code
.post__card .summary {
width: 351px;
}
#media screen and(max-width: 1142px) {
.post__card .summary {
width: 80%;
}
}
When code is compiled I have jsx-2993501484 post__card and jsx-2993501484 summary and JS is looking for
#media screen and(max-width:1142px) {
.post__card.jsx-2993501484 .summary.jsx-2993501484 {
width: 80%;
}
}
(see image below)
But for some reason style from #media-query is not applied to the element. That part of CSS is not even available in Inspect element in the browser
System information
OS: Manjaro Linux
Browser: Chrome
Version of Next.js: ^9.1.8-canary.13
I also asked this question here
This is the current code
#media screen and(max-width: 1142px) {
.post__card .summary {
width: 80%;
}
}
This is fixed code
#media screen and (max-width: 1142px) {
.post__card .summary {
width: 80%;
}
}
The problem was there there was no space between and and ( in media query.
Related
I have a progressive web app developed in reactjs and in this
I am using banner images which look good on mobile view, but when I switch to laptop view the banner images look big.
I tried to set the height property, but the image looks squeezed on laptop view.
The CSS code for the same is pasted below
banner-container {
padding: 20px;
margin-top: 45px;
.banner-img {
max-width: 100%;
height: auto;
}
}
#media (min-width: 767px) {
.banner-container {
padding: 20px;
margin-top: 200px !important;
max-width: 100%;
.banner-img {
width: 100%;
height: auto;
max-height: 300px;
}
}
}
What is the best way to display banner images which look good on both laptop and mobile view
You can easily manage your banner image with this css property:
object-fit: contain
Or you can look into different values of object-fit in this doc:
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
I have the requirement to expand the lightning component on whole screen.
I tried the css but that's not worked. But None of them working
.maincontent{
height: 100%;
background-color: deepskyblue;
}
html, body { height: 100%; }
body { background-color: deepskyblue; }
Please suggest the way to achieve it.
Current Page:-
[![Current][1]][1]
Expectation :-
[![Expectation][2]][2]
[1]: https://i.stack.imgur.com/iuI6K.png
[2]: https://i.stack.imgur.com/qLZhs.png
I need to create a "connect the dot" style react component which displays a "map" of dots connected by a "path" advancing through different stages, according to some data defined in a JSON. My problem is not with the programming logic, but how should I draw it, either with html canvas,css,svg or a combination of both:
I already have a component ready with the background, but I don't know how to draw the dots:
Some code:
class MapCanvas extends Component {
render() {
return (
<div className={classNames("exams-map-canvas", this.props.stage)}>
</div>
);
}
}
.exams-map-canvas {
position: relative;
top: 20%;
height: 100%;
margin: 0 auto;
background-size: cover;
border-radius: 10px;
#media (min-width: 700px) {
& {
top: 15%;
height: 550px;
}
}
// Large screen
#media (min-width: 1025px) and (max-width: 1280px) {
& {
height: 550px;
}
}
#media (min-width: 1400px) {
& {
height: 650px;
}
}
#media (min-width: 1700px) {
& {
height: 850px;
}
}
How can I add dots connected by lines to this?
I would use SVG to draw on top of the image. It maps very well with JSX and its quite powerful.
Here is my take on how you could build your components:
https://codesandbox.io/embed/connect-the-dot-style-map-5d7nm
On the example, I took the liberty of modifying the style of the nodes and the links if they were "done".
One thing, whatever you choose to draw on the page, look at the d3 library. It has a ton of helper functions to create designs online. On my example, I am using the d3-scale module to create a scale to map from an arbitrary 0-100 domain to the width and height of the image. Now you can store the relative location of the dots, and adapt them to any map's width and height. You can also play with the SVG viewPort to handle how much to show.
I hope this helps.
class MapCanvas extends Component {
render() {
return (
<div className={classNames("exams-map-canvas", this.props.stage)}>
</div>
);
}
}
.exams-map-canvas {
position: relative;
top: 20%;
height: 100%;
margin: 0 auto;
background-size: cover;
border-radius: 10px;
#media (min-width: 700px) {
& {
top: 15%;
height: 550px;
}
}
// Large screen
#media (min-width: 1025px) and (max-width: 1280px) {
& {
height: 550px;
}
}
#media (min-width: 1400px) {
& {
height: 650px;
}
}
#media (min-width: 1700px) {
& {
height: 850px;
}
}
I am trying to implement PrimeNg Steps in my application. Is there any way to delete or replace the numbering?
PrimeNg doesn't support that.
But you can hide the numbers with css. Add to your root css file the following css:
.ui-steps .ui-steps-number {
display: none;
}
#media (max-width: 40em) {
.ui-steps .ui-steps-item .ui-steps-title {
display: block;
}
}
Working stackblitz example.
I am using react-select dropdown component in my react application. i found one weird issue that when user start typing for searching an item in react-select dropdown, search textbox gets stretch and its not a fixed with dropdown list.
Please see below image.
How can i fix the search textbox width to react-select width?
Just set
autosize={false}
on the component.
I had similar problem. I inspected browser and found out that if I set width to 82%, my problem will be solved. So I added that inside "Select" tag and it works
<Select
value={this.state.passwordExpire}
onChange={this.updatepasswordExpire.bind(this)}
options={optionsDays}
style={{width: '82%'}}
/>
const customStyles={
// control represent the select component
control: (provided)=>({
...provided,
width:'100px'
})
}
<Select
options={options}
styles={customStyles}
></Select>
This method is stated in react-select documentation. You can adjust select width as per your wish.
You can try with this css.
.Select-input {
position: absolute !important;
width: calc(~'100% - 0px');
}
.Select-value-label {
display: none !important;
}
.Select-value {
position: relative !important;
}
.Select-menu-outer {
width: auto;
min-width: 100%;
text-align: left;
}
.Select-option {
white-space: nowrap;
}
.Select-control {
min-width: 100%;
width: auto;
text-align: left;
}
.Select-control {
table-layout: fixed;
}
.Select-input {
overflow: hidden;
max-width: 100%;
}
Here is the Solution..
.Select-input > input {
width: 100% !important;
}
.Select--multi .Select-input {
display: block !important;
}
.Select--multi .Select-multi-value-wrapper {
display: block !important;
}
This is the proper solution in this case. It's working fine.