I have this code which is a React app :
import React, { Component } from 'react';
import Select from './components/Select/Select';
class App extends Component {
state = {
Type: [
{value: 'test 1', name: 'Test 1'},
{value: 'test 2', name: 'Test 2'},
{value: 'test 3', name: 'Test 3'},
],
};
render () {
return (
<>
<Select list={[...this.state.Type]}/>
<Select list={[...this.state.Type]}/>
<Select list={[...this.state.Type]}/>
</>
);
}
}
export default App;
Also I have the code for my component Select :
import React from "react";
const selectoption = ({ list }) => (
<select className="custom-select">{list.map(option => (<option key={option.value} value={option.value}>{option.name}</option>))}
</select>
);
export default selectoption;
I got this :
But I would like to have this :
I mean I want the 3 select wrap content.
Also,
I don't know how to do this but when I reduce the size I got this :
whereas I would like to have this :
Do you know how can I do this easily ?
Thank you very much !!!
NB : my code is there :https://codesandbox.io/s/nameless-wood-83cg3?file=/src/App.js
The window.innerWidth property gives the viewport width. If it is less than 500, the user is using a mobile phone. Using this information you can implement conditional styles that result in the page being responsive.
Just with CSS here. You only need to wrap these Selectcomponents with a div then styling it.
<div className="wrapper">
<Select list={[...this.state.Type]} />
<Select list={[...this.state.Type]} />
<Select list={[...this.state.Type]} />
</div>
In styles.css:
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
width: 100%;
}
or another way you want
Don't forget to import the CSS file into the App component
import "./styles.css";
Bootstrap 4 has built-in classes that will produce your desired responsive behavior.
The HTML:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<body style="padding: 1rem">
<div class="container-fluid">
<div class="row">
<select class="custom-select col-md-4">
<option value="test 1">Test 1</option>
<option value="test 2">Test 2</option>
<option value="test 3">Test 3</option>
</select>
<select class="custom-select col-md-4">
<option value="test 1">Test 1</option>
<option value="test 2">Test 2</option>
<option value="test 3">Test 3</option>
</select>
<select class="custom-select col-md-4">
<option value="test 1">Test 1</option>
<option value="test 2">Test 2</option>
<option value="test 3">Test 3</option>
</select>
</div>
</div>
</body>
The equivalent JSX would be:
<div className="container-fluid">
<div className="row">
<Select className={"custom-select col-md-4"} list={[...this.state.Type]} />
<Select className={"custom-select col-md-4"} list={[...this.state.Type]} />
<Select className={"custom-select col-md-4"} list={[...this.state.Type]} />
</div>
</div>
Note that you also need to link the bootstrap css, in your index.html file (if you have one).
Related
i have two product cards each have it's own category like color,size,etc and each have add to cart button. im using useRef() hook to get the selected category by user. and console it, when i click add to cart button.the problem is im only getting the second product category selected by the user whenever i press both buttons. please do check the code below.feel free to ask for any clarification.
import "./Card.css";
import { useRef } from "react";
function Card() {
const colorRef = useRef();
const quantityRef = useRef();
const sizeRef = useRef();
const submitHandler = (event) => {
event.preventDefault();
const selectedColor = colorRef.current.value;
const selectedQuantity = quantityRef.current.value;
const selectedSize = sizeRef.current.value;
const selectedData = {
color: selectedColor,
quantity: selectedQuantity,
size: selectedSize
};
console.log(selectedData);
};
return (
<div className="main-container">
<div className="container">
<div className="image-container">
<img
src="https://images.pexels.com/photos/9558601/pexels-photo-9558601.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
</div>
<h2> T-Shirt </h2>
</div>
<form className="form-conatiner" onSubmit={submitHandler}>
<div className="selectors">
<p>Solid Round Neck T-shirt</p>
<select id="color" ref={colorRef} name="color" required>
<option>Color</option>
<option value="black">Black</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
</select>
<select ref={quantityRef} name="qantity" required>
<option>Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select ref={sizeRef} name="size" required>
<option>Size</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="small">Small</option>
</select>
<div>
<button>Add to Cart</button>
</div>
</div>
</form>
<div className="container">
<div className="image-container">
<img
src="https://images.pexels.com/photos/440320/pexels-photo-440320.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
</div>
<h2> i-Watch </h2>
</div>
<div className="form-conatiner">
<div className="selectors">
<p>Dizo watch with amlod </p>
<select id="2" ref={colorRef} name="color" required>
<option>Brand</option>
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Pixel">Pixel</option>
</select>
<select ref={quantityRef} name="qantity" required>
<option>Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select ref={sizeRef} name="size" required>
<option>size </option>
<option value="29mm">29mm</option>
<option value="34mm">34mm</option>
<option value="42mm">42mm</option>
</select>
<div>
<button onClick={submitHandler}>Add to Cart</button>
</div>
</div>
</div>
</div>
);
}
export default Card;
You are using same ref with different elements,so it will have reference to last element,to which it is passed, That's why you always get second product's references
You should try using ref array like this
const colorRef = useRef([]);
const quantityRef = useRef([]);
const sizeRef = useRef([]);
and pass it this way (here is for one product)
<select id="color" ref={(el)=>{colorRef.current.push(el)}} name="color" required>
<option>Color</option>
<option value="black">Black</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
</select>
<select ref={(el)=>{quantityRef.current.push(el)}} name="qantity" required>
<option>Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select ref={(el)=>{sizeRef.current.push(el)}} name="size" required>
<option>Size</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="small">Small</option>
</select>
and then use it like this way in you submit handler
const submitHandler = (event) => {
event.preventDefault();
const selectedColor1 = colorRef.current[0].value;
const selectedColor2 = colorRef.current[1].value;
const selectedQuantity1 = quantityRef.current[0].value;
const selectedQuantity2 = quantityRef.current[1].value;
const selectedSize1 = sizeRef.current[0].value;
const selectedSize2 = sizeRef.current[1].value;
const selectedData1 = {
color: selectedColor1,
quantity: selectedQuantity1,
size: selectedSize1
};
const selectedData2 = {
color: selectedColor2,
quantity: selectedQuantity2,
size: selectedSize2
};
console.log(selectedData1);
console.log(selectedData2);
};
A working codesandbox is here.
A good and sort read Here. Hope this will help.
That is an expected behaviour. The ref is going to be assigned to the first element and then to the second one. That is why you're getting always the last.
Second one, you're wrapping only one element with the form tag.
For this you should use useState hook and the onChange for the inputs. Let's say:
function Card() {
const [firstElement, setFirstElement] = useState({})
const [secondElement, setSecondElement] = useState({})
const handleFirstElementChange = (key, event) => {
setFirstElement((oldState) => ({ ...oldState, [key]: event.target.value }))
}
const submitHandler = (event) => {
event.preventDefault();
console.log(firstElement, secondElement);
};
return <>
<h2>T-shirt</h2>
<select id="color" required onChange={(event) => handleFirstElementChange('color', event)>
<option>Pick a color</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="red">Ref</option>
</select>
</>
}
I'm trying to have any option within my select input to be set as a value in an object. I'm trying to use v-model for this purpose but I'm not exactly sure how. Below is what I've tried to do so far.
<div class="select-wrapper">
<select required name="category" id="category" #change="(e) => $emit('input', e.target.value)">
<option value="" selected="selected">Category*</option>
<option value="attendee">Attendee</option>
<option value="distributor">Distributor</option>
<option value="sponsor">Sponsor</option>
<option value="media/analyst">Media/Analyst</option>
<option value="university">University</option>
<option value="other">Other</option>
</select>
</div>
Need a prop to bind the selected value and pass that prop to v-model. E.g.
<template>
<div>
<pre>category = {{ category }}</pre>
<select required name="category" id="category" v-model="category">
<option value="">Category*</option>
<option value="attendee">Attendee</option>
<option value="distributor">Distributor</option>
<option value="sponsor">Sponsor</option>
<option value="media/analyst">Media/Analyst</option>
<option value="university">University</option>
<option value="nxp">NXP</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
category: null
};
}
};
</script>
Edit: plunker
You should add value prop to your component :
<div class="select-wrapper">
<select required name="category" id="category" #change="(e) => $emit('input', e.target.value)">
<option value="" selected="selected">Category*</option>
<option value="attendee">Attendee</option>
<option value="distributor">Distributor</option>
<option value="sponsor">Sponsor</option>
<option value="media/analyst">Media/Analyst</option>
<option value="university">University</option>
<option value="other">Other</option>
</select>
</div>
<script>
export default {
props:value
};
</script>
and use it in parent component like :
<my-select v-model="category"/>
...
<script>
export default {
data() {
return {
category: ''
};
}
};
</script>
I have the following code in Angular 5:
<select class="abc" (change)="items($event)" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
When a user selects any particular of the above option, the focus goes onto the selected option. I'm trying to get any selected option out of focus(after the user selects any option) and would to like to shift focus on a different element of the DOM(if required).
I tried getElementById with focus() but it doesn't seem to work.
items(event)
{
ABC Code;
Shifting focus code goes here;
}
Here is a working solution in Angular way using Renderer2
HTML:
<select class="abc" (change)="change()" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="text" id="myInput">
<input type="text">
Component:
import { Component, Renderer2 } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
constructor(public renderer2: Renderer2){
}
change(){
let onElement = this.renderer2.selectRootElement('#myInput');
onElement.focus();
}
}
Here is a working DEMO
Suppose your different element is this:
<input type="text" #inputText>
Then you can try this:
<select class="abc" (change)="inputText.focus()" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
This is standard Javascript and as you can see it works, if you have an error you need to provide a sandbox reproducing the said error. Pseudo-code isn't enough to identify the issue.
function focusInput(value) {
document.querySelector('input#input-' + value).focus();
}
<select onchange="focusInput(this.value)" palceholder="select an input to focus">
<option value="0">Input 0</option>
<option value="1">Input 1</option>
<option value="2">Input 2</option>
</select>
<input type="text" id="input-0" placeholder="Input 0" style="display: block;">
<input type="text" id="input-1" placeholder="Input 1" style="display: block;">
<input type="text" id="input-2" placeholder="Input 2" style="display: block;">
I am using Materialize CSS for my application,using media queries i am making my queries responsive.Select Dropdown we are not able to select any option,in laptop it is working fine but in tablet and mobile view it is not working..Can anyone help?
<div class="input-field col s12 newid m6 l6">
<select>
<option value="" disabled selected>All</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Data</label>
#media screen and (max-width: 320px) {
.newid { width: 96%!important;
margin-top: 8%!important;
margin-left: 0%!important;
}
}
I think you have missed to initialization for select to your
javaScript. You can try this for your Select Option Using Materialize
css.
$(document).ready(function(){
$('select').formSelect();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<div class="container">
<h5>materialize Select Option. </h5>
<div class="input-field">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
Did you initialize the dropdown menu in your JavaScript? Many of the components that are part of Materialize CSS have to be initialized in order to function on the web page?
The code should be something like this
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems, options);
});
I've a two static div tags, inside that I have one select tag and one text box with different ID's. So when I clone the tag, it just adds the same div tag to the DOM, but how can I change the inner DOM elements tag?
Here is my code
<div id="masterGrade" style="border-style: solid; width: 200px">
<select id="selectGrade1">
<option value="grade1">Grade 1</option>
<option value="grade2">Grade 2</option>
<option value="grade3">Grade 3</option>
<option value="grade4">Grade 4</option>
</select>
<input type="text" id="text1"/>
</div>
<div style="border-style: solid;width: 200px">
<select id="selectGrade2">
<option value="grade1">Grade 1</option>
<option value="grade2">Grade 2</option>
<option value="grade3">Grade 3</option>
<option value="grade4">Grade 4</option>
</select>
<input type="text" id="text2"/>
</div>
My JS code
$scope.addGrade = function() {
var div = document.getElementById('masterGrade'),
clone = div.cloneNode(true);
clone.id = "some_id";
document.body.appendChild(clone);
}
Any ideas would be greatly appreciated.
Mixing DOM api with angular is not a best practice. You must do it angular way(ng-repeat)
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.grades = [{}];
$scope.addGrade = function() {
$scope.grades.push({});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<button ng-click='addGrade()'>Add</button>
<div style="border-style: solid; width: 200px" ng-repeat='grade in grades'>
<select ng-model='grade.list'>
<option value="grade1">Grade 1</option>
<option value="grade2">Grade 2</option>
<option value="grade3">Grade 3</option>
<option value="grade4">Grade 4</option>
</select>
<input type="text" ng-model='grade.text' />
</div>
{{grades}}
</div>
Fiddle Demo
Edit: To deal with the index, use $index, The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.grades = [{}];
$scope.addGrade = function() {
$scope.grades.push({});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<button ng-click='addGrade()'>Add</button>
<div style="border-style: solid; width: 200px" ng-repeat='grade in grades'>
<label for="select{{$index}}">Grade {{$index}}:</label>
<select id='select{{$index}}' ng-model='grade.list'>
<option value="grade1">Grade 1</option>
<option value="grade2">Grade 2</option>
<option value="grade3">Grade 3</option>
<option value="grade4">Grade 4</option>
</select>
<br>
<label for="text{{$index}}">Text{{$index}}:</label>
<input id='text{{$index}}' type="text" ng-model='grade.text' size='10' />
</div>
{{grades}}
</div>
Fiddle Demo