I have a css table-card layout that uses the :before pseudo selector to insert the header name.
Also in my table, I created a button that fires an alert when pressed.
The problem is that the button does not work in the plunkr: http://plnkr.co/edit/ZKweKp
But when I take the css out, the buttons work as expected.
Here's the css:
.cards tr:nth-of-type(odd) {
background: #eee;
}
.cards th {
background: #333;
color: white;
}
.cards td,
.cards th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
/* Force table to not be like tables anymore */
.cards table,
.cards thead,
.cards tbody,
.cards th,
.cards td,
.cards tr {
display: block;
}
/* Hide table headers (but not display: none; for accessibility) */
.cards th {
position: absolute;
top: -9999px;
left: -9999px;
}
.cards tr { border: 1px solid #ccc; }
.cards td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 20%;
}
.cards td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
.cards td:nth-of-type(1):before { content: "Date"; }
.cards td:nth-of-type(2):before { content: "User"; }
The html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#~1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="IndexController">
<table class='cards'>
<tr>
<th>Color</th>
<th>Button</th>
</tr>
<tr ng-repeat="color in pageData.colors">
<td>{{ color }}</td>
<td>
<button ng-click="pageFn.clickMe()">Click Me</button>
</td>
</tr>
</table>
</body>
</html>
And the JS:
var app = angular.module('app', []);
app.controller('IndexController', function ($scope) {
$scope.pageData ={};
$scope.pageFn = {};
$scope.pageData.colors = ['This is red. etc... ', 'This is green. etc...', 'Blue text here... asdfadsfadsfadsf a'];
$scope.pageFn.clickMe = function () {
console.log('hello');
alert('clicked!');
}
});
Just change your CSS of .cards td:before to this,
.cards td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: auto;
padding-right: 10px;
white-space: nowrap;
}
width:45% changed to width:auto;,which was preventing the button to get clicked.
Related
I am trying to override property overflow:hidden (parent td element)
for my tooltip which should be shown under my td element:
Code for tooltip:
.tooltip1 {
text-decoration: none;
overflow: visible !important;
}
.tooltip1:hover {
position: relative;
}
.tooltip1 span {
display: none;
}
.tooltip1:hover span {
border: #666 2px dotted;
padding: 5px 20px 5px 5px;
display: block;
z-index: 100;
background: #e3e3e3;
left: 0px;
margin: 15px;
width: 150px;
position: absolute;
top: 15px;
text-decoration: none;
overflow: visible !important; //not working
}
<div class="tooltip1">Link
<span>CSS tooltip showing up when your mouse over the link</span>
</div>
Result:
But I need something like this(tooltip above all cells):
I need somehow disable or override the property of td overflow:hidden for [.tooltip1:hover span] (our tooltip), so I can't just change if for parent td element.
I'm guessing the tooltip is a child of the td. If so, you can override the overflow property by using has():
td:has(.tooltip1:hover) {
overflow: visible;
}
Here is an example:
.td {
width: 50px;
overflow: hidden;
}
.td:has(.tooltip:hover) {
overflow: visible;
}
<div class="td">
<div class="tooltip">
sdfksdfksdfksdfksdfsdfksdfk
</div>
</div>
I want to hide the second header when it goes under the first header on small resolution when it scroll, I realy don't know how to do it, I tried everything.
.horizontal-scroll-table > .row::-webkit-scrollbar {
display: none;
background-color: red;
width: 500px;
}
table thead th {
background-color: red;
color: white;
padding: 16px 24px;
}
table thead th:last-child {
border-radius: 0 50px 50px 0;
}
table thead th:first-child {
border-radius: 50px 0 0 50px;
position: sticky !important;
left: 0;
z-index: 999;
}
#media (max-width: 991px) {
.horizontal-scroll-table > .row {
overflow-x: scroll;
white-space: nowrap;
overflow-y: hidden;
}
.horizontal-scroll-table > .row > .col-md-12 {
display: inline-block;
float: none;
}
}
<div class="horizontal-scroll-table">
<div class="row" style="text-align: -webkit-center;">
<table>
<thead class="" style="background-color: #111A40;">
<tr>
<th>Sticky header</th>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
</thead>
</table>
</div>
</div>
here it's an example try to scroll on small size
An interesting use case. I would have completely different approach; would this work for you?
header > div {
display: inline-block;
border: 1px solid red;
width: 120px;
}
header {
white-space: nowrap;
}
/* actual solution */
header > div:nth-of-type(1) {
background: lightpink;
position: sticky;
left: 0;
}
<header>
<div>Sticky</div>
<div>Child1</div>
<div>Child2</div>
<div>Child3</div>
<div>Child4</div>
<div>Child5</div>
<div>Child6</div>
<div>Child7</div>
</header>
I need some help in a sizing question. If you view the following code in desktop browsers, everything is sized as it should be. If you try to open it on a mobile phone (I have tested it with several iPhones), the td (white with grey border) is not resized properly. The td element is resized correct, if there is a span element that's causing the overflow.
div.highlighter-rouge {
overflow-x: scroll;
}
div.highlight {
width: 100%;
}
.highlight {
display: inline-block;
}
.highlight {
background-color: #eeeeee;
}
pre.highlight {
margin-top: 0;
margin-bottom: 0;
}
pre code {
white-space: pre;
}
table {
margin: 15px 0;
padding: 0;
}
table {
word-wrap: anywhere;
}
table tr {
border-top: 1px solid #cccccc;
background-color: white;
margin: 0;
padding: 0;
}
table tr td {
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px;
}
table tr th :last-child,
table tr td :last-child {
margin-bottom: 0;
}
table tr th :first-child,
table tr td :first-child {
margin-top: 0;
}
td.rouge-code>pre>span {
display: inline-block;
}
.highlight .nt {
color: #000080;
}
.highlight .s1 {
color: #d01040;
}
html {
-webkit-text-size-adjust: 100%;
}
<div class="language-bash highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2</pre>
</td>
<td class="rouge-code">
<pre>ausearch <span class="nt">-c</span> <span class="s1">'ajp-bio-0:0:0:0'</span> <span class="nt">--raw</span> | audit2allow <span class="nt">-M</span> my-ajpbio0000
semodule <span class="nt">-i</span> my-ajpbio0000.pp</pre>
</td>
</tr>
</tbody>
</table</code>
</pre>
</div>
</div>
I've tried many things now, but my level of knowledge about this, just leads to trial and error. If you don't really like the solution with tables, I can also create a version with the exact same behaviour without them.
https://codepen.io/ribbonCaptain/pen/GRrqgpE
.rouge-table td {
vertical-align: top;
}
.rouge-table td pre {
white-space: pre-wrap;
}
...will do it. See it here.
There's not much to explain.
I have an HTML table inside a container. On hover, I want to highlight the row, not only inside the table, but extending outside to the edges of the container.
This is my first attempt:
body {
display: flex;
justify-content: center;
}
.container {
display: flex;
justify-content: center;
width: 800px;
border: 1px dotted gray;
padding: 2rem;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 1px dashed purple;
}
td, th {
padding: .25rem;
position: relative;
text-align: left;
}
tr:hover {
background: lightgray;
cursor: pointer;
}
tr:hover td:first-child::before, tr:hover td:last-child::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 2rem;
background-color: lightgray;
}
td:first-child::before {
left: -2rem;
}
td:last-child::after {
right: -2rem;
}
<div class="container">
<table>
<thead>
<th>Dato</th>
<th>Lok. nr.</th>
<th>Navn</th>
<th>Status</th>
</thead>
<tbody>
<tr>
<td>06.12.2016</td>
<td>25736</td>
<td>Josommar-<br>set</td>
<td>I arbeid</td>
</tr>
<tr>
<td>07.12.2016</td>
<td>10232</td>
<td>Mannbru-<br>holmen</td>
<td>Avsluttet</td>
</tr>
</tbody>
</table>
</div>
It works fine in Chrome, but I have to support IE11, and in IE the before and after elements do not have the correct height. You can see the result in the screenshot below.
How can I do this in a way that also works in IE11?
I have a p tag. I want a border line next to it.
<p style="margin-left: -30px;font-size: 12px;margin-bottom: 2px;"><strong> Categories</strong></p>
I want to add a line next to p tag as the following image.
How can i implement it?
Please help,
Thanks
There are many other ways to achieve this, one of them would be applying a border-bottom to a pseudo-element (which establishes a new block formatting context in order to prevent overlapping) and floating the <strong> element to the left:
p.hasBorder {
overflow: hidden; /* Establish a new block formatting context */
}
p.hasBorder > strong {
float: left;
}
p.hasBorder:after {
content: "";
display: block;
border-bottom: 3px solid silver;
overflow: hidden; /* Establish a new block formatting context */
height: 1em; /* Up to you */
}
<p class="hasBorder">
<strong>Categories</strong>
</p>
Use a pseudo element
Jsfiddle Demo
CSS
p {
font-size: 12px;
margin-bottom: 2px;
overflow: hidden;
position: relative;
}
p:after {
content:"";
position: absolute;
border-bottom:1px solid grey; /* border-size & color are now controllable */
width:100%;
height:1em;
display: inline;
margin-left: 1em;
}
p {
margin-left: 0px;
font-size: 12px;
margin-bottom: 2px;
position: absolute;
margin-top: -7px;
background-color: #fff;
color: #333;
padding-right: 5px;
}
.line-back {
border-bottom: 1px solid #ccc;
margin: 25px;
}
<div class="line-back">
<p>
<strong> Categories</strong>
</p>
</div
p{
}
P:after{
content:'________';
}
DEMO
JS Fiddle
p {
font-size: 12px;
margin-bottom: 2px;
position:relative
}
p::after {
content:"";
border-bottom:1px solid grey;
width:100px;
position:absolute;
bottom:2px;
}