As you can see from the image, the iframe content is too big and it hides the X button + Sources bar.
Is there any option to make it's content a bit smaller?
This css seems to be the problem:
##media only screen and (min-width: 767px) {
#uw-glamor-396 .css-5anb0a, #uw-glamor-396 [data-css-5anb0a] {
position: absolute;
top: 50%;
left: 50%;
width: 767px;
height: 610px;
transform: translate(-50%, -50%);
border-radius: 5px;
}
}
If the height would be 450px instead of 610px it would fix the issue.
This fiddle raises the issue, open it with your laptop and expand a little bit the result window to get the Drag and Drop box.
This is how it looks like without the bookmark tab in my laptop with 100%, I use Chrome:
Unfortunately, it isnt possible to change this currently. Its a known issue but up until now there havent been any complaints that i know of. Typically apps that host the widget are in desktop resolutions so there's enough vertical space or its in mobile res and then the widget switches to the mobile layout.
Ill look into promoting this issue internally.
In the meantime, can you share some details about your app, how does it display the widget? What makes it not have enough vertical space?
Pretty straightforward problem. Have scroll-able ion-content in my Ionic4 application. I want to be able to print it gracefully by applying #media only print styles. I'm almost there, but I have one major problem. I cannot get the vertical scrollbar to disappear for printing. Additionally, I only ever get one page printed, containing only the content that is in view when I print the page. I've scoured the web for solutions, and come across and tried various suggestions in the context of Ionic3 and earlier, but I haven't found the magic bullet for Ionic4 yet. Has anyone encountered and gotten to the bottom of this yet?
I have been through the ringer on trying to print content in Ionic 4. Some of the steps i followed to print multiple pages.
remove any flex-box styled lists. They just will not print how you want them to across pages, though they have worked fine for me if the content fits in a page.
for items you want to be seperated by page, its best if they are a display: block; styled item, so that that in the print style sheet you can use one of the page-break properties on it
on the item containing your list, the ion-content for example, make sure you remove any max-height attributes from it or any of its ancestor or child elements, as well as removing the overflow: scroll from these elements as well so that it allows your content to go from page to page. for example on my stylesheet for printing (cant share it because of NDAs) I had a lot of overflow-y: visible on elements just to make sure it shows. if you find an element thats cutting off your html, it should be the primary target for experimentation.
you can simulate a print in the dev tools, i found it useful, it's good for iteration here's a link
some other things that may help, but i am not sure as I did so much testing across browsers, and only vaguely remember what impact that css property had is to have the body with a static position, as well as having contain: none on the body to say that the browser should render as normal, little more explanation here
i do not know the specifics of your use case, but if you don't mind foregoing the native print button, and just giving the user a button to click to trigger the print, then that would be more manageable as you do not have to account for all the scaffolding around that specific element that you want to print (the ion-router, ion-page, and all the ancestors)
If you did that then you could put all your items you want to print into a div with an id of printSection or what you prefer, and then the javascript that is responsible for that page you can create your own print function. In my example i will use angular, if you are not using that then preform whatever DOM selecting you need to to get the native html out of your template.
#Component({ ... })
export class Page {
// select the item holding your print content by `#property` you gave it
#ViewChild('printSection', { read: ElementRef }) printSection: ElementRef;
...
customPrint() {
const printContent = this.printSection.nativeElement;
const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
WindowPrt.document.write(printContent.innerHTML); // pass in the native html you got
/**
* you should probably use an observable instead of an interval for this,
* but this is just to illustrate a bug where the print would be fired before
* all the content was written
*/
const interval = setInterval(
() => {
if (document.readyState === 'complete') {
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
clearInterval(interval);
}
},
200);
}
}
I Solved it following this process
First, remove the content to be printed from ion-content. Use a div instead of ion-content(shadow-dom is implemented with ion-content which blocks your CSS classes)
You also need to force the CSS below on ion-page when printing (it is initially set to position: absolute, by default)
In my case I was printing from a modal component which has a default class "show-modal". I was able to print on multiple pages by target that class this way
#media print {
.ion-page {
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
position: relative;
flex-direction: column;
justify-content: space-between;
contain: none;
overflow: visible;
z-index: 0;
}
.scroll-content,
ion-modal.show-modal,
ion-modal.show-modal .modal-wrapper,
ion-modal.show-modal .ion-page.show-modal,
ion-modal.show-modal .ion-page.show-modal > ion-content,
.ion-page.show-modal,
.ion-page.show-modal > ion-content,
ion-tab,
ion-tabs,
.app-root,
body {
contain: none;
position: relative !important;
height: auto;
overflow: visible;
}
}
I'm also trying to solve this same issue. I've scoured the Internet, and tried many an idea, but none has worked so far.
Perhaps we could solve this collaboratively. I'd put this as a comment, but I don't have enough rating points, so the system will not let me.
This is what I've found so far. In Chrome Developer Tools, you can click on a settings icon, then scroll to "Rendering," and on "Emulate CSS media type," select "print."
When I do that, it shows what the print view is. I created a separate css file, let's call it print.css, and in it, there is
#media print {
/* add your css styles for print here */
}
I know my print.css is being processed because I've
display: none
for ion-header and some tabs at the bottom, and they do disappear when I select "print" emulation in Chrome.
What is interesting is, I'm seeing the whole page -- scrollable and all -- on the screen in this print mode. However, every time I try to print it, only one page shows up.
That page, however, doesn't always start at the top. It includes the current viewport.
Which is why, I'm wondering if there is something in the css that is trying to keep the whole thing as a page. i.e., preventing a page break?
I'm experimenting with things like this:
ion-content, .foo, .bar, ion-list, ion-tabs, ion-item {
break-inside : auto !important;
break-after : auto !important;
break-before : auto !important;
}
(where foo and bar are classes you might have of your own.)
This above one breaks things. Removing ion-tabs, ion-list, and ion-item shows the full page.
I'm also experimenting with the following. None has worked so far, but that is probably because I haven't selected the right tag or class.
display: block !important;
height: 100%;
overflow-y: visible !important;
max-height: unset !important;
contain: none;
You may want to experiment with the tag in question that might be preventing a page break. Some people are suggesting it's flexbox or grid that's the root cause. I'd love to know how to find the root cause.
Good luck! If something works, let us know, so I'll also try it in my code.
I am doing a project using the new updated Bootstrap 3 RC1.
There are may new features with the new Bootstrap 3 which are much different than the previous versions.
I figured most of the changes but one I can't resolve:
when the menu has many items it breaks in Ipad and other tablets becuase it doesnt get collapsed like it automatically collapsed on mobile (which is good)
I would like to know how do I "force" ipads to act like mobile and show a collapsed menu or better yet - how to collapse the menu if it has many items and on certain screens and smaller it breaks
here are screenshots of my live project:
-- Menu on Big Screens --
-- Menu on Ipad Landscape --
-- Menu on Ipad Portrait --
-- Menu on Mobile --
I simply want the ipad to act like mobile. notice that the portrait does act like mobile as far as the content but not the menu.
Please read: http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/
The collapsing of your menu is defined in the less files. (Download the latest version from:https://github.com/twbs/bootstrap )
In variables.less you will find #grid-float-breakpoint: #screen-tablet; where #screen-tablet is 768px.
So by default your menu will collapse when the screen width is below the 768px;
The ipad landscape has a screen width of 1024px so the menu will NOT collapse. The ipad portrait screen width is 768 px so the menu will NOT collapse.
See also navbar.less:
// Responsive navbar
// --------------------------------------------------
#media screen and (min-width: #grid-float-breakpoint) {
To change this behavior you have to change the #grid-float-breakpoint b.e set to 767 and recompile your css files.
NB You also mentioned: "notice that the portrait does act like mobile as far as the content but not the menu."
You use "col-lg-" as prefix for your grid rows. "col-lg-" elements will stack below the 992px (ipad portrait) and become horizontal above 992px (ipad landscape).
Just ran into this issue as well. I suggest you visit:
Bootstrap customization
Find the field #grid-float-breakpoint and set it to the screen width after which menu should collapse. There you could use variables from previous section, namely from Media queries breakpoints to set proper points.
Also, take a moment and check through all available variables to change. Creating a well-customized Bootstrap package might save you hours of dev. work, if not more.
For those poor souls who are not using less, you would have to modify the bootstrap.css and change media queries associated with navbar that have a breakpoint of 768px to 992 px.
For example, change
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
to:
#media (min-width: 992px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
The no less implementations I found didnt work
Couldn't find the styles to make this happen on its own anywhere, ended up finding this - https://coderwall.com/p/wpjw4w
I was able to correct our issue by changing the #media (max-width: 768px) query to 767px instead. One of the links above referenced a 1px issue on iPad which breaks differently and was forcing the mobile version of the website instead.
If anyone is using the standard bootstrap.css file, I had to change it in 3 places:
around line 3780
/*changed from 768 to 992 */
#media (min-width: 992px) {
.navbar-header {
float: left;
}
}
around line 3799
/* changed from 768 to 992 */
#media (min-width: 992px) {
around line 3924
/*changed from 768 to 992 */
#media (min-width: 992px) {
I hope this helps someone :)
I had the opposite problem. On iPad the navbar was not collapsed (as expected), but the styles for a collapsed navbar were applied. I got it solved by changing the media query for the collapsed navbar adding -1 to match with $grid-float-breakpoint as follows:
#media (max-width: $screen-sm-min - 1) {
//styles for collapsed navbar (which won't show up on iPad portrait)
}
I was trying to add twitter/facebook icon to the site footer, much like side.cr footer. I got everything working, except that safari having unexpected vertical tile for twitter and facebook. I tried to upload screenshot but I am new user, so can't do that right now.
So I was searching for the answer and found this q/a here, Is <img> element block level or inline level?
So I went to side.cr again to see its css does have user agent stylesheet.
I added this line of code to my css:
.footer ul li img.t, li img.f {
width: 40px;
vertical-align: middle;
display: inline-block;
}
and it fixed the problem.
But I have a few questions in head:
why does side.cr's css show as non-editable user agent, while I have to add that display-inline to my css?
How does "display: inline-block" fix the problem?
Notice that: When mouse over to the gray twitter, it triggers swap.js, changing the icon image to the colored one, but in safari, the highlighted icon is bigger than the gray one. I think i almost know the answer. Just need someone who knows all the kinks behind this.
Thanks!
Solution:
To fix this problem make sure you set the height and width on the image so that it doesn't change during loading.
<img src="http://www.side.cr/images/contact/twitter_off.svg"
class="twitter_bird img_swap" height="52px" width="52px" />
or
.twitter_bird {
height:50px;
width:50px
}
Explanation:
When you switch the images name, safari begins to load the image but it doesn't know the height or width until it's done downloading. If you set the height and width it will not grow from 0px to 52px.
I have a question that I don't particularly know how to phrase properly so apologies in advance for lack of proper terminology. What I'm attempting to do is have a header image aligned left - left:0px; - with position:absolute; so that when the page loads on different sized screens it'll always be stuck to the left side of the browser window. But at the same time I want the header image to stop when it's loaded on a larger sized screen when it's aligned left with the page (if this makes sense). The page is below:
http://tinyurl.com/d2zttye
I want the BREAKWATER image to float with the page as it resizes but stop when it meets the background image below it (the #page div). So when loading in windows that are greater than the size of the background image (1592px) it won't float farther left. As of now it doesn't float with the page size and gets cut off on smaller screens.
Hopefully this makes sense and let me know if I need to clarify anything. Any help would be GREATLY appreciated!
Thanks!!!
Figured it out! By using #media screen I was able to define how the header would position on the page when the browser window is smaller than 1592px and larger than 1593px. #bwheader is the div and when the window is smaller than 1592px it floats left with the browser with a 10px left padding. When the window is larger than 1593px it then remains fixed (but using the position:absolute and centering the div using negative margins and 50% left). Hope this helps anyone that needs it!
#media screen and (max-width: 1592px)
{
#bwheader{
position:absolute;
top:0px;
height:74px;
float:left;
padding-left:10px;
}
}
#media screen and (min-width: 1593px)
{
#bwheader{
position:absolute;
top:0px;
width:1592px;
margin-left:-796px;
left:50%;
height:74px;
}
}