enter image description here
how can i remove the default padding in a grid in ionic5..I used the given code.but it doesn't work
<IonRow>
<IonCol col-6 no-padding>
<IonButton expand="full" no-margin>NEWER</IonButton>
</IonCol>
<IonCol col-6 no-padding>
<IonButton expand="full" no-margin>OLDER</IonButton>
</IonCol>
</IonRow>
use this
class="ion-no-padding"
Related
I want to get rid of the white space at the edges.
You can see style properties in the screenshot.
Thats my react code:
<IonPage>
<IonHeader>
</IonHeader>
<IonContent fullscreen scrollY={false}>
<IonGrid>
<IonRow>
<IonText>Spiel 1</IonText>
</IonRow>
<IonRow>
<IonText>Spiel 2</IonText>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
Was able to get rid of all white edges by changing the css properties of ion-grid to this:
ion-grid {
margin: -10px;
height: 110%;
};
I'm currently trying to implement an offcanvas style navbar using react-boostrap, and am trying to make it responsive so that menu icon disappears and the contents are displayed on the nav bar itself when the screen reaches above a certain size.
I used the example from their site but have changed the value of the expand property and added a collapse component: https://react-bootstrap.netlify.app/components/navbar/#navbar-offcanvas
import {
Navbar,
Container,
Offcanvas,
NavDropdown,
Form,
FormControl,
Button,
Nav,
} from "react-bootstrap";
const Navigation = () => {
return (
<Navbar bg="light" expand="1g" collapseOnSelect>
<Container fluid>
<Navbar.Brand href="#">Navbar Offcanvas</Navbar.Brand>
<Navbar.Toggle aria-controls="offcanvasNavbar" />
<Navbar.Collapse id="offcanvasNavbar">
<Navbar.Offcanvas
id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
placement="end"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id="offcanvasNavbarLabel">
Offcanvas
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className="justify-content-end flex-grow-1 pe-3">
<Nav.Link href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<NavDropdown title="Dropdown" id="offcanvasNavbarDropdown">
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">
Another action
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">
Something else here
</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Search"
className="me-2"
aria-label="Search"
/>
<Button variant="outline-success">Search</Button>
</Form>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Navbar.Collapse>
</Container>
</Navbar>
);
};
The menu icon should disappear and the contents expand onto the navbar at 992 horizontal res, but nothing changes.
I also tried to use a normal navbar from their examples, but then replace the body with an offcanvas body like so:
<Navbar collapseOnSelect expand="lg" bg="light">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Navbar.Offcanvas
id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
placement="end"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id="offcanvasNavbarLabel">
Offcanvas
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className="justify-content-end flex-grow-1 pe-3">
<Nav.Link href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<NavDropdown title="Dropdown" id="offcanvasNavbarDropdown">
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">
Another action
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">
Something else here
</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Search"
className="me-2"
aria-label="Search"
/>
<Button variant="outline-success">Search</Button>
</Form>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Navbar.Collapse>
</Container>
</Navbar>
And while this did actually make the icon disappear correctly, none of the menu's contents would appear onto the bar as they are supposed to.
I've been taking bits out and putting bits in for long enough now that I could have probably created my own by now haha, but I really want to figure out what it is I'm missing.
Any help would be amazing!
I am fetching an array of values from a API call and I am saving it an array. Now I am creating a data table using Ionic React Grid like below and I want to pass the array values into the columns I know in Angular it is possible to achieve it using *ngFor = "let row of data;" in IonRow but not exactly sure what we should use in React.
<div className="header-row">
<IonRow>
<IonCol>
PoiName
</IonCol>
<IonCol>
Total Assets
</IonCol>
<IonCol>
Static Assests
</IonCol>
<IonCol>
Fluid Assests
</IonCol>
</IonRow>
</div>
To do it a loop in react is different than Angular, in this case you need to use map in your array, for example:
<div className="header-row">
<IonRow>
{data.map((column, index) => (
<IonCol key={index}>{column}</IonCol>
))}
</IonRow>
</div>
I recently got started with Ionic React and I wanted to experiment with the IonRange component. The following is my IonRange code in JSX (alongside a button and some text):
<IonApp>
<IonContent>
<IonGrid className="align-all-center">
<IonRow className="content-padding">
<IonButton onClick={updateName}>
Press Me!
</IonButton>
</IonRow>
<IonRow className="content-padding">
<IonText color="light">
Hello {name}!
</IonText>
</IonRow>
<IonRow>
<IonRange value={50} pin={true} min={0} max={100}></IonRange>
</IonRow>
</IonGrid>
</IonContent>
</IonApp>
However, the result that I get in my browser is this:
When ever I try to scrub that dot, one of the values is:
Thanks for your help.
How do I align the back button to the left and the hamburger menu icon to the right of the toolbar. Could anyone please help?
<IonToolbar mode="ios">
<IonButtons slot="start">
<IonBackButton defaultHref={route} />
<IonMenuButton color="dark" />
</IonButtons>
<IonTitle>
App Title
</IonTitle>
</IonToolbar>
Current result
Simply add an other IonButtons and give a slot property on it ( either start or end ). That should align your buttons in the toolbar.
<IonToolbar mode="ios">
<IonButtons slot="start">
<IonBackButton defaultHref={route} />
</IonButtons>
<IonButtons slot="end">
<IonMenuButton color="dark" />
</IonButtons>
<IonTitle>
App Title
</IonTitle>
</IonToolbar>