so here's the problem
i want to align my buttons , in the div
here the result
my view
i've tried some css but it dont work
now i am not using any custom css for this div
here's my blade file
<td>
<div class="container">
<form method="POST" action="{{ route('users.destroy',$user->id) }}">
{{ csrf_field() }}
{{ method_field('delete') }}
{{-- <!–– //With the <a> tag you are sending a get request.
that's why we changed it like that because the destroy method require a DELETE request
thank you stackoverflow you saved me ––> --}}
<button type="submit" class="btn btn-danger" ><i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</form>
<a href="{{ route('users.show',$user->id) }}"><button type="button" class="btn btn-primary"><i class="fa fa-info-circle" aria-hidden="true"></i></button>
<a href="{{ route('users.edit',$user->id) }}"> <button type="button" class="btn btn-warning"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>
</div>
</td>
Add text-nowrap class to the form, and they will be in one line.
Related
I have a problem.
I'm using a button in an a tag and I want the button clickable area to be the same as its container a. How can I do it?
Here an example of my code:
<a class="btn btn-success btn-sm btn-block"><i class="fa fa-user"></i> LOGIN
<button id="btnLogin" type="submit" class="btn btn-success btn-sm btn-block" runat="server" onserverclick="btnLogin_ServerClick">
</button>
</a>
EDIT:
Tried the height and width 100%, here's what happens:
Small rect. is the button
You can achieve your approach by moving the content <i class="fa fa-user"></i> LOGIN to be inside button tag.
Note : you can't using button element inside anchor element, it isn't valid HTML5 according to the HTML5 Spec Document from W3C
<a class="aan btn btn-success btn-sm btn-block">
<button id="btnLogin" type="submit" class="btn btn-success btn-sm btn-block" runat="server" onserverclick="btnLogin_ServerClick"><i class="fa fa-user"></i> LOGIN</button>
</a>
I have this code in Laravel-5.8:
<i class="fas fa-arrow-right"></i> Submit
That disables a href until when there is no null employee_mid_year_comment fields
How do I transform the same code for submit button shown below?
<form action="{{ route('post.selfreview.all'" method="post" class="form-horizontal" enctype="multipart/form-data">
{{csrf_field()}}
<button type="submit" class="btn btn-primary"> <i class="fas fa-check"></i> Submit</button>
</form>
Thanks
Instead of adding a class on the button, you can use same ternary condition to add disabled property to your button, like this:
<form action="{{ route('post.selfreview.all'" method="post" class="form-horizontal" enctype="multipart/form-data">
{{csrf_field()}}
<button type="submit" class="btn btn-primary" {{ (! $goals->pluck('employee_mid_year_comment')->contains(null)) ? '' : 'disabled' }}> <i class="fas fa-check"></i> Submit</button>
</form>
As any Button has a disabled attribute all you can do is
<form action="{{ route('post.selfreview.all'" method="post" class="form-horizontal" enctype="multipart/form-data">
{{csrf_field()}}
<button type="submit" class="btn btn-primary" {{ (! $goals->pluck('employee_mid_year_comment')->contains(null)) ? '' : 'disabled' }}> <i class="fas fa-check"></i> Submit</button>
</form>
Add disabled attribute in button
<button {{ (! $goals->pluck('employee_mid_year_comment')->contains(null)) ? '' : 'disabled' }} type="submit" class="btn btn-primary">
<i class="fas fa-check"></i> Submit
</button>
I was following a tutorial online to try and create a delete modal from Bootstrap, but it is not picking up on the userid from my users table. The users table is stored on a sql database.
I keep getting the error: jinja2.exceptions.UndefinedError: 'list object' has no attribute 'id'
I have tried looking at similar questions on the stackoverflow site but I am unable to get this working, as I am still learning code and struggling with relating the answers to my setup.
Thanks in advance for anyone that can help.
So below is my delete function.
#app.route("/user/<int:user_id>/delete", methods=['POST'])
#login_required
def delete_user(user_id):
user = User.query.get_or_404(user_id)
db.session.delete(user)
db.session.commit()
flash('The account has been deleted', 'success')
return redirect(url_for('view_user'))
Then this is my html page.
{% extends "layout.html" %}
{% block content %}
<div class="container">
<div class="table-wrapper">
{% with messages = get_flashed_messages(with_categories=true)%}
{% if messages%}
{% for category, message in messages %}
<div class="alert alert-{{category}}">
{{ message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<div class="table-title">
<div class="row">
<div class="col-sm-8">
<h2>User Account <b>Details</b></h2>
</div>
<div class="col-sm-4">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" class="form-control" placeholder="Search…">
</div>
</div>
</div>
</div>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>#</th>
<th>Username<i class="fa fa-sort"></i></th>
<th>Email Address<i class="fa fa-sort"></i></th>
<th>Role<i class="fa fa-sort"></i></th>
<th>Actions</th>
</tr>
</thead>
{% for user in user %}
<tbody>
<tr>
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.role}}</td>
<td>
<a href="{{url_for('update_user', user_id=user.id)}}" class="edit" title="Edit"
data-toggle="tooltip"><i class="fas fa-edit"></i></a>
<button type="button" class="btn btn-danger btn-sm m-1" data-toggle="modal" data-target="#deleteModal">Delete</button>
</td>
</tr>
</tbody>
{% endfor %}
</table>
<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Delete User?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<form action="{{ url_for('delete_user', user_id=user.id) }}" method="POST">
<input class="btn btn-danger" type="submit" value="Delete">
</form>
</div>
</div>
</div>
</div>
<div class="clearfix">
<div class="hint-text">Showing <b>5</b> out of <b>25</b> entries</div>
<ul class="pagination">
<li class="page-item disabled"><i class="fa fa-angle-double-left"></i></li>
<li class="page-item">1</li>
<li class="page-item">2</li>
<li class="page-item active">3</li>
<li class="page-item">4</li>
<li class="page-item">5</li>
<li class="page-item"><i class="fa fa-angle-double-right"></i></li>
</ul>
</div>
</div>
{% endblock content %}
Just in case it is needed this is my user table
class User(db.Model, UserMixin):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(80), nullable=False, unique=True)
email = db.Column(db.String(80), nullable=False, unique=True)
password = db.Column(db.String(120), nullable=False)
role = db.Column(db.String(80))
<form action="{{ url_for('delete_user', user_id=user.id) }}" method="POST">
<input class="btn btn-danger" type="submit" value="Delete">
</form>
user is python list so you can't able to use here that is why you are getting this error, so inorder to delete specific user you should use one user's route then you can deal with that user.
or
<td>
<i class="fas fa-edit"></i>
<button type="button" class="btn btn-danger btn-sm m-1" data-toggle="modal" data-target="#deleteModal">Delete</button>
</td>
change to
<td class="btn btn-danger" onclick="return confirm('Are you to delete this user?')">Drop</td>
and remove the whole model.
This one will help you to have default model instread of Bootstrap model
Hope that will help you
I'm using django for templates. Here is the base:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<main role="main" class="container">
<div class="pb-2 mb-2">
{% block page_header %}{% endblock page_header %}
</div>
<div class="mt-1 border-top">
{% block content %}{% endblock content %}
</div>
</main>
When the page_header div is given the class border-bottom, the border appears at the bottom of the contents instead of the page_header, not separating the two divs at all. When the content div is given the class attribute border-top, the contents are clearly separated from the page_header by a line. Why doesn't this occur with border-bottom?
page_header, plugged into the {% block page_header %}
<h2 class="d-inline">Topic: Private</h2>
<p class="ml-3 d-inline">Entries:</p>
<p class="alert-gray rounded p-1 pl-2 pr-2 d-inline border-0">2/3</p>
<a class="btn btn-gray p-2 ml-5 d-inline" href="/edit_topic/13/">
<i class="fas fa-edit"></i>
Edit topic name
</a>
<form class="ml-5 d-inline" action="/delete_topic/13/" method='post' title="Delete Topic">
<input type="hidden" name="csrfmiddlewaretoken" value="">
<button class="btn btn-red p-2" name="submit">
<i class="fas fa-minus-circle"></i>
Delete topic
</button>
</form>
<div class="btn-group dropright ml-5 d-inline" title="Visibility">
<button type="button" class="btn btn-primary btn-md rounded-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-eye-slash"></i>
</button>
<div class="dropdown-menu w-10">
<form class="dropdown-item" action="/topic_visibility/13/0" method='post' title="Private">
<input type="hidden" name="csrfmiddlewaretoken" value="">
<button class="dropdown-button" name="submit">
<i class="far fa-eye-slash"></i>
</button>
</form>
<form class="dropdown-item" action="/topic_visibility/13/1" method='post' title="Public">
<input type="hidden" name="csrfmiddlewaretoken" value="">
<button class="dropdown-button" name="submit">
<i class="far fa-eye"></i>
</button>
</form>
</div>
It was due to an un-closed div tag.
Feels pretty lame.
This:
%input{:type => "Submit"}
%a.btn
%i.icon-search.icon-white
generates this :
<input type="Submit">
<a class="btn">
<i class="icon-search icon-white"></i>
</a>
wheread this:
%div{:type => "Submit"}
%a.btn
%i.icon-search.icon-white
generates this:
<div type="Submit">
<a class="btn">
<i class="icon-search icon-white"></i>
</a>
</div>
How do I get:
<input type="Submit">
<a class="btn">
<i class="icon-search icon-white"></i>
</a>
</input>
??
Thanks
<input type="Submit">
<a class="btn">
<i class="icon-search icon-white"></i>
</a>
</input>
this markup is not valid as per W3C
Input is single line tag which closes like this <input type="button" />
You can't put any of child element for Input tag
If you want to do same stuff with button tag then you can do
%button{type="button"}
%a.btn
%i.icon-search.icon-white
you will get
<button class="btn btn-primary" type="button">
<a class="btn">
<i class="icon-search icon-white"></i>
</a>
</button>