I configured Gridjs for datatables
is there any solution/ option to show/hide column for the final user and also reorder the columns?
Thanks
Bye
I was able to hide columns by adding something along these lines in my CSS.
[data-column-id="DatabaseID"] {
display: none !important;
}
It's a little hacky but it got the job done since I didn't find anything built into gridjs although you can probably add this into the style property of the setup as well.
Related
I'm currently working on an online code editor. (like jsfiddle codepen etc...)
I got everything working, but I ran into one problem; If a user does something like this:
button {
background-color: red;
}
It also changes the properties of my "run code" and "reset" button I made.
same thing with other things like a div;
div {
padding: 500em;
}
because this will also change the div's Im using in my own code.
I fixed the issue using !importand tags after every line in my css but I'm wordering if there is any other way to fix this? or is !importand really the only way.
As said in the comment by CBroe. To do this you can use iframe.
A more original solution would be to create a web component with a shadow root (which isolate the style too). The support for this is not too bad even if it's fairly new :
But, I've used it myself and it's a little bit harder to understand at first
I have a problem I try to hide date comment on my blog but didn't work can someone help please
Can you post a piece of code of what you tried ?
Because hiding and showing HTML elements is not a very hard thing to do, so it could be the placing of the hide/show statement or it could be the syntax.
It is difficult to tell what is happening without seeing the code.
On Blogger. To hide data comment you need to target the element .datetime
Because there is already a display attribute specified to .datetime.secondary-text in your snipped code, You can change this attribute from display: inline-block to display: none or use the following CSS rule to override the existing one.
.comment .datetime.secondary-text { display: none }
Today I was trying to create a dummy css rule for testing and investigation.
.dummy {
some-style : somevalue;
}
Ideally the class should have no visible effect. I want to be able to apply the class to elements but cause the least visible effect possible on any elements it is applied to. For example
<div class="dummy"> should look and behaves as much as possible like <div>
I did not want the class to be empty. Can anyone suggest a style that I could add to the class that would have the least visible impact when applied to a general html element? I can't think of anything completely harmless.
UPDATE: I wanted to add the style to some existing html. The reason was to use the style as a marker for diagnostic purposes. It would help me see when and where styles and stylesheets were getting loaded/cached and where and why some styles were getting overridden, sometimes by the browser defaults which seemed odd. At the time I didn't have exclusive use of the system I was working on so I wanted something that was going to be invisible to other users but I could see in Developer Tools.
UPDATE 2 : the html/css wasn't written by me and I didn't have my own environment in which to work. I was trying to investigate some problems in-situ in someone else's system. I had tried using DevTools in the browser but wasn't getting anywhere with that. I wanted to be able to make some small changes to their html/css to aid my diagnostics. I didn't want them to have any obvious effect on the system for other people (except in DevTools, viewed by me).
It was a Wordpress site and they only had two environments, one for live and one for testing. I was working with the test system. There were other people testing at the time, though mainly checking content.
The real thorny problem was why was the font-size in the calendar widget much larger than everything else on the site? Inspecting using DevTools I could see the font-size style was getting overridden by the browser default style when it seemed to me there were other css selectors that should have taken precedence. It looked bizarre. In the end it turned out to be a missing !DOCTYPE tag in the html. So nothing to do with the css itself.
I didn't like this way of working, fiddling in someone's system, but there wasn't much else to do and it did help to resolve the problem for them.
Hopefully I don't have to do this again, but ever since I have been wondering what was the most harmless style that I could have used?
I thought I would ask here as there must be people who know CSS better than me.
You can use this:
.dummy{
min-width: 0;
min-height: 0;
}
If you just need anything beeing set you could assign rules that are default anyway. For block elements like div set
.block-class { display: block; }
And for inline elements like span
.inline-class { display: inline; }
Of course it could be an issue doing so in some rare cases but in general it's quite harmless I guess.
In principle, for any property you can have an arrangement like this:
div {
some-style : a-valid-value-for-some-style;
}
.dummy {
some-style : a-different-valid-value-for-some-style;
}
And .dummy's style will have an effect, no matter what some-style is.
Your best bet is to make use of CSS variables. These are custom properties and start with a double hyphen. so
.dummy {
--dummy-style: foo;
}
will make --dummy-style a property with value "foo". So long as you don't employ the variable as the value in another property, it will have no visible effect.
This question already has answers here:
wildcard * in CSS for classes
(4 answers)
Closed 9 years ago.
I want to use regular expressions to define a complex set of corner options with regard to the border radius
I want a way to define the class corner* without the need to have each combination in the html or css
example:
this is my css as it is now:
.corner-tl {
border-top-left-radius:8px;
}
.corner-tr {
border-top-right-radius:8px;
}
.corner-bl {
border-bottom-left-radius:8px;
}
.corner-br {
border-bottom-right-radius:8px;
}
however I want to be able to apply all, some or none of the above as shown below, a box with only top left and top right is done simply with the following code:
<div class="corner-tl corner-tr">
These is the obvious solution - however I will be applying the same logic to many things like padding and margin, border etc so the classes will become very long. The reason for doing it this way is so the actual value (8px) can be manipulated via php to every and all instances for my CMS. What I would rather use is this:
<div class="corner-tl-tr">
is there a way within css to do this using a regular expression so that anything with 'corner' and anything after it can combine to add any amount of corner effects to the single class?
without knowing how to do the expression what I want is this:
.corner*-tl* {
border-top-left-radius:8px;
}
for each corner where the * is anything before or after but only after 'corner'. This way I only need 4 classes for the many possible combinations.
Example
I want to use corner-tl-tr-br in my html to create a div with a radius in top left, top right and bottom right. I also want to be able to use corner-tr-tl-br to create the same, but without writing a class for each variation. If I can't find a solution I will be forced to use inline styles as the possible combinations are lots. Also my database will be storing these values which could be added or not added in any order for any div over the entire site. It would be nice to do this in four lines where each line can be combined into one. It may not even be possible but the examples so far only show me single classes, not combined ones.
If I can help it, I don't want to have to make many styles, like - corner, corner-tl, corner-tr, corner-bl, corner-br, corner-tl-tr, corner-tr-tl, corner-tl-bl, corner-bl-tl, corner-tl-br, corner-br-tl and so on... Theoretically corner on its own is not required as that will have no radius set, so it is the same in html as not applying the class but may be needed to achieve the others, the rest however are possible in my system. I want to be able to apply any combination in a single class that has an expression in css for the 4 options.
Starts with
[class^="corner-"] {
}
contains
[class*="corner-"] {
}
Ends with
[class$="corner-"] {
}
I've been trying unsuccessfully to set an HTML "select" field size in Bootstrap 3(latest) to normal (not 100% width). Do you know an elegant way of doing this, without hacks like tables around fields.
I also don't want to put a select field in a bootstrap column since then I'll have indent due to borders.
Custom styles with specific sizes is also not pretty in my opinion, because all I want is for the field to be only as long as the longest content (default behavior of a select)
Perhaps there is a really easy way to circumvent this since Bootstrap decided to make all selects (using form-control class) stretch all the way, looking forward to your illuminating suggestions )
Try setting the width to auto or initial?
width: auto;
or
width:initial;
http://www.w3schools.com/cssref/pr_dim_width.asp
select
{
width: auto;
width: inherit;
}