I am currently trying to force all elements inside of a <th> to be on the same line and am having issues doing so. I've reviewed many posts and the common css answer seems to be to use style="white-space:nowrap" on the <th> element.
The code for <thead> is below:
<thead>
<tr>
<th><h5>Some</h5></th>
<th><h5>Thing</h5></th>
<th><h5>Another</h5></th>
<th><h5>Thing2</h5></th>
<th><h5>OneMore</h5></th>
<th style="white-space:nowrap">
<h5>Thing3</h5>
<md-button class="md-icon-button" style="bottom: 4px;margin-left:-3em">
<md-tooltip md-direction="auto" class="multiple-line-tooltip">
Some ToolTip Information Here
</md-tooltip>
<i class="material-icons md-dark">info</i>
</md-button>
</th>
</tr>
</thead>
My issue is that the info icon seems to always display below the "Thing3" h5 element. See picture below:
All help is appreciated.
A h5 is a block level element - this is by design.
Perhaps try an inline element like <b> instead, or use an inline style.
<h5 style="display:inline">
The problem is that <h5> is a block-level element. You should be able to resolve this by simply floating the children of the header cells to the left:
th > * {
float: left;
}
<table>
<thead>
<tr>
<th>
<h5>Some</h5>
</th>
<th>
<h5>Thing</h5>
</th>
<th>
<h5>Another</h5>
</th>
<th>
<h5>Thing2</h5>
</th>
<th>
<h5>OneMore</h5>
</th>
<th>
<h5>Thing3</h5>
<img src="http://placehold.it/50" />
</th>
</tr>
</thead>
</table>
However, the above example replaces the md-button and i with a simple image. If the above doesn't work for you, try replacing float: left with display: inline-block.
Hope this helps! :)
Related
I'm trying to move the orange plus sign (lower right of screen) up so that it's closer to the other icons, directly below them. Padding-bottom does not work, but padding-top does. I figured the element above it must have a lot of padding that kept it from being able to move up more, but the inspector tool shows there's space between them.
It's hard for me to know what's going on here, as my instructors wrote this code and I don't therefore understand exactly how it's constructed. I'm also quite new to Html/Css, though padding-bottom hasn't failed me thus far.
Here is the partial view code that makes up the second table. The orange plus icon is at the very bottom, underneath the table end tag:
#model IEnumerable<JobPlacementDashboard.Models.JPOutsideNetworking>
}
<table class="table">
<tr>
<th class="sort-button-style table-headers fixed">
<a onclick="sortPartial('#ViewBag.NameSortParm')">Name</a>
</th>
<th class="sort-button-style table-headers fixed">
<a onclick="sortPartial('#ViewBag.PositionSortParm')">Position</a>
</th>
<th class="sort-button-style table-headers fixed ">
<a onclick="sortPartial('#ViewBag.CompanySortParm')">Company</a>
</th>
<th class="sort-button-style table-headers fixed">
<label class="network-label networkingheader">LinkedIn</label>
</th>
<th class="sort-button-style table-headers fixed">
<a onclick="sortPartial('#ViewBag.LocationSortParm')">Location</a>
</th>
<th class="sort-button-style table-headers fixed">
<label class="network-label networkingheader">Email</label>
</th>
<th class="sort-button-style table-headers fixed">
<a onclick="sortPartial('#ViewBag.StackSortParm')">Stack</a>
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr class="text-center">
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Position)
</td>
<td>
#Html.DisplayFor(modelItem => item.Company)
</td>
<td>
LinkedIn
</td>
<td>
#Html.DisplayFor(modelItem => item.Location)
</td>
<td>
#Html.DisplayFor(modelItem => item.Contact)
</td>
<td>
#Html.DisplayFor(modelItem => item.Stack)
</td>
<td class="font20">
#if (User.IsInRole("Admin"))
{
#Html.ActionLink(HttpUtility.HtmlDecode("✎"), "Edit", new { id = item.OutsideNetworkingID })
<span>|</span>
#Html.ActionLink(HttpUtility.HtmlDecode("🗑"), "Delete", new { id = item.OutsideNetworkingID })
}
</td>
</tr>
}
</table>
#if (User.IsInRole("Admin"))
{
<div class="createnewplus">
#Html.ActionLink(HttpUtility.HtmlDecode("+"), "Create")
</div>
}
Here is the part of the Css that targets the plus:
.createnewplus {
font-size:30px;
font-weight:800;
margin-left:1075px;
}
The margin-left is because it automatically displays on the far left, under student name, when it needs to be under the other icons.
If anyone has an idea as to why padding-bottom doesn't work in this case, I'd be very appreciative. I apologize if this is a painfully dumb question; and if you would need more details to be able to tell what's going on, please let me know!
Edit: padding-bottom is not in the css currently because I took it out, as it was doing nothing.
Padding-bottom will create space (padding) below the createnewplus div, therefore moving any content that comes after it farther down the page. It appears that the createnewplus div is the last element on the page, so that is why nothing is changing when you add padding-bottom.
You need to find the css that is responsible for the padding/margin following each table. Lowering it will move your icon up.
There are several questions on SE about this issue in Bootstrap 3, which have been solved by adding a custom class. Bootstrap 4 includes a text-truncate class to limit the display of text inside an element. We've used it in parts of the site without issue.
However, it doesn't work when applied to a table cell. Here's what we tried - in reality, there are multiple columns to the table but I've trimmed it down to one.
<table class="table table-striped table-bordered table-hover table-hover-cursor" id="tblData">
<thead class="thead-light">
<tr>
<th scope="col" data-bind="tableSort: { arr: _data, propName: 'text()'}">Text</th>
</tr>
</thead>
<tbody data-bind="foreach: pagedData">
<tr>
<td data-bind="text: text()" class="text-truncate"></td>
</tr>
</tbody>
</table>
There are various other question about this which suggest you need to put the text inside a span to have it work. But this doesn't work either.
<tr>
<td>
<span data-bind="text: text()" class="text-truncate"></span>
</td>
</tr>
I've also tried moving the class to the td and having it on both the td and the span. None of it works.
Another common suggestion is to add the text class. Although that doesn't seem to be a default class in Bootstrap. This doesn't work either.
<tr>
<td>
<span data-bind="text: text()" class="text text-truncate"></span>
</td>
</tr>
Again, moving or duplicating the class on the td doesn't make any difference. I wasn't sure if a size limitation might be needed so I tried this:
<tr>
<td data-bind="text: text()" class="col-md-2 text-truncate"></td>
</tr>
But still the text is displayed in full with no elipsis.
In all cases I've check the element to make sure it's picking up the text-truncate class and that the styles are being applied, and they are.
This does work:
<tr>
<td data-bind="text: text()" class="text-truncate" style="max-width: 200px"></td>
</tr>
But I'd prefer to stick to Bootstrap classes. What's the correct set of elements and classes to get this to work?
AFAIK there isn't a Bootstrap class that will solve this if the table columns have fluid width. The simplest solution is to use:
.table {
table-layout: fixed;
}
https://www.codeply.com/go/NysJfvWtst
<div class="row">
<div class="col-md-8">
<h3 data-toggle="collapse" data-target="#collapseList" aria-expanded="false" aria-controls="collapseList"> 1 Lecturer List</h3>
<table class="table table-bordered collapse" id="collapseList">
<thead>
<tr>
<th>List Id</th>
<th>List Name</th>
<th>Total Subscribers</th>
<th>Action</th>
<th>Problems</th>
</tr>
</thead>
<tr>
<td>a</td>
<td>abcdefg</td>
<td>a</td>
<td>Synchronize</td>
<td>NOK</td>
</tr>
</table>
</div>
</div>
This is what I have when I click on the header label, it appears 1 second :
And after 1 second, this is what I have :
Why does my table is resized after the collapsing ? Is there a way to not resize the table ?
UPDATE :
Here's a JSfiddle, you can try and see yourself that there's a problem https://jsfiddle.net/0zw5a845/
Add the following CSS line to your main style sheet. This essentially overwrites the .collapse.in selector of the bootstrap style sheet.
.collapse.in {display:table}
Updated JSFiddle
Possibly due to the fact that your div has a class of col-md-8.
If you want a table spanning the full width of a page, change the class to col-md-12.
I am making a table and although I did not add any padding, some of the th in table 1 (see fiddle) seem to have a small padding-top. How can I fix that?
http://jsfiddle.net/6a1usq1s/
<table id="table1">
<tr>
<th>
<div class="body-table">VersF)</div>
</th>
<th>
<div class="h2-table">Drse</div>
<div class="body-table subheading">son</div>
</th>
<th>
<div class="h2-table">sne</div>
<div class="body-table subheading">Sstz</div>
</th>
<th>
<div class="h2-table">Br</div>
<div class="body-table subheading">s</div>
</th>
<th>
<div class="h2-table">a</div>
<div class="body-table subheading">an</div>
</th>
<th>
<div class="h2-table">a</div>
<div class="body-table subheading">a</div>
</th>
</tr>
vertical-align:top;
was the solution :)
You can try to nullify paddings for tr or td to cancel use of the styles installed in the browser by default:
padding: 0;
Then you can set height for div or tr/td, and to use line-height property for regulation of provision of the text in a cell (if the text is located in one line). If height is equal to line-height the text will settle down vertically in the middle.
height: 20px;
line-height: 20px;
Experiment with this property.
I have noticed that the <button> element in HTML always appears slightly lower than other elements as shown in the figure below.
As you can see, the "Go" button is slightly lower than the textarea element which on the same row as it is. The code for this is as follows...
<table width="100%">
<tr>
<th rowspan="2" align="left">
<img width="120px" height="60px" src="test-image.jpg" />
</th>
<th align="right">
User
My Garage |
Account Settings |
Sign Out |
<br/>
<textarea rows="1" id="search_text"></textarea><button>Go!</button>
</th>
</tr>
</table>
Why does this happen and what is the easiest fix for this ?
Try applying vertical-align: text-bottom; to your button.
You should be using an input tag, not a textarea for a single row. Try this code:
<input type="text" id="search_text"><button>Go!</button>