I'm developing an app with Ionic 1.3.3, and I want it to be available on desktop browsers as well. For this reason, I need to disable the automatic Ionic scroll because it is adapted for touchscreens and not intuitive for computers (maintain click + sliding). I know how to add a browser scrollbar by using overflow:auto; on all my ion-content.
So far I have only managed to hide the Ionic scrollbar, using the following solutions:
scrollbar-y="false"
on the ion-content, or
display: none;
on the scrollbar css. However, hiding it is not enough for what I want.
I tried several Ionic 2 solutions (for example How can I disable or hide the scrollbar within an Ionic 2 <ion-content>), but they don't seem to work, and they don't all apply since the files are not all the same.
I also tried
overflow-scroll="false"
on my ion-content, no success.
Thank you for your answers.
I have this in one of my codes, I don't now if this could helps you but it works for me:
<ion-content scroll="false">
You can found some info about this attribute in http://ionicframework.com/docs/api/directive/ionContent/
Related
I want to scroll ion-content in the ionic 5 mobile application. I know how I can use slot="fixed" in ion-content. But it doesn't work as expected. Because a fixed part covers the scroll part in ion-content like as a standard fab button. I want to make the fixed and scroll part as a same level. No one covers the other one. What is the best solution in the ionic 5/Angular application? I don't like to use pure css styles like a web application. Prefer to use ionic components with ionic style variables.
Like this image
Ionic Content Image with fixed and scroll parts
Best solution is to use ion-header. So only scrolling part will be ion-content.
You can move the fixed block outside ion-content, it should exclude it from scrollable area
Can anyone provide an example of this or at least a successful example of flickity inside bootstrap 4? I am trying to make an horizontal list of cards in a sort of carousel. I want to scroll through them three a time. Using flickity seemed interesting, but I have all sort of problems doing so within bootstrap 4. Cards will not be the same size, or will just disappear. I tried using it with and without row/col classes (the grid), just had different issues.
This is a bit similar to what I want to achieve, except for the scrollbar :
https://www.codeply.com/go/PF4APyGj7F
You can hide scrollbar. Here is the code to hide scrollbar :-
::-webkit-scrollbar {
display: none;
}
After digging into my problem, I asked on the github of Flickity and someone was able to provide me with a working BS4 example. So from there I knew it was possible to use this plugin with BS4. I just had to find what I was doing wrong.
https://github.com/metafizzy/flickity/issues/742
I have searched stack overflow, googled, and gone to apple's documentation regarding a problem that I've encountered in my Cordova Html5 iOS 11+ app. The app plays videos. It works fine except there is a gray overcast button on top of the video that should display the iOS icons. The button is simply a gray "blob". This happens when the video is first loaded and then again when it is ended.
It looks like this (Upper left screen corner:
I've tried using many css workarounds that I found on stack overflow and also on some of my other searches. I thought that this is/was a css problem, but I'm just at a loss. I can't find anything in the Safari docs. The closest I came was a post regarding a gray background issue when playing video. That was solved using brightness. It didn't work at all for my issue. I also couldn't hide the gray buttons.
The video is standard html5:
<video src="myVideo.mp4" controls poster="myPoster.png" height="auto" width="100%">
</video>
Thank you ahead of time for your help. If I need to add more information, I can do that. I just don't want to add things that aren't needed.
-Rachel
If you could provide a sample page where this problem occurs that would make it a lot easier.
I'm pretty sure this should be possible with css though. Maybe not the most "beautiful" way to go at this but what I would do is to find the markup of this element and look what css selectors and rules there are which effect it. Then copy the css selector in your own stylesheet and maybe add some class or id to it to make sure it overrides these rules and then simply add a display: none; to it.
Maybe give !important a try too if it doesn't work right away.
In the dev tools you can add css rules directly so you can just go through the elements and add display: none; there, to see which element you need to refer to in your file.
But again, it's really hard to tell without an example to look at.
I am trying to make a similar offcanvas element in one of my projects. I found few examples, but since I am using bootstrap 3 I went on with this one: http://getbootstrap.com/examples/offcanvas/ I replicate it in my project, but instead of the toggle button on mobile I use Hammer.js like this:
Hammer("body").on("hold", function() {
$(".row-offcanvas").toggleClass("active");
});
The tricky part is that whenever my content inside the visible div, is shorter than the div containing the list of links (on the right) the page is scrolling. Once I add more content to the visible div, I do not get any scrolling and everything works as it should. I made a simple example here http://florin-cosmin.dk/offcanvas/index1.html , but it can only be tested on mobile, if you really want to see the scrolling (just HOLD not click anywhere in the body). The working example is here: http://florin-cosmin.dk/offcanvas/itworks.html
I tried to set overflow-x: hidden on the visible div, but that doesn't help.
Again, how can I remove scrolling on mobile even when the content on the left is shorter than the one on the right side?
It is very frustrating. Please help :)
UPDATE: I am testing it on default Android browser on 4.3 and 4.1.2. I need to use the default browser as my Android app uses a webview.
I have a strange behaviour in screen layout, I do not understand the possible cause:(
I have a vertical grey line on the left and the right of the screen,
See screenshot here:
BTW, I developed using Rails 3 and using Twitter Bootstrap 2.3.2
In facts I do not foresee / I do not want these lines ... I presume it could be some CSS setting (on my one customization css code...), sorry for my ignorance there,
watching the shot here do suggest you something about why the grey vertical line on the left marging and the right margin of the screen layout ?
thanks a lot
giorgio
scss customization file used: http://solyaris4.altervista.org/custom.css.scss
Without looking at any CSS and HTML code it is pretty difficult to tell.
But since it looks like you are using the Google Chrome browser, hover over the grey stripe with your mouse, right-click and select Inspect Element. You can then review the html and css code related to what you are looking at. You can also open the Chrome dev console at any time by hitting the CTRL-SHIFT-i keys.