Flex / Grid layouts not working on button or fieldset elements
Last Updated :
27 Mar, 2023
This article will explore why Flex and Grid layouts do not work on button and fieldset elements, and how we can overcome this issue. Flex and Grid layouts are powerful CSS tools used for designing responsive and dynamic web pages. However, these layouts may not work as expected on certain HTML elements, including buttons and fieldset. This is because these elements have their own default styling that may conflict with the Flex and Grid layouts.
Syntax:
// To apply a Flex layout to an element
.element {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
// To apply a Grid layout to an element
.element {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
Approach 1: Override default styling: We can use CSS to override the default styling of the button and fieldset elements and apply the Flex and Grid layouts to them. For example:
button, fieldset {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border: none;
padding: 0;
margin: 0;
background-color: transparent;
}
Example: Applying Grid layout to a fieldset element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Grid Layout on Fieldset Element</title>
<style>
fieldset {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
padding: 20px;
background-color: lightgreen;
border-radius: 5px;
border: none;
width: 100%;
}
legend {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
label {
font-size: 18px;
font-weight: bold;
margin-right: 10px;
}
input {
padding: 5px;
font-size: 16px;
border-radius: 5px;
border: none;
}
</style>
</head>
<body>
<fieldset>
<legend>Personal Information</legend>
<label>Name:</label>
<input type="text">
<label>Email:</label>
<input type="email">
<label>Phone:</label>
<input type="text">
<label>Address:</label>
<input type="text">
<label>City:</label>
<input type="text">
<label>State:</label>
<input type="text">
<label>Zip Code:</label>
<input type="text">
</fieldset>
</body>
</html>
|
Output:
Explanation: In this example, we have a fieldset element that contains some labels and input fields for collecting personal information. We apply a Grid layout to the fieldset element with two columns of equal size and a gap of 20 pixels between them.
Approach 2: Wrap inside a container element
We can wrap the button and fieldset elements inside a container element, and apply the Flex and Grid layouts to the container element. For example:
<div class="container">
<button>Submit</button>
<fieldset>
<legend>Personal Information</legend>
<label>Name:</label>
<input type="text">
<label>Email:</label>
<input type="email">
</fieldset>
</div>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
Example: Applying Flex layout to a fieldset element wrapped inside a container element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Flex Layout on Fieldset Element</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
background-color: lightgreen;
padding: 20px;
border-radius: 10px;
border: none;
}
fieldset {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: white;
border-radius: 5px;
border: none;
width: 100%;
}
legend {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
label {
font-size: 18px;
font-weight: bold;
margin-right: 10px;
}
input {
padding: 5px;
font-size: 16px;
border-radius: 5px;
border: none;
}
</style>
</head>
<body>
<div class="container">
<fieldset>
<legend>Personal Information</legend>
<label>Name:</label>
<input type="text">
<label>Email:</label>
<input type="email">
</fieldset>
<fieldset>
<legend>Payment Information</legend>
<label>Card Number:</label>
<input type="text">
<label>Expiry Date:</label>
<input type="text">
<label>CVC:</label>
<input type="text">
</fieldset>
</div>
</body>
</html>
|
Output:
Explanation: In this example, we have a container element with a class of “container” that wraps two fieldset elements. We apply a Flex layout to the container element with a column direction and center alignment. We then use a Flex layout for each fieldset element with a row direction and space-between justification, which aligns the labels and input fields evenly along the horizontal axis with some space in between. We also apply some styling to the fieldset, legend, label, and input elements to make them look good and improve readability.
Share your thoughts in the comments
Please Login to comment...