I have a bootstrap html table. filtering is used in the field. how do I make sure that the table contents are hidden before filtering starts?
filter script and html table:
$(document).ready(function(){
$("#surname").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#table tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<table class="table" id="table">
<thead class="thead-light">
<tr>
<th></th>
<th class="text-center" scope="col">Guest</th>
<th class="text-center" scope="col">Org</th>
Bootstrap v4 uses d-none for setting anything to "display: none".
Set each on each <tr class="d-none"> and they will be hidden on default. In your code, just after you filtered everything, let's show them again using jquery (not tested):
/* ... */
$("#table tr").filter(function () {
const show = $(this).text().toLowerCase().indexOf(value) > -1;
if (show) {
$(this).removeClass('d-none');
}
});
This post is more of a comment on BS-4 than anything....
Your requirement is very simple - first hide all the tr's and then on the filter - show the ones that meet the requirement.
Soap box moment -
I am not in favour of the new BS-4 utility classes and use of "!important" on everything.... to the casual observer - it may well be nice to simply apply the class to the elemnet and get the outcome - but when you look at the code or the less files from BS - EVERY SINGLE UTILITY CLASS IS STYLED WITH "!IMPORTANT"....
this can be seen in the following picture which shows a span with 4 utility classes - and ALL four classes are styled with the use of !important..... that alone is enough to make me re-consider BS as a viable option for creating sites - imagine all the important tags that you will have.
I also do not love the new approach of using a utility for every single style choice... imagine a div with 4 different margins styles, four different paddings, and four different border styles..... a utility class for each.... eek
Just my opinion - but for something as simple as display: none... do it with css and leave off the !important.
As the title says, for example, I want to create a CSS class named myViewport to overwrite ui-grid-viewport (ui-grid).
This should have been discussed several times here. You can disable the horizontal bar with enableHorizontalScrollbar option. I don't think you would require css to achieve this unless you are trying out something different.
$scope.grid = {
enableHorizontalScrollbar: 0
};
It can take any one of the following values:
0 = disable;
1 = enable;
2 = enable when needed;
And note that you would need to pass the uiGridConstants to your controller.
You shall also check this github repository for more info.
https://github.com/angular-ui/ui-grid
I find a solution it's CSS element>element Selector, I add an id to parent element for example:
<div id=""test>
<div>
<div class="ui-grid-viewport(object)">...</div>
</div>
</div>
in the style.css
the name of class should be div#test >div> .ui-grid-viewport{}
this is a solution not simple, because I should find the position of ui-grid-viewport.
I am trying to save an Excel table as an HTML file.
I have prepared an external CSS file which I want to use that contains my styles.
However, Excel saves the table as HTML with several style options which, as they are applied in-code to specific elements, override my CSS file.
Is there a way to save the table from Excel without the style elements?
Specifically, the element I'm looking to get rid of is "table-layout: fixed;" which hampers my attempts to control the table width.
Thank you.
you could easily do this with some javascript, import the html file in a webpage and just add this to your script and add it when needed.
var e = document.getElementByTagName('table')[0]; //assuming the table is the 1st one to appear
// or get by id with document.getElementByID('IDhere')
e.removeAttribute("style");
or with multiple tables that have the attribute
var e = document.getElementByTagName('table');
for(var i = 0; i < e.length; i++) {
e[i].removeAttribute("style");
}
How to apply behaviour of some classes into another, without changing html?
I want:
<table class="name">
to have behaviour like this:
<table class="table table-striped table-bordered table-condensed">...
It is possible to achieve this with css?
UPDATE:
How to do this with preprocessors ( LESS / SASS )?
There is 2 ways to do this :
Manually adding classes to every table using jQuery
Using this method will mean you will see your site "flicker" the new classes once the javascript gets loaded (because CSS is less render blocking)
$('#name').addClass('table');
// or
$('table').addClass('table'); // Every table gets the class
Using a CSS Preprocessor like LESS or SASS (this exemple uses LESS)
#name { // Or table {
.table(); //This is the bootstrap mixin for tables
}
How would I use multiple CSS stylesheets in the same HTML page where both stylesheets have a banner class, for instance. How do you specify which class you are referring to?
Style sheets are, effectively, concatenated into a single style sheet in the order in which they appear in the HTML source.
The normal rules for applying rulesets then apply (i.e. by specificity with the last ruleset that defines a given property winning in the event of a tie and !important throwing a spanner into the works)
Yes, you can include multiple style sheets, but you need to label them as alternate style sheets and give the user some way to activate them using JavaScript - perhaps by clicking a link.
To create an alternate style sheet:
<link type="text/css" href="nameOfAlterateStyleSheet.css" rel="alternate stylesheet" title="Blue" />
Next create a method in your Javascript file that will: 1. Load all the style sheets in an array 2. Example:
function getCSSArray()
{
var links = document.getElementsByTagName("link");
var link;
for(var i = 0; i < links.length; i++)
{
link = links[i];
if(/stylesheet/.test(link.rel))
{
sheets.push(link);
}
}
return sheets;
}
Then go through the array using some type of if/else loop that disables the style sheets you don't want and enables the style sheet you want. (You can write a separate method or insert the loop into the method above. I like to use the onload command to load the CSS array with the page, then call the printView method.)
function printView()
{
var sheet;
var title1 = "printVersion";
for(i = 0; i < sheets.length; i++)
{
sheet = sheets[i];
if(sheet.title == title1)
{
sheet.disabled = false;
}
else
{
sheet.disabled = true;
}
Lastly, create code in your HTML document that the user will activate the JavaScript method such as:
Link Name
You can't control which you're referencing, given the same level of specificity in the rule (e.g. both are simply .banner) the stylesheet included last will win.
It's per-property, so if there's a combination going on (for example one has background, the other has color) then you'll get the combination...if a property is defined in both, whatever it is the last time it appears in stylesheet order wins.
You can't and don't.
All CSS rules on page will be applied (the HTML "knows" nothing about this process), and the individual rules with the highest specificity will "stick". Specificity is determined by the selector and by the order they appear in the document. All in all the point is that this is part of the cascading. You should refer to one of the very many CSS tutorials on the net.
You never refer to a specific style sheet. All CSS rules in a document are internally fused into one.
In the case of rules in both style sheets that apply to the same element with the same specificity, the style sheet embedded later will override the earlier one.
You can use an element inspector like Firebug to see which rules apply, and which ones are overridden by others.
The one you include last will be the one that is used. Note however that if any rules has !important in the first stylesheet they will take priority.
Think of it as your stylesheet(s) referring to ("selecting") elements in your HTML page, not the other way around.
Here is a simple alternative:
1/ Suppose we have two css files, say my1.css and my2.css. In the html document head type a link to one of them, within an element with an ID, say "demo":
2/ In the html document head body define two buttons calling two JS functions:
select css1
select css2
3/ Finally, in the JS file type the two functions as follows:
function select_css1() {
document.getElementById("demo").innerHTML = '';
}
function select_css2() {
document.getElementById("demo").innerHTML = '';
}
you can include more styles.
<link rel="preload stylesheet" href="style1.css" as="style">
<link rel="preload stylesheet" href="style2.css" as="style">
<link rel="preload stylesheet" href="Folder/Subfolder/style3.css" as="style">
Maybe it's not a 'best-practice'... but it has potential: you may have a 'palette.css' where u keep color-classes only that are 'shared'... or to think in a more 'componentistic way'
Rawly you can do similar with 'mediaquery' to support different resolutions
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can't. The last stylesheet you specify will be the one html page will use. Think of it as a big single .css document.