We Keep Coding

Is there any way I can fix input tag without using position : fixed?

Hi I am just trying to make some fixed part in my webpage. I want some text, input tag to be fixed. But when I wrote a code like down below, I get to know that I can't type in text field.
I don't know why I can't.
Does anybody know Why is this happening and how can I fulfill my goal?
thankyou
import React from "react";
import { Container, Row } from "react-bootstrap";
function Introduce(props) {
return (
<div>
<div className="introduceSquare">
<Container fluid>
<Row>
<h1> Meet to Share Emotion</h1>
<h2>Where to go?</h2>
<input
className="code"
autoComplete="on"
placeholder="code door plz"
/>
</Row>
</Container>
</div>
</div>
);
}
export default Introduce;
this is css code
.introduceSquare {
width: 100%;
text-align: center;
position: fixed;
margin-top: 10%;
z-index: -998;
color: #fdfce5;
}

Properties background image not working [React]

I'm trying to set the background image of a div depending on the value of a component property, the background doesn't show, however it does show when I harcode the background-image property in the css file.
Here is the component code :
import React, { Component } from "react";
import "./Banner.css";
export default class Banner extends Component {
render() {
const style = {
backgroundImage: `url("${this.props.image}")`,
};
return (
<div className="banner" style={style}>
Chez vous, partout et ailleurs
</div>
);
}
}
Here is the Banner.css file:
.banner {
/* background-image: url("../assets/images/moutains.png"); */
background-size: cover;
height: 170px;
border-radius: 20px;
text-align: center;
vertical-align: middle;
line-height: 170px;
font-size: 2.5rem;
color: #fff;
}
In the parent component:
<Banner image="../assets/images/moutains.png" text="" />
EDIT: Complete code and assets here: https://github.com/musk-coding/kasa
codesandbox: https://codesandbox.io/s/github/musk-coding/kasa
Thanks in advance for your help

Since, you are trying to access the image directly in your Component using the inline CSS. You must move your image to the public folder.
CODESANDBOX LINK: https://codesandbox.io/s/image-relative-path-issue-orbkw?file=/src/components/Home.js
Code Changes:
export default class Home extends Component {
render() {
const imageURL = "./assets/images/island-waves.png";
return (
<div className="container">
<div className="slogan" style={{ backgroundImage: `url(${imageURL})` }}>
Chez vous, partout et ailleurs
</div>
<Gallery />
</div>
);
}
}
NOTE: From React Docs, you can see the ways to add images in Component. create-reac-app-images-docs. But since you want an inline CSS, in that case we have to move our assets folder into the public folder to make sure that the image is properly referenced with our component.

set styling to div which contain TextInput field

I'm new to react and material ui. I'm using material ui version "1.0.0-beta.17" and react 15.6.2. Also has styled-components 2.0.0 and styled-components-breakpoint 1.0.1.
I have two TextInput fields in a div element.
const mycomponent = ({props}) => {
<div>
<SomeComponent />
<div>
<TextInput id="testId1" />
<TextInput id="testId2" />
</div>
</div>
}
Now when it render, it adds additional parent div to each input fields
Like this,
<div>
<div class="field--testId1">
<div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
<input id="testId1">
</div>
</div>
<div class="field--testId2">
<div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
<input id="testId2">
</div>
</div>
</div>
Now how can I target to the div to apply styles with class name field--testId1, field--testId2.
Here classname are generated by default material ui,
for example
.field--testId2{
width: "48%",
float: "left"
}
.field--testId2{
width: "48%",
float: "left"
}
I'm learning react and material ui so any help is much appreciated.

in order to override an existing class, you can add a styled-component wrapper instead of the wrapping div and override the child classes:
const TextInputWrapper = styled.div`
.field--testId2 {
// your custom styling
}
`
<TextInputWrapper>
<TextInput id="testId1" />
<TextInput id="testId2" />
</TextInputWrapper>

If you want to target div which has input, than you can follow these steps
Add a class to parent div, lets say wrapper
Target the closest div using > css selector
.wrapper > div {
border: 1px solid red;
width: 48%;
float: left;
margin-left: 1%;
}
input {
width: 100%;
box-sizing: border-box;
}
<div class="wrapper">
<div class="field--testId1">
<div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
<input id="testId1">
</div>
</div>
<div class="field--testId2">
<div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
<input id="testId2">
</div>
</div>
</div>

