I am using Adam Lynch's flexible data tables with CSS grid code. It is a really neat project. https://adamlynch.com/flexible-data-tables-with-css-grid. I have a couple questions on the project.
I notice that when I scroll to the right hand side of the column with the horizontal scroll bar, I can no longer resize any of the columns. I have been trying to figure out how to fix this for a while now to no avail.
I notice that if I resize one column, I can resize a different column immediately afterward with no problems. However, if I attempt to resize the same column twice consecutively, I cannot drag the separator the second time. This problem does not exist in Firefox, but does exist in Google Chrome.
Okay. Found the answers.
Answer to question # 1... Need to explicitly change the overflow property of the table element from the default value 'visible' to 'auto' or 'scroll'.
overflow: scroll;
display: grid;
border-collapse: collapse;
min-width: 100%;
/* These are just initial values which are overriden using JavaScript when a column is resized */
grid-template-columns:
minmax(150px, 1fr)
minmax(150px, 1.67fr)
minmax(150px, 1.67fr)
minmax(150px, 1.67fr)
minmax(150px, 3.33fr)
minmax(150px, 1.67fr)
minmax(150px, 3.33fr)
minmax(150px, 1.67fr);
}
Answer to question # 2...Need to prevent the default behavior of the browser on a mousedown event. I ported this code to Vuejs. In Vuejs, the syntax is #mousedown.prevent="resizeInit"
Related
I have some datatables (as in datatables.net) running in PHP within a Laravel 9 framework. Everything works fine but the select length drop down is too small and results in the down arrow impinging on the number as below:
I have tried to find the css class which appears to be:
div.dataTables_wrapper div.dataTables_length select {
width: auto;
display: inline-block;
}
but changing this seems to have no effect - min-width etc. And I did clear all caches!
The rest of it is perfect.
Thanks!
How to hide kendo scheduler timeline rows if there are no events on the week. Did anyone face similar issue or have idea to solve this?
How to decrease height of k-slot?. I tried the following css but no luck
.k-scheduler-dayview .k-scheduler-table td,
.k-scheduler-weekview tr:nth-child(2) .k-scheduler-table td,
.k-scheduler-monthview .k-scheduler-table td {
height: 1em;
padding: .334em .5em;
font-size: 100%;
}
Can anyone resolve this?
The desired behavior (if I understand you correctly that you need to filter the groups when no events are available in given group) would require custom solution. For example you can use the dataBound event to check if given group have no events inside it. You can check how many events are rendered in each group by checking the groups property of the current view (which gen be get from view method). Finally you can hide the groups that you don't need by filtering the target resource dataSource (e.g.: scheduler.resources\[0\].dataSource.filter).
I'm building a site in Joomla 3 on T3 framework.
I'm having to use LESS for the first time, but am experienced with CSS.
The site will have differently themed landing pages. These will all be identical except for the colour scheme.
I am attempting to set up a colour scheme in the T3 'variables' less file and then implement the colours - the colour will be different for many core components - such as H1, P, DIV Background Color, etc.
So if I set up, say, a master colour for Thailand's page, I create this rule in the variables.less file:
#thai: #e55092;
and then my knowledge of exactly how LESS compiles to CSS falls flat and I lose my entire train of thought.
Because I now want to be able to set up a landing page for Thailand in the T3 template. I need to be able to use the class 'thai' in various places in this page - for instance, the H1 text should be coloured #e55092, an aside background should be #e55092, an HR should be #e55092 ... for THIS page only.
I hope this isn't a too open question but what would be best practice for achieving this, keeping my code clean and fast? My current line of thought is that I create a whole bunch of rules in LESS along the lines of:
thai.h1 { color: #thai }
thai.button [ background-color: #thai }
(excuse syntax - very new to LESS and not sure what's possible or correct)
But isn't that defeating the whole purpose of using LESS in the first place?
I think your question is very broad indeed. Depending on your situation:
One CSS file for all pages. You can consider changing selector order The code for a button can then look like that shown beneath:
.button {
border: 1px solid white;
.thai & { background-color: red;}
.japanese & { background-color: yellow;}
}
In your HTML pages: <body class="thai"> and so on..
Compile different CSS files for each landing page
In Less you can override a variable by putting the definition afterwards
You should first define a main file, for the button example this button.less file should contain something like that shown below:
#button-background-color: orange;
button { background-color: #button-background-color; }
Now you can define you thai theme file (thai.less) as follows:
#import "button.less";
#button-background-color: red;
Or alternatively compile different CSS files using the modify-var option:
lessc button.less --modify-var="button-background-color=red" thai.css
I have a table that takes the "table-responsive" class and works as expected when the screen shrinks to ~760px but i want the behavior in 1300px itself. Is it possible? I tried media-queries but i guess i didnt get it well. is that what I'm supposed to use ?
IIUC, this will be fixed in Bootstrap v3.2.1.
Until then, you can easily add the fix manually:
.table-responsive {
overflow-x: auto;
}
I've written a fiddle (http://jsfiddle.net/929Zb/5/) for this that reduces the problem to the minimal markup that demonstrates the problem... which is my Highchart isn't being rendered in Safari (version 5.1.7 on Windows but I've also run it in the latest version on a MacBook.)
My requirement is a multiple column layout of widget as shown in this screenshot from the fiddle running in chrome :
and here's the same thing running in Safari :
Safari has rendered SVG and hovering over it in debug highlights the elements in blue in the HTML but it just can't be seen!!
The css I'm using to display the column is shown below. If you change the column count from 2 to 1 the chart displays fine in Safari!!
.widget-container
{
-webkit-column-count: 2;
-webkit-column-gap: 2em;
-moz-column-count: 2;
-moz-column-gap: 2em;
column-count: 2;
column-gap: 2em;
}
.widget {
/* This is required to keep the widget div's together and not break them over columns */
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
margin-bottom: 2em;
}
Is there a change to the CSS that will make Safari work or will this require a javascript fix? I pondered whether this was something to do with CSS transitions so tried turning off animations but given it's still animating I've clearly got the syntax wrong. I have a time constraint on this problem so I'm posting now but will report back if I have any progress.
I think this is some CSS problem with displaying chart in any column different than first one. If you disable colum-break-inside it also works.
What can I suggest is to disable position for chart container: http://jsfiddle.net/929Zb/17/
.highcharts-container {
position: inherit !important;
}