|
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
|
|
|
|
|
Also, I think the only reason your question was downvoted btw was because it was poorly formatted. You'll probably get more answers if you put just a bit off effort into the question. Just a tip for next time. 
Jeremy Falcon
|
|
|
|
|
I am attempting to add facebook and twitter share button plugins to the pages of a website I am working on. So far I have only added them to three pages because I am having mixed results with functionality on both my local copy of the site and the live version.
In order to generate the code for the facebook share button on each page, I followed the instructions here - https://developers.facebook.com/docs/plugins/share-button.
In order to generate the code for the Twitter share button, I followed the instructions here https://publish.twitter.com/#
For both the facebook and twitter share buttons I generated the code using the urls of the live site and pasted that code in both the relevant live and local pages.
The code generated and embedded in the divs "shares" and "share-box" is as follows:
<pre><!--
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v16.0" nonce="bZ0Vs3J7"></script>
<div id = "shares">
<!--
<div class = "share-box">
<div class="fb-share-button"
data-href="https://superspreads.co.uk/superspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html"
data-layout="button"
data-size="small">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsuperspreads.co.uk%2Fsuperspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a>
</div>
</div>
<!--
<div class = "share-box ">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw"
class="twitter-share-button"
data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
Opera is the only browser that tolerates the plugins on both a local copy of the site and the live version
In firefox, the local copy of the site tolerates both the plugins and they work as intended. That is clicking the "share" or "tweet" buttons activates the relevant plugin and provides the opportunity to share the chosen url on facebook and twitter respectively. The information in the page specific open grapgh tags and twitter meta tags are collected also.
As you hover over the facebook button, prior to clicking, the code that will be parsed is:
https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&sdk=joey&u=https://superspreads.co.uk/superspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html&display+popup&ref=plugin&src=share_button
As you hover over the twitter button, prior to clicking, the code that will be parsed is:
https://twitter.com/intent/tweet?ref_src=twsrc^tfw|twcamp^buttonembed|twterm^share|twgr^&text=Areas I cover| Plasterer | Super Spreads - Dewsbury - West Yorkshire&url=https://superspreads.co.uk/superspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html
With the live site, firefox shows the anchor text for each button, "Share" and "Tweet", when the page is first loaded, but not the graphics for each button. When the page is refreashed "Share" dissappears. "Tweet" remains and the link works to a point but not all the intended code is parsed. The plugin is reduced to providing you a means to tweet something but not share the intended url. Hence as you hover over the twitter anchor text, in this instance, the code that will be parsed is:
https://twitter.com/share?ref_src=twsrc^tfw
chrome and edge behave the same for both the local and live versions of the site: The facebook button functions and displays as intended. The twitter button only displays the link text, "Tweet", and as with the live firefox twitter link, not all the intended code is parsed.
safari struggles to fully load the pages of the local version of the site that have the facebook and twitter plugins code active on them. And won't go beyond the SERP when you click on the live site link there.
Because the plugin code comes from the recommended sources, and has been pasted into the sites html as instructed, I really am at a loss as to how to tackle the problem. Has anyone encountered this before and solved the issue?
I wondered if it might be something to do with my host provider but then the problems are not limited to the live site....
Thanks, in anticipation of your response.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
