I'm playing with foundation framework and i'm trying to make a simple login form with it.
Here's my markup
<form>
<div class="row">
<div class="large-4 columns">
<div class="panel">
<div class="row">
<div>
<label>Login: <input type="text" placeholder="Login">
</div>
</div>
<div class="row">
<div>
<label>Senha <input type="password">
</div>
</div>
<div class="row">
<input type="submit" value="OK" class="tiny button right">
Esqueci minha senha
</div>
</div>
</div>
</div>
</form>
But at the bottom of it, there's some space created.
How can i remove this space?
The space you are talking about is created by the buttons bottom margin. To remove it simply add a CSS class like such:
.panel .button { margin-bottom: 0; }
Working example: JSFIDDLE
Related
I have that html code:
<form id="my-form" method="POST" action="{% url 'my_view' %}">
{% csrf_token %}
<div class="row">
<div class="col-md-6">
<div class="md-form mb-1">
<textarea id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-1">
<textarea id="message_then" name="message_then" rows="2" class="form-control md-textarea"></textarea>
</div>
</div>
</div>
<div class="text-center text-md-left">
<a class="btn btn-primary" onclick="document.getElementById('my-form').submit();" style="width: 78px;" name="name1">Click1</a>
</div>
<div class="text-center text-md-left">
<a class="btn btn-primary" onclick="document.getElementById('my-form').submit();" style="width: 78px;" name="name2">Click2</a>
</div>
</form>
Now I would like to get to know which "button" was clicked. Unfortunately request.POST doesn't have that information.
You should add another field to specify which button has been clicked.
Exp:
Add this to your form
then update your "a" elements onclick event code like this:
<a class="btn btn-primary" onclick="update_form(this)" style="width: 78px;">Click1</a>
And finally some js code to update the form
<script>
function update_form(button){
document.getElementById("id_button").value = document.getElementById(button).innerText;
document.getElementById('my-form').submit();
}
</script>
In your django view use this to get the selected button:
request.POST['id_button']
I need some help connecting a button which pops up a modal to submit form.
this is my html before the modal (works fine and another page is rendered after button is clicked)
<div class="container my-container">
<h3>
Let's get started
</h3>
<div class="row my-row">
<h4>1. CSV file</h4>
</div>
<div class="row my-row">
<h4>2. There should be only two columns</h4>
</div>
<div class="row my-row">
<form method="post" enctype="multipart/form-data">
{%csrf_token%}
<input type="file" name="document"><br>
<button type="submit"> Submit</button>
</form>
</div>
</div>
I have added the modal but I now have a couple of issues
<div class="container my-container">
<div class="row my-row">
<h3>
Let's get started
</h3>
</div>
<div class="modal fade" id="demo123">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">
<span>
×
</span>
</button>
<div class="modal-header">
<h2 class="modal-title">
Confirm upload
</h2>
</div>
<div class="modal-body">
<p>this is the file name</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Confirm
</button>
</div>
</div>
</div>
</div>
<div class="row my-row">
<h4>1. CSV file</h4>
</div>
<div class="row my-row">
<h4>2. There should be only two columns titled</h4>
</div>
<div class="row my-row">
<form method="post" enctype="multipart/form-data">
{%csrf_token%}
<input type="file" name="document"><br>
<button class="btn btn-primary" data-toggle="modal" data-target="#demo123">
Submit
</button>
</form>
</div>
</div>
First issue I have is the "submit" button automatically makes the upload(renders to another page). How can I make so only if "confirm" button is the one which actually submits the form (if "x" then pop-up closes). Also how can I display the filename in the pop-up?
I use django with bootstrap 4
You have to use Javascript and since Bootstrap uses jQuery, you'll have to create that logic using Javascript and jQuery.
Handle the dialog confirm button click and only then trigger a form submit event.
Handle modal show event show.bs.modal and set the dialog filename element if there is a file selected and enable the confirm button; if there is no file selected, message the user about it using the same filename element and disable the confirm button so the user can't click it.
You can run the code snippet and test the whole functionality. On form submission we cancel the event and print a message in the console just for demonstration.
Please read inline comments
jQuery(function($) {
// Handle form submit.
// This won't be necessary unless you want some custom behavior.
// Here we just cancel the form submission and just display a message for demonstration
$('#uploadForm').on('submit', function(e) {
console.log('The form is submitting; preventing event for demonstration');
e.preventDefault();
});
// Handle dialog confirm button click.
$('#confirmUpload').on('click', function(e) {
// Submit the form and hide the dialog when confirm clicked
$('#demoModal123').modal('hide');
$('#uploadForm').submit();
});
// When the dialog is about to show, check if the user has selected a file.
// If they have, update dialog filename element and enabled the confirm button,
// else message user that there is no file and disable the confirm button
$('#demoModal123').on('show.bs.modal', function() {
let files = document.getElementById('documentFile').files;
let fileSelected = files && files[0];
if (fileSelected) {
$('#demoModal123 .filename').text(fileSelected.name);
$('#confirmUpload').prop('disabled', false);
} else {
$('#demoModal123 .filename').text('No file selected');
$('#confirmUpload').prop('disabled', true);
}
});
// Update file input group control label on file selection
$('#documentFile').on('change', function() {
$('#documentFileName').text(this.files[0].name);
});
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container my-container">
<h3>Let's get started</h3>
<div class="row my-row">
<h4>1. CSV file</h4>
</div>
<div class="row my-row">
<h4>2. There should be only two columns</h4>
</div>
<div class="row my-row">
<form method="post" enctype="multipart/form-data" id="uploadForm">
<!-- {%csrf_token%} -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" name="documentFile" id="documentFile">
<label class="custom-file-label" id="documentFileName" for="documentFile">Choose file</label>
</div>
</div>
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#demoModal123">Submit</button>
</form>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="demoModal123">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="exampleModalLabel">Confirm upload</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="filename">this is the file name</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="confirmUpload">Confirm</button>
</div>
</div>
</div>
</div>
To be able to act Confirm button as only submission, you'll have to add type="submit" in Confirm button and type="button" in Submit button. Like this:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo123">
Submit
</button>
<button type="submit" class="btn btn-secondary" data-dismiss="modal">
Confirm
</button>
Might anyone have any idea how to auto-adjust the height of textarea to fill the rest of the space vertically? The easy way is to hard code the style of textarea with height: 300px or something but that is hardly a workable solution in production.
Here is the of my html. Thanks
<body>
<div class="app-page" data-page="home">
<div class="app-topbar">
<div class="app-title">Mobile Email Client</div>
</div>
<div class="app-content">
<div class="app-section">
<div class="app-button" data-target="emailEditor">Compose Email</div>
</div>
</div>
</div>
<div class="app-page" data-page="emailEditor">
<div class="app-topbar">
<div class="app-title"><span class="app-icon"></span>Email Editor</div>
<div class="left app-button" data-back>QUIT</div>
</div>
<div class="app-content">
<div class="app-section" id="editorStatus"></div>
<div class="app-section">
<input class="app-input" id="emailFrom" placeholder="From">
</div>
<div class="app-section">
<input class="app-input" id="emailTo" placeholder="To">
</div>
<div class="app-section">
<input class="app-input" id="emailSubject" placeholder="Subject">
<textarea class="app-input" id="emailMessage" placeholder="Message" rows="10"></textarea>
<div class="app-button green app-submit" id="emailSend">Send</div>
</div>
</div>
</div>
In App.js apparently setting rows="10" attribute for <textarea> is not enough. The <textarea> must also be given a CSS height: auto;
This still does NOT enable you to fill the remainder of the screen dynamically for any sized screens.
I'm new to foundation and am trying to create a centralized form that has inline labels, I've looked at the example:
<form>
<div class="row">
<div class="small-8">
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right inline">Label</label>
</div>
<div class="small-9 columns">
<input type="text" id="right-label" placeholder="Inline Text Input">
</div>
</div>
</div>
</div>
</form>
How would I go about centering the form on the page? I know you can add...
small-centered
...to a div, Ive tried this on:
<div class="small-8 small-centered">
But no luck.
Try adding text-align:center; to .row in which you wanna center things. it really helps.
thanks.
Here is my form:
<form>
<div class="row">
<div class="small-12 medium-6 small-centered columns">
<div class="row">
<div class="medium-3 columns">
<label for="right-label" class="right inline">Username:</label>
</div>
<div class="medium-9 columns">
<input type="text" id="right-label" placeholder="Username">
</div>
</div>
<div class="row">
<div class="medium-3 columns">
<label for="right-label" class="right inline">Password:</label>
</div>
<div class="medium-9 columns">
<input type="text" id="right-label" placeholder="Password">
</div>
</div>
<div class="row">
<div class="columns">
<input id="checkbox1" type="checkbox" class="right"><label for="checkbox1" class="right">Remember Me</label>
</div>
</div>
<div class="row">
<div class="columns">
<input type="submit" class="button right" value="Log In">
</div>
</div>
</div>
</div>
I have two questions:
The username and password labels sit to the left of the inputs using the right class, how can I switch this off when the screen size is small? I would like the labels to be centered at this break point.
I would like the button to be it's regular size apart from on small, where it should expand to fill the row. how can I do this?
Visibility classes let you show or hide elements based on screen size or device orientation. You can use visibility classes to control which elements users see depending on their browsing environment.
<p class="panel">
<strong class="show-for-small-only">This text is shown only on a small screen.</strong>
<strong class="show-for-medium-up">This text is shown on medium screens and up.</strong>
<strong class="show-for-medium-only">This text is shown only on a medium screen.</strong>
<strong class="show-for-large-up">This text is shown on large screens and up.</strong>
<strong class="show-for-large-only">This text is shown only on a large screen.</strong>
<strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
<strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
<strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong>
</p>
http://foundation.zurb.com/docs/components/visibility.html