I am new in Ionic. I am stuck on rounded corners for the side drawer menu. Please give me a solution if it works then I accept your answer Anyone here with a solution for this? Thanks in Advance. Here is my code.
.menu-inner {
border-radius: 0px 50px 0px 0px !important;
}
in Inspect element this is perfect work but not work in code
here is screen short
So far, You can not style shadow-root element in the DOM by using CSS. In some cases, the CSS4 helps to style. But in this case, it would not work.
So, You can use JavaScript to style shadow-root element. Here You should create a simple method like menuRadius and call it in initializeApp in the following way.
src/app/app.component.ts
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.menuRadius(); // call menuRadius method
});
}
menuRadius() {
setTimeout(() => {
document.querySelector('ion-menu').shadowRoot.querySelector('.menu-inner').setAttribute('style', 'border-radius:0px 50px 0px 0px');
}, 2000);
}
Please Note Injecting style by using JavaScript only works when shadow-root is open.
You may check this article for more info about shadow-root DOM.
Related
Why is my ion-backdrop + modal shadow styling not working when I open a modal on top of another modal?
PREFACE: This was working fine with V4, but broken on the upgrade to V5. I don’t want to change my page approach, just fix the CSS/whatever is actually causing the issue below.
My app opens a modal page with custom css to make it full screen.
I can then open another normal modal (but not full screen) over the
top. This 2nd modal is missing the ion-backdrop and its border shadow
styling.
I can see the ion-backdrop is definitely in the DOM, but it’s
obviously not showing.
Step1 Fine
enter image description here
Step 2 - broken ion-backdrop:
enter image description here
Showing my custom modal:
async showClipboard() {
const modal = await this._ModalController.create({
component: ClipboardPage,
cssClass: 'custom-round-modal',
componentProps: {
user: this.user
},
showBackdrop: true
});
await modal.present();
}
The CSS:
#media only screen and (min-width: 768px) {
.custom-round-modal {
.modal-wrapper {
border-radius: 15px !important;
-moz-border-radius: 15px !important;
-webkit-border-radius: 15px !important;
.ion-page {
border-radius: 15px !important;
-moz-border-radius: 15px !important;
-webkit-border-radius: 15px !important;
}
}
}
}
First off, I think you pasted the same screenshot twice by mistake. But I'm having the same issue, so I know what you mean.
It looks like Ionic 5 introduced this css for the modals:
.sc-ion-modal-ios-h:first-of-type {
--backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}
Which means when you show multiple modals at the same time, only the first one will get the backdrop.
A possible workaround is to add the backdrop yourself to your global css using something like this:
ion-modal {
--backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}
Or use the css class Ionic is using (but note that this one is iOS specific, so you'd likely need to do the same with the Android-equivalent class):
.sc-ion-modal-ios-h {
--backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}
NOTE: This will likely not look good if you are showing multiple modals on top of each other that are not fullscreen, since you'll be getting multiple backdrops on top of each other (so they'll get increasingly darker). But since your issue is a non-fullscreen modal on top of a fullscreen one, I think it will work in your case.
Hopefully the Ionic team will come up with a more elegant solution to this issue.
Thank you krisloekkegaard for your code, that helped me really out.
I want to add that it will only work if placed in the global sass or css files! You cannot do that from a component's style-file, because the modal will be created outside of it.
The following lines are a bit more precise, because they will activate the backdrop only on the last modal. Even if you have 10 stacked modals, there will be only the backdrop of the first and the backdrop of the last element overlaying each other.
.sc-ion-modal-md-h:last-of-type {
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
.sc-ion-modal-ios-h:last-of-type {
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
This is addressed now in the Ionic Documentation.
Please see under 'Customization' section for ion-modal : https://ionicframework.com/docs/api/modal
Add the following CSS to your modal class -
ion-modal.stack-modal {
--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
I solved the issue adding the following css into variables.css file in Ionic v5. Give a chance.
.backdrop-no-scroll {
ion-router-outlet {
background: white;
}
I want create a drop down menu or popover within ionic toolbar. I tried with several ways but can not solve. Its always hidden like bellow,
I trying css like bellow,
.popover{
border: 1px solid black;
height: 350px;
width: 150px;
position: absolute;
z-index: 99999999;
background: yellow;
}
ion-header{
contain: none;
}
ion-toolbar{
contain: none;
}
Please give me a suggestion or an alternative idea. Please do not give any predictive answer if you are not familiar with ionic.
I don't know about Ionic 4 but on Ionic 5, a solution would be this when you debug on the console :
ion-toolbar {
contain: none;
.toolbar-container {
overflow: visible;
contain: none;
}
}
However, the .toolbar-container is an element in the shadow dom of the <ion-toolbar> component and its overflow and contain properties are not css variables and there is no part attribute on this element neither. So there is actually no way to override those properties.
I'm considering using this package, but for me it seems like overkill to use js and timeout for setting a pretty simple style... :
https://www.npmjs.com/package/shadow-dom-inject-styles
I had a similar problem when I had to make a searchbar overflow underneath the header (design thing). I was struggling a while and it popped in place suddenly when I place the searchbar outside of the toolbar and gave it position absolute:
<ion-head>
<ion-toolbar>
<!-- My stuff here -->
</ion-toolbar>
<ion-searchbar></ion-searchbar>
<ion-header>
My css looks like this:
ion-toolbar {
display: flex; // I need this for something else, but maybe has an influence
}
ion-searchbar {
padding: 0 1em .5em 1em;
transform: translateY(-50%);
z-index: 99999;
position: absolute;
}
Hope it helps somebody.
In case anyone is still looking for the solution. Here is how I managed to fixed it in react. It's a bit hacky solution, but most likely the only one ATM.
First we need to style the toolbar (pass a className or style to component:
.your-toolbar-classname {
overflow: visible!important;
contain: none!important;
}
Then we have to also style the shadow-root parts. Se we can use the useEffect after the header is mounted and set the style
// Header.tsx
...
useEffect(() => {
const style = document.createElement('style');
style.innerHTML =
'.toolbar-container { overflow: visible!important; contain: none!important; }';
toolbarRef.current.shadowRoot.appendChild(style);
}, []);
...
Just use ion-menu, its a build in ionic component
https://ionicframework.com/docs/api/menu
There is also ion-popover
You should look at the ionic docs before posting on stack
Using Facebook Javascript SDK+XFBML, I'm implementing the fb 'comments widget', as explained here.
then, using the fbml line:
<fb:comments href="someurl.com" num_posts="2" width="400"></fb:comments>
creates an iframe with the comments widget.
The height of the iframe is of-course according to the length of the comments;
I need to make changes to my page according to the height of the comments widget.
I can tap into when the widget has finished loading, by using
FB.Event.subscribe('xfbml.render')
(I found it more accurate than using 'ready' or 'load'),
but I cannot get the height of the comments iframe due to cross-domain restrictions.
Does anybody know of some sort of a solution for this?
Thanks.
EDIT:
Workaround number 1: (from http://startdevelopment.blogspot.com/2011/03/issue-with-facebook-comments-box-height.html):
add a style to your page:
.fb_ltr { height: 400px !important; overflow-y: scroll !important; }
'fb_ltr' is the class used by the iframe. This will make sure it's always 400px high, and add scroll-bar to scroll content.
Of-course, the scroll-bar is ugly, so, any other ideas?
I use the same idea as yours, modified the style, but it will use min-heigh
Please try this,
.fb_ltr { min-height:100%; }
First of all, thanks for you solution, Yuval A.
Second, I found a clean and simple style for scroll bar here:
CSS scrollbar style cross browser
In short is this code:
::-webkit-scrollbar { width: 12px; /* for vertical scrollbars */ height: 12px; /* for horizontal scrollbars */ } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.5); }
I'm creating a MenuBar, and I want to have it display a little icon when there are sub-elements to be displayed. I thought I could achieve this like so:
interface ActionHeroResources extends ClientBundle, MenuBar.Resources
{
#Source("actionhero.css")
public ActionHeroCSS css();
#Override
#Source("agw-dropdown.png")
ImageResource menuBarSubMenuIcon();
}
private static final ActionHeroResources RESOURCES = GWT.create(ActionHeroResources.class);
MenuBar actionMenu = new MenuBar(true, RESOURCES);
public ActionHero()
{
actionMenu.addItem("Select", aSelectMenuFullOfOptions);
}
But the menu appears with the word "Select" an no icon! I'm positive my ImageResource is working correctly because I use menuBarSubMenuIcon().getURL() from the same resource later, and my image shows up just as you'd expect. In the HTML generated by GWT, there is absolutely no distinction between the items with MenuBars as children and the items with Commands. My CSS is working fine.
Any thoughts?
Try overriding the CSS style for .gwt-MenuBar-vertical .subMenuIcon-selected, like this:
.gwt-MenuBar-vertical .subMenuIcon-selected {
background: none;
}
I use this for my own selected items and it works great:
.gwt-MenuBar-vertical .subMenuIcon-selected {
background: url(images/hand_pointer.png) no-repeat 0px 0px;
}
The problem was ultimately that the popup panels that form the submenus take their stylename from the parent, but append a dependent stylename. I don't know of a way to predict what that dependent stylename will be, since the original stylename is obfuscated. I worked around this problem by using the more generic .gwt-MenuBar popup stylename. This only works because I only have one style of popup menu in my program - I'm not sure what I would do if I wanted two popups to look different!
Hopefully, in later gwt releases, the MenuBar styles will come more closely from the resources passed to the menubar and make less use of dependent style names.
You can simply set a css rule for the that appears in the sub menu like this:
.subMenuIcon > img {
/* override gwt sub menu icon */
width: 6px !important;
height: 11px !important;
background: url('your-image-relative-path.png') no-repeat 0px 0px !important;
}
I'm using JQTOUCH and in JQTOUCH several of the links are being loading via AJAX and then sliding in. The problem is that there is no loading indication provided to users.
I'd like a way to add a Loading class with an AJAX spinner, when ever the an ajax call is loading, and have the class removed when the loading is done, and the page is displayed.
Any ideas?
the showPageByHref() answer is partially correct.
But, instead of
$('body').append('<div id="loadinginprogress">Loading...</div>');
You need
$('.current').append('<div id="loadinginprogress">Loading...</div>');
Body is too general for jqtouch, need to be specific to the currently displayed DIV-page
showPageByHref() function in jqtouch js is a good start. i added it right into ajax call so the please wait will not flicker when you click on link that is already loaded etc.
In short - add loading div (id loadinginprogress in exmaple) right before the ajax call and remove later "success" or "error". the ajax call section would look something like that (shortened it ):
function showPageByHref(href, options) {
...
if (href != '#'){
$('body').append('<div id="loadinginprogress">Loading...</div>');
$.ajax({
url: href,
data: settings.data,
type: settings.method,
success: function (data, textStatus) {
$('#loadinginprogress').remove()
var firstPage = insertPages(data, settings.animation);
if (firstPage)
{
if (settings.method == 'GET' && jQTSettings.cacheGetRequests && settings.$referrer)
{
settings.$referrer.attr('href', '#' + firstPage.attr('id'));
}
if (settings.callback) {
settings.callback(true);
}
}
},
error: function (data) {
$('#loadinginprogress').remove()
if (settings.$referrer) settings.$referrer.unselect();
if (settings.callback) {
settings.callback(false);
}
}
});
}
...
}
css for loading div would be something like:
#loadinginprogress {
-webkit-border-radius: 10px;
background-color: rgba(0,0,0,.5);
color: white;
font-size: 18px;
font-weight: bold;
height: 80px;
left: 60px;
line-height: 80px;
margin: 0 auto;
position: absolute;
text-align: center;
top: 120px;
width: 200px;
z-index: 5000;
}
This is the basic behavior if your links are li class="arrow" elements. how are you displaying your links and where do you want the loading-spinner to display?
Thank you for your different posts. They helped me a lot.
I have a solution to propose without patching the jQtouch code on which jQTouch relies.
It uses jQuery ajax capabilities.
$(document).ready(function() {
...
$('#jqt').ajaxStart(function() {
console.log("ajaxStart");
...
}).ajaxSuccess(function() {
console.log("ajaxSuccess");
...
}).ajaxError(function() {
console.log("ajaxError");
....
});
....
});
more details available in this jQuery doc page.
You could add a custom event handler, and trigger the loading.gif everytime the click on the specific element was done.
I just answered Darin Parker's question. Just check it out it may help you.