Since my page layout changes at different responsive breakpoints, I need a way to change the offset of my Popper programmatically after it is created. I see that I can create a custom Modifier, and potentially do it that way, but was curious if there is a simpler way, since the offset Modifier does everything i need, i just need to be able to change the value.
Related
Google's Material Design 3 uses a so-called state layer for interaction states like hovering, focusing or pressing an element. These states are represented by adding a layer with a fixed opacity onto the element to change its colour.
I am currently creating a web application with Vue.js and using tailwindcss as my CSS framework, and was wondering if there is a simple way of creating these state layers. As far as I am aware, there are two possibilities.
I can either use a semi-transparent HTML element that has the same size, shape and position as the original element and set its colour and opacity to the required values. However, doing this for every element that can be interacted with would be a lot of work, greatly increase the size of my HTML code, and I do not think it is an elegant solution.
The second way I can think of is calculating the resulting color of adding the layer to the element, and setting this value when the user interacts with it. Calculating these values manually and stating them explicitly would also be a lot of work, and it would mean that whenever I change one of the content colours, I would have to recalculate all colours for interaction. Another possibility would be to calculate the values at runtime, which has the added benefit of making them dependant on the content colours, but that would mean that I have to access the tailwind variables inside my JavaScript code, and then set the corresponding classes by concatenating the tailwind class name with the calculated value.
While all of these solutions would be possible, I feel like they are neither simple nor elegant. Is there another way that I did not think of, or is the concept of state layers just not meant for these frameworks?
I am make a tooltip that will be triggered by multiple elements. Minor details in the tooltip will be changed by each trigger elements. My question however is, is there any way to create a single tooltip, that can be triggered by more than one element?
You may want to take a look at virtual elements https://popper.js.org/docs/v2/virtual-elements/.
With this you can have one object which holds tooltip's coordinates and then later in the code you can trigger the change of coordinates from other elements.
When ever the row number of the lists are high (what I mean is sometimes even only 170-200 rows), on scroll down/up, DataTable refreshes itself somehow and all the custom css, click functions and events are being removed. Moreover the list is sometimes freezing or scrollbar is getting stuck at the bottom.
If I dont use DataTable.groupByColumn(5000) the performance and css is better but I still loose click events on the table.
The reason why I use DataTable.groupByColumn() with an extreme number is the row style. As default the background color of rows are black and white, it is not easy to read and confusing. But anyhow even if I don't use groupByColumn() I am loosing onClick functions when I scroll down on high row number lists...
Is there a way to avoid this 'refresh' or is there an optimal row number to keep in mind when we make development on DataTable ?
As an example I've created 285 row list with random strings to check if the problem is arising from our data structure but unfortunately same problem occurs in example too.
Do we have the chance to optimize it ?
EDIT
I have realized that DataTable uses 'clusterize.js', that's why I have used event delegation instead of giving functions to each row but this time all functions are working delayed depending on the length of the list.
Anybody has any idea ?
As you've found yourself, the DataTable is just a simple wrapper for the Clusterize.js library. Any potential optimizations would therefore have to be discussed with the library's community.
I have a really big web project based on Twitter Bootstrap.
I need to totally disable responsive features.
But Bootstrap page instruction for disabling responsive features (see this http://getbootstrap.com/getting-started/#disable-responsive ) includes a really hard step to do : For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
But I don't want to modify hundreds of .php and .html files and change all col-md-* styles to col-xs-*, what can I do?
As steps provided by bootstrap, its really hard to do change in hundred of files to achieve this. But CSS is the thing that could not get change easily by any function or script. You will need to put manual efforts.
One way is that instead changing class names in huge number of files, do edit css file of bootstrap and set common changes for classes of different resolution. Like if you have width 1200px to class ".col-xs-12" and it is working for you then reflect this change to other classes like ".col-sm-12" etc.
I created a child theme based on the responsive i-transform theme http://templatesnext.org/itrans/, but in the end it feels like I'm spending a lot of time undoing the i-transform CSS. However, if I dequeue the entire parent stylesheet, things get out of whack because I used the default parent wrapper here, a div there, etc. While it runs fine with the parent stylesheet, it's very sloppy and I'm sure it slows down the page some to have all these layers of overridden CSS.
If I had the time, I could go through the 4000+ lines of the parent stylesheet and copy out what I need. But I'd rather not. Is there some way to get a clean copy of only the css that my pages use... the css that "wins" and is really being displayed, if that makes sense?
You can't, or at least not like you mean. You're trying to both create a new stylesheetand still want to use some of the code from the original stylesheet (the default wrapper you mention above). You can't completely ignore (i.e. delete) the original stylesheet and still use part of it.
If you still want to use part of the original stylesheet in your new one, just copy and paste the pertinent bits across.