I'm trying to provide menu with CSS and javascript. I would like to place a table at the bottom right of the screen and have it expand up. Currently, the table always expands down or tries to cram itself into the footer element containing the table. How do you force a table to expand up? The overflow style doesn't seem to provide the desired functionality.
Thanks!
Try this in your CSS.
table.bottomRight {
position:absolute;
bottom:0px;
right:0px;
}
Do you mean like this?
table {
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -250px;
width: 500px;
}
table th {
background-color: #eee;
border-bottom: 1px #ccc solid;
height: 25px;
line-height: 25px;
}
table th, table td {
padding: 10px;
}
table tbody {
display: none;
}
And javascript for demonstration purposes:
$('#test-button').bind('click', function() {
var tableBody = $('table tbody');
tableBody.toggle();
});
Example: http://jsfiddle.net/8SvCm/
Thanks for all the feedback. The solution I found is documented here:
http://www.bennadel.com/blog/1740-Building-A-Fixed-Position-Bottom-Menu-Bar-ala-FaceBook-.htm
It uses jQuery and a combination of nested divs and CSS to achieve the menu. Very cool!
Related
On the header i used a pseudo-element to create this gradient border.
This is my code:
.wrapper::before {
z-index: 1000;
content: "";
position: absolute;
height: 106px;
inset: 0;
border-radius: 20px;
padding: 2px;
background:linear-gradient(90deg,#4757e370,#5b2bdf70);
}
Now i want the same gradient on my table row borders. How can i achieve this? Somehow i can't apply pseudo-elements on my td-childs. Sadly there is no way known to me on how to apply gradients on borders. Somebody knows how to do it?
Thanks :)
You can do something very similar to what you have done with pseudo elements if that's working for you. You just have to set the tr elements to display as block 👍
:root {
--bg-color: hsl(231deg 23% 11%);
}
body {
background-color: var(--bg-color);
}
table {
outline: 1px solid blue;
width: 100%;
}
tr {
--br: 20px;
--border-size: 4px;
display: block;
height: 1rem;
margin: 0.7rem;
position: relative;
border-radius: var(--br);
background-color: var(--bg-color);
}
tr::before {
z-index: -1;
content: "";
position: absolute;
inset: calc(-1 * var(--border-size));
border-radius: var(--br);
background:linear-gradient(90deg,#4757e370,#5b2bdf70);
}
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<table>
It's worth checking out this question as well which might provide a more in depth explanation.
It's also worth mentioning, when I am creating tables I rarely rely on table styling anymore, and will usually default to using a grid layout style and this makes gaps and the sort much more manageable.
In a html css angular table that is scrollable through overflow-x, is there a way to fix the right-most column so that when i scroll from left to right, that column stays there?
I tried the sticky property, as well as creating two tables right next to eachother (which does not accomplish the task successfully. I am thinking that i should overlay two tables on top of eachother but i am not sure how i should go about this.
position: sticky appears to work fine on chrome and firefox:
div {
width: 100%;
overflow: hidden;
overflow-x: scroll;
}
table, th, td {
border: 1px solid black;
background-color: white;
}
table {
width: 1000px;
}
.sticky-col {
width: 40px;
position: sticky;
right: 0;
}
<div>
<table>
<tr><th>1</th><th>2</th><th class="sticky-col">3</th></tr>
<tr><td>1,1</td><td>1,2</td><td class="sticky-col">1,3</td></tr>
<tr><td>2,1</td><td>2,2</td><td class="sticky-col">2,3</td></tr>
<tr><td>3,1</td><td>3,2</td><td class="sticky-col">3,3</td></tr>
</table>
</div>
I recently found the tablesort.js component, which allows to make the rows of a plain HTML table sortable. Please see this fiddle for a small example.
I'm trying to understand how the sort-indicators (up/down arrows) in the table header are created.
The CSS used by tablesort.js is very minimal and does not contain any (background-) images. Also looking at the javascript code and using the browser's developer tools did not help me to understand how the indicators are created.
Can someone please explain how these indicators are created?
Here is the CSS used by tablesort.js:
th.sort-header {
cursor:pointer;
}
th.sort-header::-moz-selection,
th.sort-header::selection {
background:transparent;
}
table th.sort-header:after {
content:'';
float:right;
margin-top:7px;
border-width:0 4px 4px;
border-style:solid;
border-color:#404040 transparent;
visibility:hidden;
}
table th.sort-header:hover:after {
visibility:visible;
}
table th.sort-up:after,
table th.sort-down:after,
table th.sort-down:hover:after {
visibility:visible;
opacity:0.4;
}
table th.sort-up:after {
border-bottom:none;
border-width:4px 4px 0;
}
They are using pseudo elements:
table th.sort-header:hover:after {
visibility: visible;
}
table th.sort-header:after {
content: '';
float: right;
margin-top: 7px;
border-width: 0 4px 4px;
border-style: solid;
border-color: #404040 transparent;
visibility: hidden;
}
They then toggle a class to change the border-width style which changes the arrow.
Edit: To clarify, the border-width style is what makes the arrow shape.
I want to change the height of the rows in mi handsontable. I already change the widht of the columns (colWidths: [75,75,75]), but i cant find the way to do the same with rows.
Thanks!
you can use this. but remember you must mark the "white-space:nowrap " as !important to override the handsontable property
.handsontable td, .handsontable tr, .handsontable th
{
max-width: 20px;
min-width: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap !important;
}
I had the same issue, and you need to modify in one place, the css file, or you can overwrite the style in your html:
in the handsontable css file search for the style .handsontable td :
.handsontable td {
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
height: 22px; /*change to the desired height value*/
empty-cells: show;
line-height: 21px;
padding: 0 4px 0 4px;
/* top, bottom padding different than 0 is handled poorly by FF with HTML5 doctype */
background-color: #FFF;
vertical-align: top;
overflow: hidden;
outline-width: 0;
white-space: pre-line;
/* preserve new line character in cell */
}
Just change the "height" value to the one you want inside the css, or you just add the following line in the style section of your html document:
.handsontable td { height: <desired height>px;}
Additionally I would make the changes mentioned by RustyBadRobot in file jquery.handsontable.js, this could be used in some other calculation, but so far the change in css seems to be enough.
Please note that this is working with handsontable version 0.11.3, not sure if this is also true for other versions.
The problem with that Chachi-inactive is the height gets dynamically set on one of the holder divs
<div class="wtHolder ht_master" style="position: relative; height: 27px;">
You can find and edit the below code in the main handsontable.js
columnWidth: 50,
rowHeight: function (row) {
return 50;
},
defaultRowHeight: 50,
selections: null,
hideBorderOnMouseDownOver: false,
This needs to be updated if you have elements below the handsontable table.
I don't know of any parameter similar to colWidths that you can use to specify individual row heights, but you can use CSS to specify a height for all td and th elements.
For example:
.handsontable th,
.handsontable td {
line-height: 50px;
}
I am trying to make a table with Vertical Text just on the header table.
Here is my CSS code:
table th.user {
.rotate(90deg);
position: relative;
padding-top: 190px;
top: -10px;
right: 0px;
width: 200px;
}
Here is the demo http://codepen.io/anon/pen/GnveJ
As you can see it works partially.
I would like to have the columns (the cells of the column where there are the name) which width fits exactly the contents (about 50 px); the same as the pic I attached to this question.
Any idea what is the best way to make the css code or js code for this purpose?
Requirement:
I am using less and jquery
Wrap the username in a span, rotate that, and set a width on the cells. If you rotate the cells, the table will render its size before it rotates the text.
table th.user span{
display:block;
.rotate(90deg);
padding: 190px 0 0 0;
position: relative;
left: 20px;
width: 200px;
}
.user, tbody td {
max-width: 50px;
}
Demo