style isolated using .form-container
6a9bd59dd504263ad08436a7d95aa2b3dd6b17a4
4 files changed
WebFormBuilder/formConfigData.jsonWebFormBuilder/wwwroot/Index.htmlWebFormBuilder/wwwroot/script.jsWebFormBuilder/wwwroot/styles.css
diff --git a/WebFormBuilder/formConfigData.json b/WebFormBuilder/formConfigData.json
index 029f621..13b50cb 100644
--- a/WebFormBuilder/formConfigData.json
+++ b/WebFormBuilder/formConfigData.json
@@ -62,6 +62,7 @@
"Name": "remark",
"Label": "Remark",
"Tooltip": "Any remarks to be made, do it here.",
+ "Properties": [ "rows=4" ],
"Value": "1\n2\n"
},
{
diff --git a/WebFormBuilder/wwwroot/Index.html b/WebFormBuilder/wwwroot/Index.html
index 0485ce0..39a6374 100644
--- a/WebFormBuilder/wwwroot/Index.html
+++ b/WebFormBuilder/wwwroot/Index.html
@@ -9,7 +9,7 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
- <div id="form-container"></div>
+ <div id="form1" class="form-container"></div>
<script src="script.js" defer></script>
</body>
</html>
diff --git a/WebFormBuilder/wwwroot/script.js b/WebFormBuilder/wwwroot/script.js
index d8a1d4c..eb09ce5 100644
--- a/WebFormBuilder/wwwroot/script.js
+++ b/WebFormBuilder/wwwroot/script.js
@@ -70,10 +70,10 @@ function toPascalCase(str)
.replace(/(^\w|[\s-_]+\w)/g, match => match.replace(/[\s-_]/, '').toUpperCase());
}
-async function generateForm()
+async function generateForm(formId)
{
const formConfig = await fetchFormConfig();
- const formContainer = document.getElementById("form-container");
+ const formContainer = document.getElementById(formId);
const form = document.createElement("form");
form.id = "dynamicForm";
@@ -91,7 +91,6 @@ async function generateForm()
formContainer.appendChild(form);
}
-const NoFor = ['hidden', 'reset', 'submit', 'checkbox', 'radio'];
function generateField(field, wrapper)
{
if (field.Type === "hidden")
@@ -258,5 +257,5 @@ function createButtonOrHidden(field)
}
-generateForm();
+generateForm("form1");
diff --git a/WebFormBuilder/wwwroot/styles.css b/WebFormBuilder/wwwroot/styles.css
index ed77d77..6bbf941 100644
--- a/WebFormBuilder/wwwroot/styles.css
+++ b/WebFormBuilder/wwwroot/styles.css
@@ -1,8 +1,15 @@
-*
+html
{
+ box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after
+{
+ box-sizing: inherit;
margin: 0;
padding: 0;
- box-sizing: border-box;
font-family: Arial, sans-serif;
}
@@ -15,7 +22,7 @@ body
background: #f4f4f9;
}
-#form-container
+.form-container
{
width: 100%;
max-width: 400px;
@@ -25,185 +32,185 @@ body
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
-form
-{
- display: flex;
- flex-direction: column;
- gap: 1.5rem;
-}
-
-label
-{
- display: block;
- font-weight: bold;
- margin-bottom: 0.5rem;
- color: #333;
-}
-
-input:not([type="file"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]), select, textarea
-{
- width: 100%;
- padding: 0.75rem;
- border: 1px solid #ccc;
- border-radius: 4px;
- font-size: 1rem;
- color: #555;
- background: #f9f9f9;
- transition: all 0.3s ease;
-}
-
- input:focus,
- select:focus,
- textarea:focus
+ .form-container form
{
- border-color: #007bff;
- outline: none;
- background: #fff;
- box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
}
-input[type="color"]
-{
- height: 2.7rem;
- padding: 0 !important;
-}
-
-input[type="radio"],
-input[type="checkbox"]
-{
- margin-top: 1rem;
- margin-right: 0.5rem;
- transform: scale(1.2);
-}
+ .form-container label
+ {
+ display: block;
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+ color: #333;
+ }
-input[type="file"],
-input[type="button"],
-button
-{
- padding: 0.75rem;
- font-size: 1rem;
- font-weight: bold;
- color: #fff;
- background: #007bff;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- transition: all 0.3s ease;
-}
+ .form-container input:not([type="file"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]), select, textarea
+ {
+ width: 100%;
+ padding: 0.75rem;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ font-size: 1rem;
+ color: #555;
+ background: #f9f9f9;
+ transition: all 0.3s ease;
+ }
- input[type="button"]:focus,
- input[type="file"]:hover,
- button:hover
+ .form-container input:focus,
+ select:focus,
+ textarea:focus
+ {
+ border-color: #007bff;
+ outline: none;
+ background: #fff;
+ box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+ }
+
+ .form-container input[type="color"]
{
- background: #0056b3;
+ height: 2.7rem;
+ padding: 0 !important;
}
-input[type="file"]
-{
- appearance: none;
- -webkit-appearance: none;
-}
+ .form-container input[type="radio"],
+ input[type="checkbox"]
+ {
+ margin-top: 1rem;
+ margin-right: 0.5rem;
+ transform: scale(1.2);
+ }
- input[type="file"]::-webkit-file-upload-button
+ .form-container input[type="file"],
+ input[type="button"],
+ button
{
- appearance: none;
- background: transparent;
+ padding: 0.75rem;
+ font-size: 1rem;
+ font-weight: bold;
+ color: #fff;
+ background: #007bff;
border: none;
- border-right: solid 2px white;
- font: inherit;
+ border-radius: 4px;
cursor: pointer;
- color: white;
+ transition: all 0.3s ease;
}
-div
-{
- display: flex;
- flex-direction: column;
-}
+ .form-container input[type="button"]:focus,
+ input[type="file"]:hover,
+ button:hover
+ {
+ background: #0056b3;
+ }
-.radio-group,
-.checkbox-group
-{
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- gap: 1rem;
- align-items: center;
-}
+ .form-container input[type="file"]
+ {
+ appearance: none;
+ -webkit-appearance: none;
+ }
+
+ .form-container input[type="file"]::-webkit-file-upload-button
+ {
+ appearance: none;
+ background: transparent;
+ border: none;
+ border-right: solid 2px white;
+ font: inherit;
+ cursor: pointer;
+ color: white;
+ }
+
+ .form-container div
+ {
+ display: flex;
+ flex-direction: column;
+ }
- .radio-group > div,
- .checkbox-group > div
+ .form-container .radio-group,
+ .form-container .checkbox-group
{
display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 1rem;
align-items: center;
- gap: 0.5rem;
}
-button[type="submit"],
-button[type="reset"]
-{
- margin-top: 0.1rem;
-}
+ .form-container .radio-group > div,
+ .form-container .checkbox-group > div
+ {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
-.tooltip-wrapper
-{
- display: inline-block;
- margin-left: 0.5rem;
- position: relative;
- cursor: pointer;
- vertical-align: baseline;
-}
+ .form-container button[type="submit"],
+ button[type="reset"]
+ {
+ margin-top: 0.1rem;
+ }
-.tooltip-icon
-{
- display: inline-flex;
- justify-content: center;
- align-items: center;
- width: 18px;
- height: 18px;
- border-radius: 50%;
- background-color: #007bff;
- color: #fff;
- font-size: 12px;
- font-weight: bold;
- line-height: 1;
- vertical-align: middle;
- transform: translateY(-2px);
-}
+ .form-container .tooltip-wrapper
+ {
+ display: inline-block;
+ margin-left: 0.5rem;
+ position: relative;
+ cursor: pointer;
+ vertical-align: baseline;
+ }
-.tooltip-text
-{
- visibility: hidden;
- width: 250px;
- background-color: #333;
- color: #fff;
- text-align: center;
- border-radius: 4px;
- padding: 0.5rem;
- position: absolute;
- z-index: 1;
- bottom: 125%;
- left: 50%;
- margin-left: -100px;
- opacity: 0;
- transition: opacity 0.3s;
-}
+ .form-container .tooltip-icon
+ {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ background-color: #007bff;
+ color: #fff;
+ font-size: 12px;
+ font-weight: bold;
+ line-height: 1;
+ vertical-align: middle;
+ transform: translateY(-2px);
+ }
-.tooltip-wrapper:hover .tooltip-text
-{
- visibility: visible;
- opacity: 1;
-}
+ .form-container .tooltip-text
+ {
+ visibility: hidden;
+ width: 250px;
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ border-radius: 4px;
+ padding: 0.5rem;
+ position: absolute;
+ z-index: 1;
+ bottom: 125%;
+ left: 50%;
+ margin-left: -100px;
+ opacity: 0;
+ transition: opacity 0.3s;
+ }
-textarea
-{
- width: 100%;
- padding: 0.75rem;
- border: 1px solid #ccc;
- border-radius: 4px;
- font-size: 1rem;
- color: #555;
- background: #f9f9f9;
- transition: all 0.3s ease;
- resize: vertical;
-}
+ .form-container .tooltip-wrapper:hover .tooltip-text
+ {
+ visibility: visible;
+ opacity: 1;
+ }
+
+ .form-container textarea
+ {
+ width: 100%;
+ padding: 0.75rem;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ font-size: 1rem;
+ color: #555;
+ background: #f9f9f9;
+ transition: all 0.3s ease;
+ resize: vertical;
+ }