I'm using bootstrap on my Symfony app and in my index action, I display a table with all items and two buttons to update or delete an item. In fact I'm not using to buttons I use one button to modify the entity and a form with hidden inputs and the submit button to delete this item.
Currently the submit button is displayed below the update button and what I want is to display the two buttons aligned.
Thanks by advance if you have the solution of my problem
here is my code:
<td>
Modifier
<form action="/app_dev.php/quotes/2/delete">
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
</form>
</td>
first thing I don't understand that why you are using a form. you can easily call the desired URL with a parameter on an onClick event.
But still if it is necessary then you can add a property to form and it's element to be style="display:inline-block;" or can write a separate css.
form {
display:inline-block;
}
this will be helpful
<style>
.div1, .div2{
display: inline-block;
}
</style>
<body>
<td>
<div class="div1">Modifier</div>
<div class="div2"><form action="/app_dev.php/quotes/2/delete">
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
</form></div>
</td>
</body>
HTML
<td class="button-container">
Modifier
<form action="/app_dev.php/quotes/2/delete">
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
</form>
</td>
CSS
.button-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
Additionally, you can make button 100%
.button-container .btn {
width: 100%;
}
You can accomplish that by many ways. One simple form would be to add float: left to the link, like this:
<td>
Modifier
<form action="/app_dev.php/quotes/2/delete" >
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
</form>
</td>
<td class="flex">
Modifier
<form action="/app_dev.php/quotes/2/delete">
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
</form>
</td>
in your css :
.flex {
display: flex;
}
good source for display with flex https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox (in french)
Ok thank you all for your answers, I find out to align those two buttons by using bootstrap flex classes, here the entiere solution:
<td class="d-flex flex-row">
{{ 'wallofquotes.ui.update'|trans }}
<form method="POST" action="{{ path('wallofquotes_quote_delete', {'id': quote.id}) }}">
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-danger">{{ 'wallofquotes.ui.delete'|trans }}</button>
</form>
</td>
Related
I have a form with a button inside it which I need to hide.
<form method="get">
<input type="hidden" name="id" value="7245">
<input type="hidden" name="action" value="removesubmissionconfirm">
<button type="submit" class="btn btn-secondary" title="">Remove submission</button>
</form>
There are multiple forms with the exact same values as the above, the only difference being the value="removesubmissionconfirm". Is it possible to hide the button based on that value using only css?
I've tried a lot of things and nothing seems to work.
TIA.
You can do it using the attribute selector and the + selector :
input[value="removesubmissionconfirm"] + button {
display: none;
}
<form method="get">
<input type="hidden" name="id" value="7245">
<input type="hidden" name="action" value="removesubmissionconfirm">
<button type="submit" class="btn btn-secondary" title="">Remove submission</button>
</form>
Generally no, but it may be in this specific example, considering the fact that the button comes directly after the hidden action field. Try this:
input[value="removesubmissionconfirm"] + button {
display: none;
}
input[value="removesubmissionconfirm"] + button {
display: none;
}
<form method="get">
<input type="hidden" name="id" value="7245">
<input type="hidden" name="action" value="removesubmissionconfirm">
<button type="submit" class="btn btn-secondary" title="">Remove submission</button>
</form>
I have an <input> and <a> elements inside a <div> tag in a table <td> cell, and I want to center them inside that cell. How can I achieve that?
NB: I've tried many things to no avail.
<td>
<div class="row">
<a class="btn btn-warning pull-right" href="****">Edit</a>
<form action="****" method="post" class="pull-right" onSubmit="return confirm('Are you sure you wish to delete?');">
<input type="submit" class="btn btn-danger" value="Delete">
</form>
</div>
</td>
Hi guys so currently i have a simple button in bootstrap which looks like :
class="btn btn-success btn-block btnrec"
I then was trying to make my form buttons look like that, however its not working correctly , anyone know why?
My attempt so far:
<form action="" method="post" enctype="multipart/form-data">
<input class="btn btn-success btn-block btnrec" type="file" name="file">
<input class="btn btn-success btn-block btnrec"type="submit" name="submit">
</form>
As you can see, the submit was works fine, looks like the bootstrap button but the one above, which is the choose file "File not found" etc does not, this for me uploading a pic to the db, but just want to make the buttons look nice :0
Thanks
Tried this:
<form action="" method="post" enctype="multipart/form-data">
<a class='btn btn-primary' href='javascript:;'>
Choose File...
<input type="file" name ="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40" onchange='$("#upload-file-info").html($(this).val());'>
</a>
<input class="btn btn-success btn-block btnrec"type="submit" name="submit">
</form>
Bootstrap distinguishes inputs based on their type. That way it knows to style a [type='text'] differently from a [type='submit']. In this case, Bootstrap doesn't have styling for input[type='file'] built in to the library.
This answer has roughly equivalent styling for that element that you can add yourself.
Following this links examples https://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3
<!-- support IE8 -->
<form action="" method="post" enctype="multipart/form-data">
<span class="btn btn-success btn-block btnrec btn-file">
Upload <input type="file" name="file">
</span>
<input class="btn btn-success btn-block btnrec" type="submit" name="submit">
</form>
<!-- don't care about IE8 -->
<form action="" method="post" enctype="multipart/form-data">
<label class="btn btn-success btn-block btnrec btn-file">
Upload <input style="display: none;" type="file" name="file">
</label>
<input class="btn btn-success btn-block btnrec" type="submit" name="submit">
</form>
<style>
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
</style>
How do I remove the line break between two <input> tags so that two buttons will display on the same line?
<td colspan="1" style="width:1%;padding-left:50px;">
<div style="display:inline-block">
<input type="submit" name="btnEdit" id="btnEdit" class="btn btn-success" style="width:50px;" value="Edit" />
<input type="submit" name="btnEdit" id="btnDel" class="btn btn-success" style="width:50px;" value="Del" />
#*<button type="submit" name="btnEdit" id="btnEdit" class="btn btn-success" style="width:50px;">Edit</button>
<button type="submit" name="btnDel" id="btnDel" class="btn btn-danger" style="width:50px;">Del</button>*#
</div>
</td>
The <input> and <button> elements are inline (inline-block) level by default - MDN, so they should be aligned next to each other, and there is no <br> between them in your code snippet.
As far I as see the problem is likely to be the width:1% on the container <td>, which makes it to not have enough room for the buttons to grow. The answer is simple: increase the container's width. Although, you can also use white-space: nowrap; if necessary.
Side note, ID must be unique on a page. You use id=btnEdit and id=btnDel multiple times there, it's likely to cause trouble later, so better to fix that too.
div{
display:inline-block
}
input,button {
width: 30px;
height: 30px;
background-color: #aaa;
color: white;
border: none;
}
<td colspan="1" style="width:1%;padding-left:50px;">
<div>
<input type="submit" name="btnEdit" id="btnEdit" class="btn btn-success" style="width:50px;" value="Edit" />
<input type="submit" name="btnEdit" id="btnDel" class="btn btn-success" style="width:50px;" value="Del" />
<button type="submit" name="btnEdit" id="btnEdit" class="btn btn-success" style="width:50px;">Edit</button>
<button type="submit" name="btnDel" id="btnDel" class="btn btn-danger" style="width:50px;">Del</button>
</div>
</td>
I have 2 buttons and I want them in the same line.
The buttons come one below the other because one is inside an <a> element and one is inside a form
Here is the code
<button class="btn btn-default">Update Contact</button>
<form action="" method="post">
{% csrf_token %}
<button type="submit" class="btn btn-default">Delete Contact</button>
</form>
How can I get them in the same line?
Fiddle - http://www.bootply.com/114827
It's very easy you just need to float them or put them as inline or inline block, or whatever element that contains them (that would be cleaner):
http://www.bootply.com/114841
In this particular case:
a, form{
float: left;
}
or
a, form{
display: inline-block;
}
Read about the differences here: https://stackoverflow.com/a/11823622/463065
Just use float:left; on the buttons
Css:
button {float:left;}
DEMO
Use an "inline" CSS class:
HTML:
<a href="update/">
<button class="btn btn-default">Update Contact</button>
</a>
<form action="" method="post" class="inline">
<button type="submit" class="btn btn-default">Delete Contact</button>
</form>
CSS:
.inline {
display: inline-block;
}
Example:
http://www.bootply.com/114837