- Видео 4
- Просмотров 116 354
Tech Care Web
Индия
Добавлен 22 авг 2020
This is a web development tutorial channel for beginners as well as pro's.
All technologies like HTML/CSS, Javascript, java, php, python, node and many more will be featured on this channel.
If you want to learn Web Development in a simple way, then this channel will contribute to your career.
Frontend to Backend will be covered on this channel.
Hang in there for more content.
All technologies like HTML/CSS, Javascript, java, php, python, node and many more will be featured on this channel.
If you want to learn Web Development in a simple way, then this channel will contribute to your career.
Frontend to Backend will be covered on this channel.
Hang in there for more content.
Custom Dropdown using React.js | REACT CUSTOM COMPONENT | #javascript
Custom Dropdown | select using react.js. The following code is available on coding sandbox
link for the sandbox - codesandbox.io/live/3vohdkw
#customComponent #react #html #css #dropdown #customDropdown
link for the sandbox - codesandbox.io/live/3vohdkw
#customComponent #react #html #css #dropdown #customDropdown
Просмотров: 114 772
Видео
Better Button Design | HTML CSS | Transform properties | UI Design 101
Просмотров 2763 года назад
Create a realistic button in HTML and CSS. Using transform properties to give it a 3d look #html #css #html5 #css3 #button #buttonui #buttondesign #cssbuttondesign #cssbutton
Better Card Designs | HTML CSS | Image Card | Smooth Transitions
Просмотров 8123 года назад
Create better card designs using just HTML and CSS. Cards are the most important components of any website. Learn how to make them interactive and format the text in card #card #html #css #design #ui #cardui #carddesign
File Upload and preview using vanilla Javascript and Forms | createObjectURL Method | iframe Tag
Просмотров 5033 года назад
Uploading a file and previewing it in the browser in the iframe tag Using Javascript createObjectURL method to upload file. By the end of this video you will get familiar with handling files on the client side. Concepts Covered - File handling in client side Javascript createObjectURL() method Javascript DOM manupulation and displaying selected file on the DOM PLEASE SUBSCRIBE, LIKE, AND SHARE ...
Perfect video, great tutorial on how to create a custom dropdown
Sandbox link is not working
👍👍👍
Perfect ! Thanks bro
GREAT JOB! WORTH THE SUBSCRIBE! GOOD DAY..
i absolutely cannot stand the fact that they are moving lines for no reason, and cant even put a text explanation to what they are moving and to where. I have rewatched this section of the tutorial 15 times and im about to decide its pointless.
I'll be updating the video soon, it's quite outdated.
thanks so much bro for this helpfull tutorial .
thnq
Hello it's been 2 years since this but this video just saved my job, Please can anyone help with adding a reset button, so selection can be cleared instead of refreshing the browser
Thanks man, keep up the good work!
It seems like this session (Codesandbox) doesn't exist or has been closed
It has been a year and its still a really good tutorial
precise and up to the point thank you.!
Hey how I can use the same drop-down but with different information ? Amazing video 😊
Thank you so much sir ❤️
code is not working.
nice
clicking outside is unsolved...
I'll make a new video soon to cover that as well. For now you can use a hook by mantine-ui called use-outside-click
Super!!!!
kind of css carret <div class='carret'> </div> .carret{ transition: all .2s; position: relative; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #ddd; } just stick it inside the dropdown-btn :)
3:39 as a miracle the carret appeared lol
I want to place two dropdowns placed side by side. Can you please tell me how to do that. Thank you.
thanks for the awesome video
i cant use it twice pls help
Great job! Thank you very much <3
Sandbox link is not working
Can i get the link of the whole code..!!it would be helpful
in what time did you add an arrow?
What happens if I use this as a dynamic component and it is at the bottom of viewport. I want the dropdown to open at top. I have been looking for this solution for over a week.
You can assign a ref to the drop-down element and check for getBoundingClientRect()
sandbox link is not working
thank you sir video is awesome thx for help
nice
i can not see the code
thankyou so much sir
I'd manipulate opacity/visibility with transition by adding/removing classes instead of conditionally rendering.
Yes, you can do that as well.
made my day, thanks a lot
the easiest solution out of hundreds.. KEEP UP THE GOOD WORK
how did you get drop down arrow beside "Choose One" for bold property. Am I missing anything please let me know.
see some video on react-icons you will get an clear idea then
what about choose one it is not displaying in dropdown because it should display by default right
<span className="fas fa-caret-down"></span> add this under {selected} in App.js
Hi how do you handle click outside with the code in the vid
He doesn't handle it.
It's cool! ) Thanks )
instead of using 95% width you can use box sizing border-box 5:41
Thank you for the correction 👍
Hell yeah ! Give me full control of my css do not give them the control with their buggy <form classname="container"> <select classname="styleWontWorkHereMustUseStyle API in Select v2"> <label>. Anyone having problems with the <span classname=''fa fsa-caret-down "> just use <FontAwesomeIcon icon={faCaretDown} size={"lg"} color={"black"}/> instead of the span and add these 2 imports import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' import { faCaretDown } from '@fortawesome/free-solid-svg-icons' (you will also have to install 3 font-awesome packages) Love💕 the music
Thanks!
Welcome!
The sandbox link is not working
codesandbox.io/s/jolly-proskuriakova-pj2tk
@@techcareweb6613 thank you, please put this in the description for others too