I want to code format my Less stylesheets similar to how Bootstrap does it - by column. I don't know if I'm languaging it right, so I've included a screenshot of what I'm looking for:
Currently I use either Sublime Text or Visual Studio Code, or, I guess Vim sometimes, but I do most coding in the first two. I can do this manually, but it's a pain in the *ss.
I've also experimented with Sublime plugin AlignTab, but I didn't get anywhere.
I've looked quite a bit for how to do this, but I concede that it's possible I'm missing something obvious. I'm tempted to email Bootstrap developers, and ask how they do it. Can't be too hard, can it?
There are several extensions in the marketplace that aim to solve this issue. I just installed Align, the most popular one, and then copied the first less code I could find from http://lesscss.org/
#base: #f938ab;
.box-shadow(#style, #c) when (iscolor(#c)) {
-webkit-box-shadow: #style #c;
box-shadow: #style #c;
}
.box-shadow(#style, #alpha: 50%) when (isnumber(#alpha)) {
.box-shadow(#style, rgba(0, 0, 0, #alpha));
}
.box {
color: saturate(#base, 5%);
border-color: lighten(#base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
I then selected the code and used the align command and got this:
Some of the other extensions might not require you to select the text first, or might format differently, so don't be afraid to try them out.
If you're asking if there is a built-in way to do this, though, not to my knowledge.
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!
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 want the plugin to create pdf-files and that works well when you only use standard characters but if you want special polish characters they don't show up. For example: "Wartość" will be "Warto".
I found the following recommendation:
<style>
#font-face {
src: url(path/to/arial.ttf);
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: cp1250;
}
body {
font-family: "Arial Unicode MS", Arial, sans-serif;
}
</style>
But how can I make this work? url(path/to/arial.ttf) How do I do that, cant find any .ttf-file on WIN10 and how can I make it work on a deployment?
If I try to use any font on C:\windows\Font\ I get Null pointer exception. Probably b'cause there is no file with that name or path wrongly expressed.
Please help, I thought it should be a simple thing to create a polish version of a report but this became a disaster.
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'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;
}