After a lot of tinkering I finally have a decent setup for my material table. It's got pagination, it's got sort, it's got all the goodies I need. However, it looks off because several of my columns are single digit values, and they have the same width as columns I would prefer to be larger (like the description which is wrapped excessively).
Being inexperienced in scss (and css for that matter) I'm at a loss for how to fix this. I attempted tinkering with the flex property in just about every way I could figure out, and it doesn't appear to change a thing on the table.
This issue is further complicated in that I cannot easily use the 'hack' of the material table generating classes based on the column identifier, as the columns are generated dynamically. I could pass in width information as well, but that seems like an unmaintainable hack.
Is there a way to apply styling to the entire table and header that would get me the desired look?
I used this successfully with Angular10.
First, wrap your table with a div, like this:
<div class='table-responsive'>
<mat-table>
....
</mat-table>
</div>
then add this CSS
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
.mat-table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
display: table;
border-collapse: collapse;
margin: 0px;
}
.mat-row,
.mat-header-row {
display: table-row;
}
.mat-cell,
.mat-header-cell {
word-wrap: initial;
display: table-cell;
padding: 0px 5px;
line-break: unset;
width: auto;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
This will size the cells according to the content, and make your table horizontally scrollable!
Assuming that you do mean the angular material table, this one might help:
md-table - How to update the column width
Use the below style for columns width and header
columns={[
{
title: 'Create Date',
field: 'create_date',
cellStyle: {
whiteSpace: 'nowrap'
},
...
]}
options={{
headerStyle: {
backgroundColor: '#DEF3FA',
color: 'Black',
whiteSpace: 'nowrap'
},
Related
Hi I have a tabulator table which the headers are all icons
I want to add in a fitler box for one field but when I do so using the headerFilter:true the filter is below the icons
is there any clever way to have the filter on the same level as the icons, space is a premuim on my page so ideally Id like them all aligned
I've solved this by modifying the tabulator css I had to give the header-filter a negative top position and it now works fine
`.tabulator .tabulator-header .tabulator-col .tabulator-header-filter
{
position: relative;
box-sizing: border-box;
margin-top: -23px;
width: 100%;
text-align: center;
height: 33px ;
} `
I've searched high and low, read tutorials and still have no answer for this :-\
What's best-practice for getting 3 images evenly spaced inside a div (one left, one middle, and one right), and keeping the distance between images appearing even as the browser size is reduced? I have tried using width- and margin-%'s with no luck. Is it more appropriate to use an in-line block solution, and if so, how?
Page in question: http://www.1000hours.co.nz/mtc/
html:
I was unable to post the html here despite reading the guide, I'm not sure why? It's in the revised JSfiddle markup: http://jsfiddle.net/87pgzLf1/
css:
#divcontainer {
float:left;
width:100%;
height:auto;
padding:25px;
margin: 5px;
#iconcontainer {
float:left;
width: 100%;
height: auto;
padding: 5px;
margin: 5px;
}
#buttoncontainer {
float:left;
width: 100%;
height: auto;
padding: 5px;
margin: 1px;
}
#icon1 {
float:left;
margin-left:20%;
}
#icon2 {
float:left;
}
#icon3 {
margin-right:60px;
float:right;
padding-left:20%;
}
You rule stack exchangers, thanks heaps in advance. Feel free to grab the background images on the page if you like as contribution <3 [disclaimer: this is not a scam but that's up to you to decide. Editors don't hate on people who give please, just because others in the world aren't always trustworthy - I am.]
Here's an update to your jsfiddle:
JSFIddle
My html page has a fieldset and inside that div I am rendering a table on the fly.
This table can have just 1 row or 1000 row.
Outer Div's height is 75% and I do not want table to go pass through that.
The HTML code looks like this
<fieldset>
<div>Some text and some HTML Elements </div>
<<h4>Field Permissions </h4>
<table class="mytable">
// Dynamically populate rows. Number of rows can be 1 or 100 or 1000
</table>
</fieldset>
Now, I wish to keep this table within outer field set but it renders past across the field set.
In the attached image, DOM element with red border is the table and with blue border is the outer fieldset.
This is my css:
.mytable{
font-size: 12px;
margin: 10px;
width: 95%;
border-spacing: 5px;
text-align: center;
position: absolute;
height: 100%;
}
fieldset {
margin: 0;
font-size: 12px;
overflow-y: auto;
overflow-x: auto;
width: 100%;
height: 100%;
}
Try adding overflow:auto; to the fieldset
fieldset{
overflow:auto;
}
Ahh wait. If i remove 'position: absolute' and it works.
Thank you all for help though
I am starting mobile first and adding css as the viewport gets larger, but i've run into an issue with a certain image scaling issue and i can't seem to make sense of it.
I'm using Sass to begin with.
#media 320 i include all my styles for a certain block of content on the page of which I have an image within this block and here is the CSS for this media query:
section.catalog-grid {
position: relative;
height: 100%;
overflow: hidden;
.cat-dvdr {
#include btm-brdr;
padding: 20px 0;
}
h4.catalog-title {
font-weight: normal;
font-size: 1.5em;
color: $blue;
top: 0;
padding: 0;
margin: 0;
text-align: center;
}
h6 {
font-weight: normal;
font-size: 1em;
color: $pale-grey;
padding: 0 10%;
margin: 0;
text-align: center;
}
img.cat-img {
#include center;
}
img.rocket {
width: 40%;
margin-top: 30px;
}
img.wizard {
width: 50%;
margin-top: 10%;
margin-bottom: 10%;
}
img.order {
width: 60%;
margin-top: 10%;
margin-bottom: 10%;
}
#media min-width 568px I actually wanted the image to be a smaller percentage scale and here's my Sass that i added to this media query:
img.rocket {
width: 30%;
margin-top: 30px;
}
img.wizard {
width: 40%;
margin-top: 10%;
margin-bottom: 10%;
}
img.order {
width: 50%;
margin-top: 10%;
margin-bottom: 10%;
}
My thinking behind this is that since i'm only adding styles that are changing as the viewport gets larger i don't have to add all of the Sass for this block (as i did at the 320px media query) but rather just add the rules that I want changed.
However what is happening is that the 320px media query image percentage size is overriding my 568px media query percentage image size when the viewport is at 568px and i'm not sure why.
Attached is a screenshot of what is going on in DevTools and i suspect that the reason that the 320px style is overriding the 568px style is due to more specificity since it notes all the parent elements of this particular image.
However i've attempted to remove the specificity from the 320px file so that the only rules that i want to be affected on the 320px file would be. In other words not include the entire block and its children but only the classes i want adjusted at this specific viewport size and that didn't work either.
Does this make sense?
Here is the screenshot:
In the 568px query, the image is targeted as:
img.rocket { ... }
In the 320px query, it's:
section.catalog-grid img.rocket { ... }
Since you have the additional specificity on the 320px rule, it will always override the less-specific rule no matter where it is located in the style sheet. You'll either need to match that specificity in your 568px rule, or reduce the specificity of the 320px rule.
In your sass, it looks like you have image.rocket contained inside the section.catalog-grid block:
section.catalog-grid {
...
img.rocket { ... }
}
That creates the compiled rule you're seeing.
I want to change JQGrid "Loading..." message to something with animated gif image. Looked everywhere but couldn't find a way. Anyone please.
Try to use
.ui-jqgrid .loading { background: url(ajax-loader.gif); }
it should work. Some animated gifs can be loaded for example from here. By the way, the div having "Loading..." message has the form
<div id="load_list" class="loading ui-state-default ui-state-active">Loading...</div>
where the id "load_list" will be constructed from the prefix "load_" and the id of the table element.
UPDATED: To remove the text "Loading..." you can either use loadtext:'' jqGrid option or overwrite $.jgrid.defaults.loadtext global setting from the grid.locale-en.js:
$.jgrid.defaults.loadtext='';
If you need to adjust width, height or any other CSS parameter of the loading div you can do it in the same way. For example,
.ui-jqgrid .loading
{
left: 45%;
top: 45%;
background: url(ajax-loader.gif);
background-position-x: 50%;
background-position-y: 50%;
background-repeat: no-repeat;
height: 20px;
width: 20px;
}
This is perhaps a more modern answer to the question using FontAwesome rather than a gif. I couldn't find where this has been answered anywhere and had to piece it together from various places including the answer above by #oleg.
Hopefully this will be helpful to others searching.
<style>
.ui-jqgrid .loading {
background-color: transparent;
border: 0px;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.ui-jqgrid .loading:before {
content: "\f110";
font-family: FontAwesome;
font-size:40px;
}
</style>
And then place the following (exactly like this) after $(document).ready(function() {
$.jgrid.defaults.loadtext='';