I am working with jquery-datatables and want to add a background color to the header but I have several datatables and when using the following css code, changes apply to all tables equally.
How can I apply different changes for each separate table?
div.dataTable thead th,table.dataTable thead tr {
background-color: #ffeb3b;
white-space: nowrap;
line-height: 1px;
}
Related
I have documents with long titles and would like them to appear with its full name in the tabbar in qpdfview.
I researched a lot and found that QT has the functionality to allow stylesheet. I looked in the documentation and found no propriety that allows word wrap for title names of the pdf files.
The stylesheet are located in ~/.config/qpdfview/qpdfview.conf, under [mainWindow] I put
styleSheet="QTabBar::tab { font-size: 12px; margin: 0px; padding: 0px; border: 1px; max-width: 120px; }\nQTabBar::tab:selected, QTabBar::tab:hover { font-size: 12px; background-color: coral; min-height: 24px; titlebar-show-tooltips-on-buttons: true; text-align: right; }"
I'm looking for something that is impossible? Then I have to try to change what are shown in the label of the tabbar.
I have a web table, which is showing some data based on some search filter criteria. So in actual we have total-50 rows. But after applying filter only 1 is visible on the table.
Here the problem is, in DOM it's showing all 50 rows including that 1 which is visible.
<table-row style="height: 32px; line-height: 32px; transform: translateY(0px);">
<table-row style="height: 12px; line-height: 12px; transform: translateY(32px); display:none;">
<table-row style="height: 12px; line-height: 12px; transform: translateY(38px); display:none;">
<table-row style="height: 12px; line-height: 12px; transform: translateY(41px); display:none;">
Now the only option i have is to use this display part of attribute-"style"I As i want only those rows, which doesn't contain this display option none in their style attribute am trying a xpath like-
below but it's not working`
//table-row[not(contains(#style,'%display: none%')]
You need to remove those leading and trailing % symbols and add closing bracket:
//table-row[not(contains(#style,'display:none;'))]
I want to create a CSS grid with columns that have auto widths so that it fits the data in a way that makes the most sense automatically.
My problem is that I don't know have the same automatic columns widths for each column when looping through a list of items that produces a grid with 4 columns.
Temporarily, I set the first 2 columns to a set pixel amount, but I would like them to all be matching automatic widths.
HTML
<div repeat.for="milestone of milestoneHistory">
<div class="grid">
<div>${milestone.statusDescription}</div>
<div>${milestone.quantity}</div>
<div>${milestone.milestoneDate | dateTime}</div>
<div>${milestone.createDate | dateTimeFromUtc}</div>
</div>
</div>
SASS
.grid {
display: grid;
grid-template-columns: 100px 75px auto auto;
//grid-template-columns: auto auto auto auto; //This is how the first picture is styled
border-bottom: 1px solid lightgrey;
&.header {
font-weight: 600;
border-bottom: 2px solid #black;
margin-bottom: 3px;
}
}
I want it to go from this:
To something more like this this:
I am styling a Shopify site for the first and using the Minimalist theme as a base. I want to style the shopify-payment-button (But it now) button but have not been able to. I noticed looking that the page source code there is:
<style id="shopify-dynamic-checkout">
.shopify-payment-button__button--hidden {
visibility: hidden;
}
.shopify-payment-button__button {
border-radius: 4px;
border: none;
box-shadow: 0 0 0 0 transparent;
color: white;
cursor: pointer;
display: block;
font-size: 1em;
font-weight: 500;
line-height: 1;
text-align: center;
width: 100%;
transition: background 0.2s ease-in-out;
}
//etc, etc
being injected into the <head> which is overriding my styles. I can't find where this comes from to remove it. Would anyone know how?
Shopify injects styles and js for some elements on site inside {{ content_for_header }}, which you will find in theme.liquid file.
This tag contains default shopify files as well as files for some integrations and apps. For example if you install facebook pixel through shopify, the code for it will go to {{ content_for_header }}
It is not possible to control what goes to this tag directly. If you just need to change styling then I recommend to just overwrite styles, in worst case if you need to, use"!important" tag in css
Rendering a table, with boarders, to PDF using phantomjs leaves each individual cell bordered but with a gap between each cell. The table is displayed correctly, without such gaps, on a web page.
in my CSS I've tried setting:
border-collapse: collapse;
border-spacing: 0px 0px;
to no avail, I need to get rid of those gaps between cells in my PDF.
Any ideas would be gratefully received.
Yours Allan
Be sure to add the border-spacing and border-collapse rules to the <table> and not the <td>. This is my phantomjs-specific rules:
.table {
border: 1px solid black;
border-spacing: 0px 0px;
border-collapse: collapse;
}
.table th,
.table td {
padding: 5px;
border: 1px solid black;
margin: 0;
}
Note that this is a bit different than 'normal' (not phantomjs-pdf) css where your border-collapse can be located on the <td> element.