|
Thank you, Taazaa Inc! Lots of good references!
|
|
|
|
|
learning this concept.
when do i want to use min / max heights / widths?
inside css grid and outside
kindly provide a codpen with some examples
a real world example
thank you
|
|
|
|
|
|
thanks, Richard... my first post here
when there are 2 values say width: min(300px, 500px) 300px is applied because its smallest.
got that
my struggle is understanding when i would want to use a min()?
under what circumstances would a min() or min(300px, 500px) be useful?
my appologies if i am confusing this. it is simply a tough concept for me
maybe go slow for me simplify as much as possible
|
|
|
|
|
You would not choose min(300px, 500px) , as that makes no sense: 300 is always smaller than 500. It is used when you want to select the smallest of a set of different value types. See the example at CSS min() function[^], which will select either 50% of the width of the div element, or 300 pixels if that is smaller. So the selected element will not be larger than 300 pixels wide.
|
|
|
|
|
The reason you got downvoted most likely is that you asked for a lot of work in the reply (real world code examples), but you didn't put a great amount of effort into the question yourself. Remember, we're happy to help but nobody here works for free. Our time is also valuable.
That being said, the most common reason people need to deal with a minimum value of anything in web development is with responsiveness and scaling as a result of it. The browser (and thus viewport) can be resized when using a desktop computer. If the user sizes the browser too small, sometimes you need a guarantee an element/container maintains at least a certain size. Or maybe you want to scale down font size with a smaller viewport while ensuring it doesn't get too small, etc. Whatever the case, responsiveness is the usual reason they are used.
The max size is used less in practice. But sometimes it can useful when going in the opposite direction and making sure things don't scale too large, if say the user is on an 8K display, etc.
Jeremy Falcon
|
|
|
|
|
Jeremy Falcon wrote: but nobody here works for free. ER, quite the opposite really.
|
|
|
|
|
Touché
Jeremy Falcon
|
|
|
|
|
Hello,
I am creating a User registration form using React JS and as I have defined the fields and its validations along with the submit handler, it does not console log Hello World after pressing submit button. It doesn't seem to function at all. I am sharing my code below:
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import "./Userform.css";
import axios from "axios";
function Userform() {
const schema = yup.object().shape({
name: yup.string().required("Name is required"),
dobOrAge: yup.string().required("Age is required"),
sex: yup.string().required("Sex is required"),
mobile: yup
.string()
.matches(
/^[6-9]\d{9}$/,
"Mobile number must be a valid Indian mobile number"
)
.nullable(),
idType: yup.string().required("ID type is required"),
id: yup.string().when("idType", {
is: "Aadhar",
then: yup
.string()
.matches(/^\d{12}$/, "Govt Id must be a valid 12-digit numeric string"),
otherwise: yup
.string()
.matches(
/^[A-Za-z]{5}\d{4}[A-Za-z]{1}$/,
"Govt Id must be a valid 10-digit alpha-numeric string"
),
}),
email: yup.string("Email must be a valid email address").nullable(),
emergencyContactNumber: yup
.string()
.matches(
/^[6-9]\d{9}$/,
"Emergency Contact Number must be a valid Indian mobile number"
)
.nullable(),
guardianTitle: yup.string().nullable(),
guardianName: yup.string().nullable(),
address: yup.string().nullable(),
country: yup.string().nullable(),
state: yup.string().nullable(),
pincode: yup.string().nullable(),
city: yup.string().nullable(),
occupation: yup.string().nullable(),
nationality: yup.string().nullable(),
religion: yup.string().nullable(),
maritalStatus: yup.string().nullable(),
bloodGroup: yup.string().nullable(),
});
const resolver = yupResolver(schema);
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm({
resolver,
});
const [message, setMessage] = useState(null);
const onSubmithandler = (data) => {
console.log(data);
};
return (
<div className="form-container">
<form onSubmit={handleSubmit(onSubmithandler)}>
<div>
<h2 className="form-heading">Personal Details</h2>
<label className="form-label"> Name: </label>
<input
className="form-input"
type="text"
placeholder="Enter your full name"
{...register("name", { required: true })}
/>
{errors.name && <p className="form-error">{errors.name.message}</p>}
</div>
<div>
<label className="form-label">Sex :</label>
<input
className="form-input"
type="text"
{...register("sex", { required: true })}
/>
{errors.sex && <p className="form-error">{errors.sex.message}</p>}
</div>
<div>
<label className="form-label">Mobile:</label>
<input className="form-input" type="text" {...register("mobile")} />
{errors.mobile && (
<p className="form-error">{errors.mobile.message}</p>
)}
</div>
<div>
<label>
ID Type:
<select {...register("idType")}>
<option value="">Select ID Type</option>
<option value="Aadhar">Aadhar</option>
<option value="PAN">PAN</option>
</select>
{errors.idType && <p>{errors.idType.message}</p>}
</label>
<label>
Govt Issued ID:
<input type="text" {...register("id")} />
{errors.id && <p>{errors.id.message}</p>}
</label>
</div>
<h2 className="form-heading">Contact Details</h2>
<div>
<label className="form-label">Email:</label>
<input className="form-input" type="email" {...register("email")} />
{errors.email && <p className="form-error">{errors.email.message}</p>}
<label className="form-label">Emergency contact number:</label>
<input
className="form-input"
type="text"
{...register("emergencyContactNumber")}
/>
{errors.emergencyContactNumber && (
<p className="form-error">
{errors.emergencyContactNumber.message}
</p>
)}
</div>
<div>
<label className="form-label">Guardian Details:</label>
<select className="form-select" {...register("guardianTitle")}>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
</select>
<input
className="form-input"
type="text"
{...register("guardianName")}
/>
{errors.guardianName && (
<p className="form-error">{errors.guardianName.message}</p>
)}
</div>
<h2 className="form-heading">Address Details</h2>
<div>
<label className="form-label">Address:</label>
<input className="form-input" type="text" {...register("address")} />
{errors.address && (
<p className="form-error">{errors.address.message}</p>
)}
<label className="form-label">Country:</label>
<input className="form-input" type="text" {...register("country")} />
{errors.country && (
<p className="form-error">{errors.country.message}</p>
)}
</div>
<div>
<label className="form-label">State:</label>
<input className="form-input" type="text" {...register("state")} />
{errors.state && <p className="form-error">{errors.state.message}</p>}
</div>
<div>
<label className="form-label">Pincode:</label>
<input className="form-input" type="text" {...register("pincode")} />
{errors.pincode && (
<p className="form-error">{errors.pincode.message}</p>
)}
</div>
<div>
<label className="form-label">City:</label>
<input className="form-input" type="text" {...register("city")} />
{errors.city && <p className="form-error">{errors.city.message}</p>}
</div>
<h2 className="form-heading">Other Details</h2>
<div>
<label className="form-label">Occupation</label>
<input
className="form-input"
type="text"
{...register("occupation")}
/>
{errors.occupation && (
<p className="form-error">{errors.occupation.message}</p>
)}
</div>
<div>
<label className="form-label">Religion</label>
<select className="form-select" {...register("religion")}>
<option value="Hindu">Hindu</option>
<option value="Muslim">Muslim</option>
<option value="Christian">Christian</option>
<option value="Sikh">Sikh</option>
<option value="Jain">Jain</option>
<option value="Buddhist">Buddhist</option>
</select>
</div>
<div>
<label className="form-label">Marital status</label>
<select className="form-select" {...register("marital")}>
<option value="Married">Married</option>
<option value="Unmarried">Unmarried</option>
</select>
</div>
<div>
<label className="form-label">Blood Group</label>
<select className="form-select" {...register("blood")}>
<option value="A">A</option>
<option value="B">B</option>
<option value="AB">AB</option>
<option value="O">O</option>
</select>
</div>
<div>
<label className="form-label">Nationality</label>
<input
className="form-input"
type="text"
{...register("nationality")}
/>
{errors.nationality && (
<p className="form-error">{errors.nationality.message}</p>
)}
</div>
<button type="submit">Submit</button>
{message && <p>{message}</p>}
</form>
</div>
);
}
export default Userform;
I am filling in the form but as I submit it is not showing Hello World. Please help as to what should be done.
|
|
|
|
|
Hello friends,
I'm testing sciter (very impressed so far!) for a wrapper around a local intranet web page.
The intranet page's ssl certificate (https://intranet.local) is signed with the local Windows CA; the CA's root certificate is installed in Windows.
When I open the intranet page in Firefox etc. the site's certificate is accepted just fine.
Using scapp.exe with main.html <iframe src="https://intranet.local/"></iframe> it complains about the cerificate and even accepting the cert does not work.
Anything I can do here?
TIA!
|
|
|
|
|
You may have noticed this is a forum for web development. It sounds like you're having issues with a third-party application. If this is what you're referring to, then you may have better luck posting your question in the article's comments.
It could be that this app, scapp.exe, is within a different environment. For instance, you can use curl on Windows, but that doesn't mean it'll use the Windows CA store by default. But again, you'd have better luck asking for help with the author of the application and/or support for the application, rather than asking a general web development forum for help.
Jeremy Falcon
|
|
|
|
|
Hi Jeremy,
thanks for your reply.
Actually, scapp.exe is from the sciter examples itself as referred at https://sciter.com/scapp/
"ScApp – standalone Sciter executable". Sorry for not mentioning that. I suppose it's not a third party app?
What forum do you suggest I can ask for help here?
TIA!
|
|
|
|
|
|
I need to center a text vertically (and horizontally) along the whole page, and for that I need to setup the height property as relative, respectively whole page. I have tried:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</script>
<style>
body {
font-family: Arial;
color: #f9f9ff;
background-color:#293138;
}
.center-text {
height:100%;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
</head>
<body>
<div class="center-text">
Test
</div>
</body>
</html>
How can I achieve this ?
|
|
|
|
|
|
Excellent ! It works. Thanks!
|
|
|
|
|
_Flaviu wrote: How can I achieve this ?
Take you pick: 11 Ways to Center Div or Text in Div in CSS[^]
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
|
|
|
|
|
I have read that post, I didn't noticed any solution with relative height, I've read not very carefully though.
|
|
|
|
|
I’m undergoing an intensive programming boot-camp over 12 weeks. I learned html,css, js,php, react, laravel and nodejs. I need to do a final project over 30 days. Below are the requirements:
Minimum of two user types: admin, user, client, buyer, seller, etc.
Push Notification or Email System
At least two features from the below list:
Chatbot
ChatGPT API
Graphs and Charts
Parallax / Animations
Multi-Language
Multi-Theme
Machine Learning Predications
Data-Related Features.
I’m encouraged to pick up on a project that is not related to Web Development, specifically: Mobile Application,Internet of Things, Arduino, AI…
I need some ideas with chatgpt api integrated into them. For example one of my collogues proposed a smart wallet that takes the user salary, goals and based on that will create a customizable plan, it will use chatgpt to give the user advices and push notifications when he/she purchase stuff that exceeds the budget.
Thanks in advance
|
|
|
|
|
Why pick the ones you don't understand (and which most likely the "teacher" didn't either, at this stage). 30 Days.
"Before entering on an understanding, I have meditated for a long time, and have foreseen what might happen. It is not genius which reveals to me suddenly, secretly, what I have to say or to do in a circumstance unexpected by other people; it is reflection, it is meditation." - Napoleon I
|
|
|
|
|
<pre>How to add horizontal line under DIV</pre>
|
|
|
|
|
|
I never mastered web development, but I did master the horizontal rule.
"Before entering on an understanding, I have meditated for a long time, and have foreseen what might happen. It is not genius which reveals to me suddenly, secretly, what I have to say or to do in a circumstance unexpected by other people; it is reflection, it is meditation." - Napoleon I
|
|
|
|
|
The horizontal rule answer will work perfectly. But, if you don't want to create a separate element (tag) for it, then there is a second way... just use the bottom border on the div tag itself. Divs by default will span 100% of their container, so the net effect would be the same as a hr tag but while keeping the document tree clean.
#with-border {
border-bottom: black 1px solid;
}
<div id="with-border">
Howdy
</div>
Jeremy Falcon
|
|
|
|
|
there is a <hr> html tag for this purpose, and you can further sytle it with CSS if you want.
Vefa
|
|
|
|
|