I have a situation here and perhaps solution is simple but I can't find a way out until now so I need some help.
I have this HTML code:
<div class="modal fade in" id="selectFabricante" tabindex="-1" role="dialog" aria-labelledby="selectFabricante" aria-hidden="false" data-backdrop="static" style="display: block; padding-right: 17px;"><div class="modal-backdrop fade in" style="height: 611px;"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
<h4 class="modal-title">Seleccione uno o más fabricantes</h4>
</div>
<div class="modal-body">
<form id="fabForm" method="post" class="form-horizontal bv-form" novalidate="novalidate"><button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<div class="form-group">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th><input type="checkbox" id="toggleChkSelFabricante" name="toggleChkSelFabricante"></th>
<th>Fabricante</th>
</tr>
</thead>
<tbody id="selFabricanteBody"><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr></tbody>
</table>
</div>
</div>
<div>
<button type="button" class="btn btn-danger" data-dismiss="modal">Regresar</button>
<button type="submit" class="btn btn-primary" disabled="" id="btnAgregarSelFabricante"><i class="fa fa-save"></i> Agregar</button>
</div>
</form>
</div>
</div>
</div>
</div>
Which render as image below shows:
What can be wrong in that markup? I'm using latest version of Twitter Bootstrap. Any help? Advice?
Some clarifications:
I need the table inside the form because it's tabular data and semantic I think this is the right choice
I need the form because I'm using BootstrapValidator plugin and as says here in docs that the right markup, and I need to check at least one checkbox is checked before enable the submit button and allow send the form
Remove the element <div class="form-group"> and its end tag surrounding <div class="table-responsive">. That will fix the padding issue. You also have an issue with the checkbox class. If you remove the checkbox class from the <div> containing the checkbox it'll align properly.
Related
I have a problem: I pass a collection to a view. Then I iterate through it and display some data. In normal markup, it works, but in modal it doesn't. Please tell me why modal code does not show the data.
Here is the view:
#model IEnumerable<Models.ToDO>
#foreach (var item in Model)
{
#if (item.isDone == true)
{
<div class="done-element element">
<p>
Title: #Html.DisplayFor(modelItem => item.Title)
</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>
Description: #Html.DisplayFor(modelItem => item.Desc)
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
}
}
EDIT: I found some strange things: all modals display this value, but all take it from the first element
EDIT2: I found the solution. Target data is ID and take first found element. Changing ID to variable fix problem.
I'm using Bootstrap 4 and I want to align two buttons inside a table column. The buttons are of the same size, but the second one is inside of a form.
I tried using the button group approach which almost solves the situation, but unfortunately there's a small gap between the buttons:
<td class="text-right">
<div class="btn-group" role="group">
<button type="button" class="btn btn-sm btn-secondary">Edit</button>
<form action="" method="POST">
<button type="button" class="btn btn-sm btn-danger">Delete</button>
</form>
</div>
</td>
What utility class can I use or any additional css in order to have the buttons aligned on the same level?
P.S. It doesn't have to be the button group, it can be any other technique as long as the buttons are on the same line.
Following the same strategy used to align columns in the bootstrap, its td can be of the row class, surrounded by items in the class col-md , col-lg, col-sm.
Try this:
HTML
<td class="text-right row">
<div class="btn-group" role="group">
<div class="col-md-6 custom">
<button type="button" class="btn btn-sm btn-secondary">Edit</button>
</div>
<div class="col-md-6 custom">
<form action="" method="POST">
<button type="button" class="btn btn-sm btn-danger">Delete</button>
</form>
</div>
</div>
</td>
Customize your column with a custom CSS
CSS
.custom {
padding-right: 5px;
padding-left: 5px;
}
https://jsfiddle.net/braulioti/aq9Laaew/160600/
I am a beginner in this language I've used php before.
So the table has a button and when I clicked the button it only read the first row it won't read the other rows, In php ive used the function attr so it will read the other clicked row and here at reactjs i don't know how please help
return <tr key={i} >
<td>{d.Employee_Name}</td>
<td>{d.Address}</td>
<td><center><button className ="btn btn-info" onClick={ this.props.onClick } data-toggle="modal" data-target="#UpdateEmployee">Update</button></center></td>
<td><center><button className ="btn btn-danger">Delete</button></center></td>
<div className="modal fade" id="UpdateEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Update Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td> <input type="text"value={ d.Employee_Name} /> </td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" value={ d.Address} /> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info"> Update Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
}
To get the index of item clicked, you need to bind the index to onClick function for each element, like this:
<td>
<center>
<button ... onClick={() => this.props.onClick(i) }></button>
</center>
</td>
Note: replace ... by other properties you are using.
Whenever you click on any item, index i will get passed to this.props.onClick method, you can check that by using console.log in parent onClick function, like this:
onClick(index){
console.log(index); // it will print the index of item clicked
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a panel with three buttons in the panel body. I want one button to be where it currently is (left) and I want the other two buttons to be on the far right.
The buttons currently are all aligned to the left. Below is the code I have written. I have tried numerous things including pull-right and adding button groups and clearfix, but they remain left most.
I have also tried this post: Left align and right align within div in Bootstrap
I am using bootstrapmin for both CSS and JS.
Here is the code:
<div class="row">
<div class="form-inline">
<div class="col-sm-5" style="width: 100%;">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Click 'Run' to complete the report.</div>
<div class="panel-body" style="background-color: lightgray;">
<div class="form-group">
<asp:Button ID="btnRun" runat="server" Text="Run" OnClick="btnRun_Click"
class="btn btn-primary btn-sm"/>
<div class="btn-group">
<span class="pull-right">
<asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm" />
<asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm" />
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-body" style="background-color: lightgray;">
<div>
<asp:Button ID="btnRun" runat="server" Text="Run" OnClick="btnRun_Click" class="btn btn-primary btn-sm" />
<asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm myFloat_Right" />
<asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm myFloat_Right" />
</div>
</div>
and in your cs file add the following:
.myFloat_Right {
float: right;
}
worked for me.
You were on the right track. The only thing you had to do was to use the bootstrap classes accordingly. If you pay attention, you'll see they work as a map. 1. build a container, 2. build a row, 3. build a column size, 4. build the element, 5. locate it. In this case, you had to wrap the left button in a left column, and the right btn-group in a right container with pull-left and pull-right. Mind you, in your #media responsive code you have to nullify the pull-right so that they don't look funny in a smartphone. I am assuming you are building a responsive design otherwise you wouldn't use Bootstrap. ;)
Here is a codepen for your solution
enter link description here
p.s. Avoid inline styles like the plague. Specially where you have a col-sm-5 but you are forcing a width to 100%. Doesn't make any sense to do that. Use col-xs-12 if you want a 100% width
Try this
<div class="row">
<div class="form-inline">
<div class="col-sm-5" style="width: 100%;">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Click 'Run' to complete the report.</div>
<div class="panel-body" style="background-color: lightgray;">
<div class="pull-left">
<asp:Button ID="btnRun" runat="server" Text="Run"
class="btn btn-primary btn-sm" />
</div>
<div class="pull-right">
<asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm" />
<asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here I have kept two button which should be inline but login facebook button get mis aligned. Why?
Fiddle : Fiddle
<div class="container">
<div class="row">
<input id="loginButton" class="btn btn-primary" type="button" value="Login | facebook" onclick="authUserX();" style="display: block;"></input>
<a href="./redirect.php">
<input id="loginTwitter" class="btn btn-primary" type="button" value="Login | Twitter "></input>
</a>
</div>
</div>