You give class directly to your textfield component and you can add your custom styles.
<TextInput className="your-class" id="testId1" />

You should use #material-ui/styles to extend your component's styles. Take a like at this answer, it's similar to your case: https://stackoverflow.com/a/67512965/8950820. Here is and example:
You should use #material-ui/styles to extend your Text Fields styles like this:
import React from 'react';
import { makeStyles, TextField } from '#material-ui/core';
const useStyles = makeStyles({
textField: {
border: 0,
borderRadius: 3,
padding: '0px 30px',
// Other styles here...
},
});
export default function MyComponent() {
const classes = useStyles();
return (
<div>
<TextField
size="large"
variant="outlined"
label="A text field title"
className={classes.textField}
/>
</div>
);
}
Learn more about the documentation at this link: #material-ui.com/styles

Cannot fit inner image into its parent container on this ReactJS app

I have one very basic ReactJS component called: Designer which displays the Eiffel Tower as well as a bottom panel with some controls in it.
The Designer is inside a div with the following size: { width: 510px, height: 300px}.
The Eiffel Tower image has the following size: { width: 300px, height: 800px}.
This is the current rendered output of the Designer:
But my problem is that the Eiffel Tower image is not getting fit into its parent div.
My goal is what you can see on the following image:
If on the file: /src/CanvasCrop/CanvasCrop we do: let showImage = false;, we get the following:
so, we confirm that its parent div (green background) gets sized accordingly having its own width and height whether the image is getting shown or not.
Here is its source code (original):
/src/CanvasCrop/CanvasCrop:
import React, { Component } from "react";
import "./CanvasCrop.scss";
class CanvasCrop extends Component {
render() {
let showImage = true;
return (
<div className="partial-designer-canvas-crop">
<div>
{
showImage &&
<img
src="https://i.ibb.co/DKxRFtb/image.jpg"
style={{
maxWidth: "100%",
maxHeight: "100%",
transform: "scale(-50%, -50%)"
}}
alt="target"
/>
}
</div>
</div>
);
}
}
export default CanvasCrop;
Here is the outer source code:
/index.js:
import React from "react";
import ReactDOM from "react-dom";
import "./styles.scss";
import Designer from "./Designer/Designer";
function App() {
return (
<div>
<span class="title">Trying to fit Eiffel Tower</span>
<div className="App"
style={{
// keep this as it is
overflow: 'auto',
width: '510px',
height: '300px',
}}
>
<Designer />
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Here you have the CodeSandbox.io you can experiment with:
https://codesandbox.io/s/7jv56qr1yx
Could you please, provide back a fork of the above CodeSandbox.io with the Eiffel Tower fitted into its parent div without setting manually a fixed width / height?
Side note: if instead of a portrait image, we use a landscape image, it should also fit into its parent div without going beyond its limits.
Example image (size: { width: 800px, height: 300px}):
https://i.stack.imgur.com/jUeCD.jpg
Thanks!

If I understand your problem correctly, it looks like you are missing a height: 100% on your .partial-designer-canvas.
Here, try this:
https://codesandbox.io/s/x664y69ow
I only changed src/Canvas/Canvas.scss. You can add a calc to account for your tool bar too, like so:
.partial-designer-canvas {height: calc(100% - 60px)}

How to align the divs/profile cards horizontally in Meteor JS?

Can any one please let me know how can we display the profile cards horizontally in meteor js.
Please find my code below:
import React, { Component, PropTypes } from 'react';
export default class MyProfileCard extends Component {
render() {
return (
<div className="card profile-photo" >
<div className="brand-myImage">
<img src= {this.props.imgSrc ? this.props.imgSrc : "img.jpg"} />
</div>
</div>
)
}
}
DiscoverCard.propTypes = {
imgSrc: PropTypes.string,
};
Thanks in Advance.

You should look at flexible boxes
In your case give the following css a try:
.cardContainer {
display: flex,
flex-direction: row
}
where cardContainer is the class of the div that wraps your component

If you are using Bootstrap then you can simply use rows and columns to align cards horizontally .

Adding the below to my CSS worked for me.
.container {
display:flex;
flex-direction:row;
}
.profile-photo{
float:left;
height:30%;
width:30%;
}
Thanks
...Vamsi.