I need to change the base class for the Popover component in React Bootstrap as styles have been set globally for popover which are conflicting with a new component Im trying to make.
The doc say the bsPrefix prop can do this but it's not working for me. When I pass it to my component the base class doesn't change it just gets rendered out to the DOM
In React:
<Popover id="popover-basic" bsPrefix="find-me">
{children}
</Popover>
In the DOM:
<div id="popover-basic" bsprefix="find-me" role="tooltip" class="fade in popover bottom" style="display: block; top: 202px; left: 590px;">
Turns out I had an old version of the library. Updating 0.31.5 to 1.0.0-beta.8 (latest) and it works.
Related
When having a mat-select inside mat-sidenav which is to be programmatically opened, the mat-select gets focused and (if content allows for it), the sidenav is scrolled to focused element.
How to prevent the focus and scroll? At the moment I'm using an ugly hack by adding additional mat-select on top of the mat-sidenav and setting height to 0 and overflow to hidden, but I'm wondering if there's a more proper and elegant solution to this.
A bare minimum demo of the issue: https://angular-bg7azm.stackblitz.io
Demo is using:
#angular/core # 5.2.0
#angular/material # 5.0.0-rc.3
I am using:
#angular/code # 4.3.0
#angular/material # 2.0.0-beta.12
I've been trying to find a good solution for essentially the same problem - not having any item initially focused on a dialog without using tabindex="-1". One solution I came up with is basically the same as your 'hack' idea but a little smarter. It's a very simple custom component that uses a CDK directive to grab initial focus, then removes itself on blur. The component's opacity and size is zero so it is invisible and takes up no space. Tab order is preserved other than that this component has initial focus. You can control which item has focus on the first TAB press by placing the custom component in your DOM before the element you want to be first in the effective tab order. Because the component is removed on blur via ngIf, it is no longer in the tab order once the user has interacted with something.
NOTE: The 'cdkFocusInitial' directive is from Material 5.x. In 2.0.0-beta.12 it is 'cdk-focus-initial'. Also - I've only tested it with 5.x.
Component code:
import { Component } from '#angular/core';
#Component({
selector: 'init-focus',
template: '<button cdkFocusInitial *ngIf="!blurred" (blur)="blurred = true"></button>',
styles: [':host() { opacity: 0; max-width: 0; min-width: 0; max-height: 0; min-height: 0; margin: 0; padding: 0; border-width: 0; }']
})
export class InitFocus {
public blurred = false;
constructor() { }
}
Partial HTML example (from your stackblitz):
<mat-list-item>
<init-focus></init-focus>
<mat-form-field>
<mat-select placeholder="Status">
<mat-option value="open">Openstaand</mat-option>
<mat-option value="assigned">Toegekend</mat-option>
<mat-option value="in_progress">In behandeling</mat-option>
<mat-option value="closed_resolved">Opgelost</mat-option>
<mat-option value="closed_not_resolved">Niet opgelost</mat-option>
<mat-option value="not_relevant">Niet relevant</mat-option>
</mat-select>
</mat-form-field>
</mat-list-item>
I'm not sure how robust this is in varied use cases, and there might be ways to improve on this, but it seems to work well on dialogs and in a sidenav.
I've tried several methods to disable scroll, including using CSS position: fixed, attribute overflow-scroll="false" and etc, but all methods failed.
When I swipe down, the buttons will go up and while I swipe up the buttons will go down, like bouncing effect.
May I know any solutions to this issue? Thank you very very much.
Tested with ionic 3 (should work on ionic 2):
<ion-content no-bounce></ion-content>
I solved same problem using css. (Ionıc 3.6)
Step1: In ion-content add a new class :
<ion-content class="no-scroll">
Step2: In your CSS add the code below :
.no-scroll .scroll-content{
overflow: hidden;
}
The ion-content has a class called 'scroll-content'.
With that in mind, go to your app.css, inside the src/app and add:
app.css:
.scroll-content{overflow-y: hidden;}
That should leave your ion-content with no scroll, but I'd rather user:
app.css:
.scroll-content{overflow-y: auto;}
since this allows the scroll-content only if the page content overflows the ion-content.
This works in ionic 5:
ion-content {
--overflow: hidden;
}
<ion-content scroll-y="false">
For disable scroll in ion-content can use setScrollDisabled() method. You should follow steps below.
In hello.ts
import { app } from 'ionic-angular';
public class HelloPage
{
constructor(private app: App) {};
ngAfterViewInit(){
this.app.setScrollDisabled(true);
}
}
If you don't want the scroll you may also don't need the ion-content itself, in my status for example I want to use the ion-grid directly.
<!-- my-page.ts >
<ion-header>.......</ion-header>
<ion-grid class="has-header fixed-content">
</ion-grid>
and I added some scss for the has-header class:
ion-app {
&.md {
.has-header {
margin-top: $toolbar-md-height;
}
}
&.wp {
.has-header {
margin-top: $toolbar-wp-height;
}
}
&.ios {
.has-header {
margin-top: $toolbar-ios-height;
}
}
}
Content is placed in the scrollable area if provided without a slot. To show a fixed content add slot="fixed".
<ion-content>
<div slot="fixed">
</div>
</ion-content>
As iflagri posted in this issue and #shaneparsons pointed in the comments, using
<ion-content padding>
<div ion-fixed>
Your content here...
</div>
</ion-content>
Solve the problem.
Hope it help!
If you want to disable the content scrolling you can use
<ion-content [scrollY]="false" >
https://ionicframework.com/docs/api/content
<ion-content [attr.noScroll]="shouldScroll"></ion-content>
// scss file:
[noScroll] {
overflow: hidden;
}
Surprisingly, no-bounce attribute did work on my previous project and is not working on a new project that I am currently working on.
I tried #rodrigo-chave's solution with ion-fixed. It solved the scrolling problem, but made my content small (as if was zoomed out). Adding 100% CSS width and height properties fixed it.
<ion-content no-bounce>
<div ion-fixed style="height: 100%; width: 100%">
...
</div>
</ion-content>
How do you prevent the content from floating behind the Navbar when scrolling?
<Navbar className="navbar-form navbar-fixed-top" responsive collapseable brand='x' inverse toggleNavKey={1} onClick={this.handleMouseDown}>
Or is it in:
<Nav className="navigation"..
Thanks
Add a custom class to your navbar component, say, sticky-nav. Define the following CSS properties on it:
.sticky-nav {
position: sticky;
top: 0;
}
This will make your navbar stick to the top and will automatically adjust the height of its following DOM elements. You can read more about the sticky property on MDN.
As Scrotch said adding:
<Navbar style={{backgroundColor: "#071740", position: "sticky"}} variant="dark" fixed="top">
worked for me, I did it inline but putting in a separate CSS file should work as well. This is the only thing that's worked so far for me.
NB: I'm using "react-bootstrap": "^1.0.0-beta.16"
I was running into this too. I found the following (baseline bootstrap) page that shows a fixed navbar and has the main page showing up properly below it. It seems to be a function of the css that they are using. Specifically:
padding-top: 70px;
I added
body {
padding-top: 70px;
}
to my css file, and it seems to be working. Obviously mileage may vary, not applicable in all territories, etc. I am going to need to test it further for myself, but that might get you started.
In order to get responsive padding-top for body you may use sth. like this (ES6 example):
import ReactDOM from 'react-dom';
import React from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
export default class Template extends React.Component {
constructor(props) {
super(props);
this.state = { navHeight: 50 };
this.handleResize = this.handleResize.bind(this);
}
handleResize(e = null) {
this.setState({ navHeight: ReactDOM.findDOMNode(this._navbar).offsetHeight });
}
componentDidMount() {
window.addEventListener('resize', this.handleResize);
this.handleResize();
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
render() {
return (
<body style={{paddingTop: this.state.navHeight}}>
<Navbar ref={(e) => this._navbar = e} fixedTop>
<Navbar.Header>
<Navbar.Brand>
<Link to="/">Some title</Link>
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="/link1">Link1</NavItem>
<NavItem eventKey={2} href="/link2">Link2</NavItem>
</Nav>
</Navbar>
<main>
{this.props.children}
</main>
</body>
);
}
}
Template.propTypes = {
navHeight: React.PropTypes.number,
children: React.PropTypes.object,
};
This way your <body> padding-top will always fit your navbar height even after adding more links in mobile view.
I also assume that base height is 50px (see the constructor) but it shouldn't matter as long as you call this.handleResize() in componentDidMount().
There is also the option to specify sticky-top which basically implements the solution of using position:sticky that others have suggested (see documentation).
So in your example you could just specify sticky-top instead of fixed-top as a className, and it satisfies your requirements.
react-bootstrap provides position utilities.
<Navbar sticky="top">
react-bootstrap documentation
However in-page anchor does not work properly, and position can be under the navbar after jump from a link.
I also use this custom css to fix the issue.
*[id]:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
Reference
I came across the same problem. Wanting to stay within bootstrap and avoid custom css I tried adding class 'position-sticky', which gave me a left-shifted navbar. Apparently, for whatever reason, the navbar has a negative padding, so adding 'ps-0' to the class list fixed it.
<Navbar
fixed={'top'}
className={'position-sticky ps-0'}
>
for anyone using tailwind use sticky as a property in the top div of your navbar
<div className="sticky"> navbar-content </div>
I have a GWT widget that I want to embed in a non-GWT application. I am using get-exporter to expose my API and I have the widget appearing in a simple HTML page (which includes my nocache.js) and drawing itself. What it does not do is respond to mouse clicks.
I attach the widget to a div like this (objects are exposed using get-exporter):
controller = new GraphController(MakeGraphConfig.makeGraphConfig());
var element = controller.getGraphPanelElement() ;
document.getElementById('graphPanelId').appendChild(element);
The element 'graph' is a simple div and a direct child of the body element.
<div width="500" height="500" id="graphPaneId" style="border-style: solid; border-width: 11px; "></div>
The widget draws and does not respond to mouse events. What am I missing here?
My solution was to pass the elementId into the controller:
Javascript:
controller = new GraphController("graphPanelId",MakeGraphConfig.makeGraphConfig());
and use :
Java:
RootPanel.get(elementId).add(graphPanel)
I'm using animate.css to add some transistions to my meteor app. However, there is this problem that animate.css creates an almost transparant overlay over my buttons/images etc.
I have a main div where the animate.css class is added depending on changing page views etc. Very simplified this is my HTML.
<body>
<header class="header></header>
<div class="animate-holder {{animated class}}>
<div class="class1></div>
<div class="class2></div>
</div>
</body>
From what I've tested this will happen all the time and it doesn't matter how I use transistions. Is there a simple way to NOT have this overlay?
EDIT:
I can hack it like this, but this is very very ugly. But maybe it creates more insight into the problem:
Template.DetailsSubmit.rendered = function() {
Meteor.setTimeout(function() {
var classes = $('div.animated').attr('class');
$('div.animated').removeClass(classes);
}, 1000)
}
You can make this specific div clickable through using the very useful (and not famous enough) pointer-events css property:
div.animated {
pointer-events: none;
}