The dropdown on the right is in a table cell, this works as intended on desktop browser.
However on mobile, on click, the dropdown gets split into two lines:
HTML
<table class="table table-striped table-bordered table-hover">
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
<td>
<div class="btn-group">
<i class="icon-eye-open icon-white"></i> Visualizza
<button class="btn dropdown-toggle btn-primary btn-small" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Modifica</li>
<li><a class="btn-confirm" href="#"><i class="icon-trash"></i> Elimina</a></li>
</ul>
</div>
</td>
</tr>
</table>
The problem most likely stems from the table cell width being laid out too short for both elements.
The simplest solution would be to set add a class to that cell and add min-width, though you would be moving away from pure bootstrap.
HTML:
<td> ... </td>
<td class="dropdownCell">
<div class="btn-group">
...
Css:
.dropdownCell { min-width:130px; }
Fiddle is here: http://jsfiddle.net/a4kx75t1/1/
Related
Have a question about the HTML view related to the table.
In my HTML view, I have a table.
This is worked in a responsive way when changing the view.
Here I want to change the view that the responsive view comes with a scroll bar.
I want to change it to fit all columns to the view and wrap the column contents.
Any suggestions to do it?
<div class="col-md-12 col-sm-12 grid-margin stretch-card">
<div class="card shadow-card-l">
<div class="card-body">
<center><h4 class="card-title">Task Related Documents</h4></center>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Document Type</th>
<th>Document Note</th>
<th>File Name</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.TaskFilesHistoryViewModel.OrderByDescending(x => x.Id))
{
<tr class="even pointer">
<td>#item.File_Type</td>
<td>#item.Note</td>
<td>#item.File_Name</td>
<td>
<a href="#Url.Action("DownloadTaskImage","Ajax", new { id = item.Id})" target="_blank" rel="publisher tag" class="btn btn-outline-info ti-import" />
<a href="#Url.Action("RetrieveTaskImage","Ajax", new { id = item.Id})" target="_blank" rel="publisher tag" class="btn btn-outline-success fa ti-eye" />
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
I'm trying to edit my code so, that if I hover over the delete button, the text gets a strikethrough-line, just like the css option text-decoration: line-through does.
EDIT:
I'm trying to have the Text "Creating this basic TODO Website" with a strikethrough, when hovering over the delete button
Is there a way to achieve this, without using JS, or do I need to use JS? (I'm currently using Bootstrap4)
The Code part is:
<tr>
<th scope="row">3</th>
<td class="text-justify">Creating this basic TODO Website</td>
<td>14/05/2020</td>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>
</td>
<td>
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Edit" onclick="window.location.href='Edit.html' ;">
<i class="material-icons">create</i>
</button>
<button type="button" class="btn btn-warning">
<i class="material-icons">delete</i>
</button>
</td>
</tr>
Okay, I think I understand your problem. The problem is there is no "previous sibling" or "parent" selector in css. But I think a little bit tricky dom modification, and pure css, you can achive your goal.
table tr {
display:flex;
flex-direction: row-reverse;
}
table tr td:hover+td+td+td+td.your-text {
text-decoration: line-through;
}
<table border=1>
<tr>
<td>
<button type="button" class="btn btn-warning">
<i class="material-icons">delete</i>
</button>
</td>
<td>
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Edit" onclick="window.location.href='Edit.html' ;">
<i class="material-icons">create</i>
</button>
</td>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>
</td>
<td>14/05/2020</td>
<td class="text-justify your-text">Creating this basic TODO Website</td>
<th scope="row">3</th>
</tr>
</table>
Explanation: The td-s are reversed, and css flexbox make re-reverse order. So it visible as normal order, but it is important: in the dom, it is reversed. After that you can use next element selector (+) more than once times. And the last trick: I split the buttons cell into two parts to access to delete button's cell exactly.
You can do it with CSS
i:hover {
text-decoration: line-through;
}
When you use bootstrap X, you can still use CSS:
button.not-available:hover, button.not-available i:hover {
text-decoration: line-through;
}
<button class="not-available">
<i>create</i>
</button>
<button>
<i>delete</i>
</button>
I have a really long text in one of the column of my table. So I am using bootstrap provided collapse/expand button to hide/show that long text (cell data).
But when I click on the button to collapse/expand the text, the table flickers and gets resized horizontally.
How do I prevent the table columns from re-sizing horizontally during collapse/expand of that table data ? And allow the expansion of text ONLY vertically limited within that column width ?
Below is the HTML for reference.
<table id="query_table" class="table table-bordered table-striped table-hover">
<thead>
<th>ID</th>
<th>Name</th>
<th>Topic</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>9</td>
<td>ORDER_ZONE</td>
<td>2018-06-18 21:47:31.0</td>
<td>
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapseExample_9" aria-expanded="true"
aria-controls="collapseExample_9">
Show/hide Description
</button>
<div class="collapse" id="collapseExample_9">
<div class="card card-body">
SOME VERY VERY VERY VERY LONG TEXT HERE
</div>
</div>
</td>
</tr>
<tr>
<td>9</td>
<td>ORDER_ZONE</td>
<td>2018-06-18 21:47:31.0</td>
<td>
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapseExample_10" aria-expanded="true"
aria-controls="collapseExample_10">
Show/hide Description
</button>
<div class="collapse" id="collapseExample_10">
<div class="card card-body">
ANOTHER VERY VERY VERY VERY LONG TEXT HERE
</div>
</div>
</td>
</tr>
</tbody>
</table>
Use table-layout: fixed css for your table and you might have to give some fixed width for table itself and/or its cells.
For example, I have a code:
<div class="mycontainer1" style="....">
<table class="widget title list" id="element-545">
<tbody>
<tr>
<td class="txt">11111</td>
<td class="toolbar" id="element-546">
<div class="btn export-btn" id="element-549">
<span class="fa fa-print"></span>Export
</div>
</td>
</tr>
</tbody>
</table>
</div>
I need set style for class "btn export-btn" visibility: hidden in css.
Can I resolve it in class of first div (mycontainer1)?
Touch only the first div!
Add
.mycontainer1 .btn.export-btn {
<style>
.mycontainer1 .btn.export-btn
{
visibility: hidden;
}
</style>
When a field value is too long in my bootstrap table, the table will extend to the length of the parameter even if its past the container. The only way I was able to somewhat prevent this is by using responsive-table, however then a scroll bar shows up on the bottom and you have to scroll all the way to the right to see the table data. How can I make it so when my table reaches the length of the container, the row data will wrap?
Here is an image of what is going on: http://i.stack.imgur.com/Bo1dO.jpg
Here is a portion of my view, the CSS and example can be seen here: https://jsfiddle.net/bsxtpoqd/
<div class="container">
<div class="row tab-content">
<div class="row">
<h3>Assigned Games</h3>
<p>Please enter a search string in the textbox to search for users</p>
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="tableSearch" placeholder="Enter search term...">
</div>
</form>
<div class="table">
<table id="userTable" class="table">
<thead>
<tr>
<th>UserName</th>
<th>Alternate</th>
<th>Email</th>
<th>Assigned Games</th>
<th>Unassigned Games</th>
</tr>
</thead>
<tbody>
#foreach (var user in Model)
{
<tr>
<td>#Html.ActionLink(user.UserName, "_GameAssigner", "Admin", new { insUserId = user.InstitutionUserId }, new { #class = "modal-link" })</td>
<td>
#user.AlternateId
</td>
<td>#user.Email</td>
<td>
#if (user.Assigned.Any())
{
<a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
data-content="#foreach (var gameName in user.Assigned){<div>#gameName</div>}">
#user.Assigned.Count</a>
}
else
{
<div class="text-warning">0</div>
}
</td>
<td>
#if (user.Unassigned.Any())
{
<a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
data-content="#foreach (var gameName in user.Unassigned) {<div>#gameName</div>}">
#user.Unassigned.Count</a>
}
else
{
<div class="text-warning">0</div>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
You need to break up the long word.
<td style="word-break:break-all">
This is you need:
<style>
td
{
word-break: normal;
}
</style>