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!
Related
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"
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;
}
I have a shipping/billing input form and I'm having trouble styling the input fields to be the same width...
The Problem:
-a field <input type="text" size="X" /> appears to render with different sizes in different browsers (see link).
-In addition, select fields seem to render on a differently as well.
-Chrome/safari do not seem to respond to the font-size property for select fields.
Any guidance on how to stylize the size of text-input and select fields cross-browser would be oh so very helpful.
Must I result to having a different sytlesheet for each browser... just for these input fields?
-thanks
Remove that inline "size" attribute, first. You should use CSS to style the input form:
input[type="text"] {
width: 100px;
/* You can also style padding, margins and everything else,
* just remember that inputs of type "text" can only be one line.
*/
}
Don't use [type="text"] as a selector. I was just using it in this example to associate with input fields of type "text", but it's not fully cross-browser supported. You should give your text input fields their own class to stylize with.
Also, don't forget your CSS reset to make sure your margins, borders, et. al. are reset for all browsers. http://meyerweb.com/eric/tools/css/reset/
Nowadays, it's possible to normalize the width of "sized" inputs, using the ch unit, which has reached a decent browser support.
Unfortunately, it's still not possible to write:
input[size] {
width: attr(size) "ch";
}
So we have to style the widths we know we'll be using:
input[size="10"] {width: 10ch;}
input[size="20"] {width: 20ch;}
input[size="30"] {width: 30ch;}
/* etc. */
This can easily be automated using a CSS preprocessor.
UPDATE:
I made a test fiddle. As of today (feb. 2018), this is working on Windows 10 with Chrome 63, Edge 41, FF 58. On IE 11, it fails. I haven't tried on OS X.