I am using ngx-extended-pdf-viewer(4.0.0-alpha.5) in Angular 8 and pdfs are showing up correctly except for when I am using single paged pdfs. For single paged pdfs, the preview is blank. Is there any solution?
My code is here
<ngx-extended-pdf-viewer [delayFirstView]="250" src="{{apiBaseURL}}unprotect/estimate-report/view/{{currentestimationid}}/{{estimationReportType}}" useBrowserLocale="true" height="80vh" [textLayer]="true"></ngx-extended-pdf-viewer>
[View image][1]
[1]: https://i.stack.imgur.com/foGsi.png
Issue resolved by adding the CSS rule
#media print {
#printContainer>div {
display: inline;
}
}
I've added the ng-deep and finally the preview appears:
#media print {
::ng-deep #printContainer > div {
display: inline;
}
}
Related
Emmet autocomplete doesn't add semicolon after css rules inside media query.
div {
display: none;
}
#media (max-width: 991.98px) {
div {
display: none
}
}
Outside media query
Inside media query
This is a bug in the plug-in which is under investigation. Keep track of it here: https://github.com/emmetio/sublime-text-plugin/issues/173
UPDATE: This has now been fixed.
All my secondary header navigation links can only go (top left, bottom left, top right, etc.).
Currently enabled as "top left", however I want two out of those four links to be "top right".
Current code works perfect, other than after the 75% resizing mark, the links discombobulate.
#media screen and (min-width: 800px)
{
a[href="/terms-of-use"]
{
position:absolute;
right:120px;
}
a[href="/privacy"]
{
position:absolute;
right:200px;
}
}
It has been said that using absolute positioning within flex-box will not work reliably. I'm going to guess that, because I was viewing your site in Firefox and Chrome and did not see the issue, that you are viewing your site in Safari, where the issue can be seen.
In any case, due to the above, I would recommend using Javascript in order to move the navigation items to the desired location. Then, add some additional CSS in order to get those newly-moved items to look like the others.
First, remove the CSS you've added that addresses those navigation items.
Then add this via site-wide Footer code injection:
<script>
(function() {
var targetLinks = document.querySelectorAll(".Header a[href='/terms-of-use'], .Header a[href='/privacy']");
var targetParent = document.querySelector(".Header-inner [data-nc-container='top-right']");
var i;
for (i=0; i<targetLinks.length; i++) {
targetParent.appendChild(targetLinks[i]);
}
})();
</script>
And finally, add this via the CSS Editor:
body:not(.tweak-header-secondary-nav-hover-style-button):not(.tweak-header-secondary-nav-inherit-styles) [data-nc-container='top-right'] .Header-nav-item {
margin: 0 .618em;
padding: .618em 0;
font-family: myriad-pro;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
[data-nc-base="header"] [data-nc-container="top-right"] [data-nc-element="cart"] {
padding-left: 33px;
}
[data-nc-container='top-left'] [href='/privacy'] {
display: none;
}
[data-nc-container='top-left'] [href='/terms-of-use'] {
display: none;
}
Current Bootstrap Version 3.3.7
Are all media queries for bootstrap-sass deprecated, I tried running one media query and kept getting errors below.
How can I use media queries in bootstrap-sass?
See Image Below
See Error Below
My style.scss file
#media (min-width: #screen-lg-min) {
.navbar{
height: $navbar-height * 2;
}
}
Variables in SASS are marked with a $ sign, not #. So the line should look like this:
#media (min-width: $screen-lg-min) {
.navbar{
height: $navbar-height * 2;
}
}
I'm using Bootstrap 3 and trying to remove/exclude the breakpoint between medium and large devices. I have a existing website which is optimised to 970px which looks great. What I am trying to do is remove the md > lg breakpoint so that even on large widescreen desktops the maximum body width is 970px and still centred.
Anyone know if there is a quickfix solution to this?
Any advice would be much appreciated
Decbrad
If you're overriding the bootstrap breakpoint (and using containers properly), adding this below the bootstrap breakpoint media queries in the bootstrap CSS file should work for you.
If using LESS
#media (min-width: #screen-lg) {
.container {
width: 970px;
}
}
OR, you can simply override the bootstrap container in your own CSS (just make sure you load it after bootstrap.css)
#media (min-width: 970px) and (max-width: 2500px) {
.container {
width: 970px;
}
}
OR you can find the media query in the bootstrap.css file on around line 1240 and simply change it there
#media (min-width: 1200px) {
.container {
width: 1170px; /* change 1170 to 970 */
}
}
the less way is good but this one is more flexible and reliable:
#media (min-width: #screen-sm) { .container { width:#screen-md; } }
Because in bootstraps default values the width of #screen-md is 992px.
Now you will just have a breakpoint for small devices (smartphones) and any other bigger devices. they will all get the same layout
You can set a max width on the containers:
.container-fluid,
.container {
// Disable large-desktop breakpoint.
max-width: $container-md;
}
No need for media queries or anything.
The $container-md value is typically 970px, unless you changed the $grid-gutter-width. For LESS, replace the $ of variables with an #. For regular CSS, replace the variable with the hard coded pixel size.
Im using Ext.Msg.alert() and 'Ext.Msg.show()' to show my message box. But so far only the Title is displayed with an OK button, but the message field is not shown. There's no error when I run the code. Anything that I miss?
Below is my code when using Ext.Msg.alert(),
Ext.Msg.alert('Title', 'Why you no display!?', Ext.emptyFn);
and when using Ext.Msg.Show(),
Ext.Msg.show({
title:'Title',
message: 'Why you no display!?',
buttons: Ext.MessageBox.OK,
fn:Ext.emptyFn
});
Update on 27th August 2013
I found that the message box works when running on IOS Devices, but not on Android and on Desktop Browsers.
After digging trough the web, I finally found the solution. It turns out the fix is in the sass file in base folder.
The original post is here.
In short,
Go to touch\resources\themes\stylesheets\sencha-touch\base\mixins, open the _Class.scss file and replace the whole block of #mixin st-box with the code below, and then re-compile your css (e.g. use compass watch)
#mixin st-box($important: no) {
#if $important == important {
display: flex !important;
display: -webkit-box !important;
display: -ms-flexbox !important;
} #else {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
}
}