Prevent sifr on certain titles - sifr

I am working on an existing site which uses sifr. It was set up to substitute all h1, h2, etc with sifr. I need to prevent this from happening on just a couple headlines.
Unfortunately because of the timeline I do not have the time to change the sifr-config to be more locked down and then change all of the html pages too.
Is there some way I can add a class to an H1 to prevent sifr?

You can add the sIFR-ignore class to elements you do not want to be replaced.
Please note that any sIFR-related CSS applied to the elements in question (such as .sIFR-active h1 rules) may still apply.

Related

Load Angular Material before own styles

We have an Angular project, with Material and we're having some issues with overriding styles.
For example, if we want to change the border-radius globally on <mat-card>, we currently need to add important to the styles:
.mat-card { border-radius: $some-var !important; }
This seems to me to be caused by the material styles loading after our own custom styles. At least according to "traditional" CSS standards. So usually you could just change the load order around, and the last loaded styles would overwrite the previous.
Is there a way to achieve this? Or how are we supposed to style these kinds of elements, without adding !important all over?
You are not really supposed to "style these kinds of elements" - that's not what Angular Material is about. But some customization can be done - and a guide is available: https://v6.material.angular.io/guide/customizing-component-styles.
You especially need to understand how style is encapsulated and dynamically applied. You can control when the global Angular Material style sheet is loaded in the "traditional" way, but you cannot control when all component style is applied because some of it is dynamic. If you hope to completely restyle everything - you should probably consider a different library as it is not always merely a matter of redefining class properties.

Custom scrollbars for <vaadin-combo-box> , impossible?

I'm using vaadin-combo-box and I have a problem. I have no clue how to customize look and feel of scrollbars for the dropdown. I read about styling parts and I know how to do it but this seems to be impossible. Cant figure out the way to select #scroller element because it has been design not to be a "part" to style. However that is the only way I can think of to apply custom style to dropdown scrollbars. How can that be accomplished?
Thanks in advance for help.
#Update
Turns out that as of today there is no way of having customized styling on scrollbars for vaadin-combo-box component. Element responsible for scrolling resides inside contents shadow DOM and is inaccessible from outside nor its going to inherit style implemented on the parent part [part="content"]
The dropdown part is called vaadin-combo-box-overlay, see: https://vaadin.com/components/vaadin-combo-box/html-api/elements/Vaadin.ComboBoxOverlayElement And it is available for styling.
This allows to style the dropdown to some extent, but there is additional shadow root, that prevents to apply e.g. ::-webkit-scrollbar styles on #scroller element.
So the last option would be to make a copy of the vaadin-combo-box html file in right place in frontend directory. It happens so that that file will be used instead of the one coming from webjar. Then you can edit that html file directly. Of course this means that if there are changes in future versions of vaadin-combo-box, you need to copy again, re-apply changes

TCPDF for setting margins

I am generating PDF file using TCPDF, when I try to use inbuilt functions for setting margin, i.e. $pdf->SetMargins(), it doesn't work. My main purpose for it to remove extra space for ul and li tags, because it is disturbing my pdf format and text content mixing into each other.
Any help would be appreciated.
Set margins is for the document itself and it will not affect the ul or lis on the document. You got to set the styling for those yourself. One tip is to do the styling all inline (just pretend that you building up a page for 1990).

Wrap text in list items/buttons instead of hiding the overflow

I'm trying to override the default behavior of list items and buttons in jQuery Mobile, which has text which doesn't fit on one line as hidden overflow.
If you view this on a skinny browser window or iPhone you'll see what I mean: http://m.gizmag.com
I'd like to be able to wrap the text in the h3 and p tags of each list item onto new lines.
Thanks in advance!
Try setting a style of white-space:normal for the elements.
I just did this with an anchor (<a>) element inside a jQuery Mobile listview-styled li, and it worked to wrap the text as I expected. I used Chrome's developer tools to determine where the CSS attributes were coming from and interactively changed them to make it work the way I wanted.
--
Derek
If feasible, enclosing it inside a <div> will also make it wrap. (But finding the affected element and declaring white-space:normal is the more proper solution)
Source: http://forum.jquery.com/topic/list-items-are-truncating-text-is-there-a-way-around-this

sifr Problem - everything invisible

As far as I use sifr.setup(); every h2, h1, and so on becomes invisible. But I don't want that.
I just want the "selectors" to provide a replacement and become invisible and replaced.
How can I prevent that?
I also have another problem where every font is blue and it never gets that color from anywhere.
Sounds like you've kept the original CSS, which hides those elements. Have a look at the CSS file and remove the original .sIFR-hasFlash h1 selectors.
Can you post an example for the color problem?

Resources