Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

fix: Some forms on the new 'Form Elements' page don't lay out neatly … (#2444)

Browse Source 
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
This commit is contained in:
Koray Tuncer
2025-07-23 20:12:47 +03:00
committed by GitHub
parent 4b65380293
commit bd35fd39cf
3 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/twelve-tables-attack.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/preview": patch
---
Fix responsive layputs in 'Form Elements' page

20
preview/pages/form-elements.html
View File

@@ -45,7 +45,7 @@ permalink: form-elements.html
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="card"> <div class="card h-100">
<div class="card-body"> <div class="card-body">
<h3 class="card-title">Project ID</h3> <h3 class="card-title">Project ID</h3>
<p class="card-subtitle">Used when interacting with the API.</p> <p class="card-subtitle">Used when interacting with the API.</p>
@@ -80,13 +80,13 @@ permalink: form-elements.html
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-12 col-lg-4">
{% include "cards/form/layout.html" %} {% include "cards/form/layout.html" %}
</div> </div>
<div class="col-lg-4"> <div class="col-lg-8">
<div class="row row-cards"> <div class="row row-cards">
<div class="col-12"> <div class="col-12 col-lg-6">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Input mask</h3> <h3 class="card-title">Input mask</h3>
@@ -127,8 +127,8 @@ permalink: form-elements.html
</div> </div>
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12 col-lg-6">
<form class="card"> <form class="card h-100">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">My Profile</h3> <h3 class="card-title">My Profile</h3>
</div> </div>
@@ -168,9 +168,9 @@ permalink: form-elements.html
</div> </div>
</div> </div>
<div class="col-lg-8"> <div class="col-lg-12">
<div class="row row-cards"> <div class="row row-cards">
<div class="col-12"> <div class="col-12 col-lg-6">
<form class="card"> <form class="card">
<div class="card-body"> <div class="card-body">
<h3 class="card-title">Edit Profile</h3> <h3 class="card-title">Edit Profile</h3>
@@ -250,8 +250,8 @@ But that's the difference in our opinions.</textarea>
</div> </div>
</form> </form>
</div> </div>
<div class="col-12"> <div class="col-12 col-lg-6">
<div class="card"> <div class="card h-100">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">HTTP Request</h3> <h3 class="card-title">HTTP Request</h3>
</div> </div>

5
shared/includes/cards/form/layout.html
View File

@@ -1,5 +1,5 @@
{% assign horizontal = include.horizontal | default: false %} {% assign horizontal = include.horizontal | default: false %}
<form class="card"> <form class="card h-100">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3> <h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
</div> </div>
@@ -64,6 +64,9 @@
</label> </label>
</div> </div>
</div> </div>
</div>
<div class="card-footer">
<div class="text-end"> <div class="text-end">
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</div> </div>