I have a react component laying out a grid of other components within a tab pane, all from react-bootstrap and contained within a div that has bootstrap's nice centred, padded container going on. Unfortunately the Grid within the Tab seems to think it should extend all the way to the right-hand edge of the screen. How can I make sure it sticks within the parent div's width?
Here's the essence of the code:
render() {
return (
<div class="container">
<Tabs>
<Tab>
<Grid>
<Row>
<Col md={12}>
<Panel>
Hi
</Panel>
</Col>
</Row>
</Grid>
</Tab>
</Tabs>
</div>
);
}
Try to use Grid's fluid prop to turn the Grid from fixed-width layout into a full-width layout.
See: https://react-bootstrap.github.io/components.html#grid : Props
render() {
return (
<div class="container">
<Tabs>
<Tab>
<Grid fluid={true}>
<Row>
<Col md={12}>
<Panel>
Hi
</Panel>
</Col>
</Row>
</Grid>
</Tab>
</Tabs>
</div>
);
}
Related
hello i have seen a lot of example to prevent tab refreshing to the initial state,but i have no idea if it is from react bootstrap..can someone tell me how to prevent the tab active even after refreshing for bootstrap
here is the code
<Tab.Container id="left-tabs-example" defaultActiveKey="first">
<Row>
<Col sm={3}>
<Nav variant="pills" className="flex-column">
<Nav.Item>
<Nav.Link eventKey="first">Tab 1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second">Tab 2</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col sm={9}>
<Tab.Content>
<Tab.Pane eventKey="first">
<Sonnet />
</Tab.Pane>
<Tab.Pane eventKey="second">
<Sonnet />
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
What do you mean by "refreshing"? Rerender or page reload?
If latter you have to persist the value somehow and get it on page load. You can do it with localStorage for example.
https://developer.mozilla.org/de/docs/Web/API/Window/localStorage
I have a react component and the columns aren't aligning side to side.
In my return statement I have:
<Row>
<Col md="6">
<CarouselPhotos />
</Col>
<Col>
<Form>
<Form.Group controlId="exampleForm.ControlInput1">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="name#example.com" />
</Form.Group>
</Form>
</Col>
</Row>
In the example image. The label email address appears correct next to the CarouselPhotos component but then the input field pushes all the way to the bottom. It should be right below email address. Any idea what I'm doing wrong?
According to the documentation:
When no column widths are specified the Col component will render equal width columns.
This caused me to assume that Col didn't have to be set in the second Col since i thought it be rendered equally. After adding Col width it now works. It displays equally.
<Row>
<Col md="6">
<CarouselPhotos />
</Col>
<Col md="6">
<Form>
<Form.Group controlId="formGroupEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
</Form>
</Col>
</Row>
Why does this following code produce this result: https://imgur.com/a/lQhLs8o ?
However, if I move the BottomNavigatorBar component to top position before CountryListComponent, it produces the desired result that looks like this: https://imgur.com/a/23z7bb2 ?
<template>
<Page actionBarHidden="true">
<DockLayout height="100%">
// first
<CountryListComponent dock="top">
// second
<BottomNavigationBar dock="bottom" activeColor="pink"
inactiveColor="yellow"
backgroundColor="black"
verticalAlignment="bottom"
#tabSelected="this.changeTab"
row="1">
<BottomNavigationTab title="Fiaarst" icon="icon-29.png" />
<BottomNavigationTab title="Second" icon="icon-29.png" />
<BottomNavigationTab title="Third" icon="icon-29.png" />
</BottomNavigationBar>
</DockLayout>
</Page>
</template>
CountryListComponent
<template>
<StackLayout backgroundColor="blue">
</StackLayout>
</template>
Refer the DockLayout documentation, by default stretchLastChild will be true which means BottomNavigationBar will take entire space if it's last child and vice versa.
I have the following render method and I am expecting to have two columns in my layout but am getting two rows instead:
render() {
return (
<div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css" />
<Grid>
<Row>
<Col>
My Header
</Col>
</Row>
<Row>
<Col>test</Col><Col>test</Col>
</Row>
</Grid>
</div>
);
I'd expect things to render like this:
My header
Col One Col Two
but instead things are rendered like this:
My header
Col One
Col Two
What am I missing?
You are likely not importing the bootstrap css. Check out this issue on Github or the documentation on this page for React Bootstrap.
From React Bootstrap Website:
Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
I had the same problem. I resolved it by adding xs- specifications. Not entirely sure why it fixed it, so can't really elaborate on that. Maybe someone more experienced can.
To clarify, here's a working example of your code:
render() {
return (
<div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css" />
<Grid>
<Row>
<Col>
My Header
</Col>
</Row>
<Row>
<Col xs = "5" >test</Col><Col xs = "5" >test</Col>
</Row>
</Grid>
</div>
);
TRY this code
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
For more info :
https://getbootstrap.com/docs/4.0/layout/grid/
first of all: I am practicing with titanium, this are just my first "Hello World" apps to get confident with the framework, so any suggestion would be strongly appreciated.
I have this simple view:
<ScrollView id="grid" dataCollection="pictures">
<View class="single-item" title="{title}" author="{author}" desc="{desc}" onClick="showPic">
<ImageView class="thumb" image="/images/thumb-stock-1.jpg" />
<Label class="title" text="{title} by {author}" />
<Label class="desc" text="{desc}" />
</View>
</ScrollView>
Clicking on each item I call the function showPic() defined in my controller, and that's ok. But I would like to pass some parameters to that function, that are {title}, {author} and {desc}, so that I can handle them and "print" them on a new detail view for each specific item. With TableView it was easy (I just put: event.source -> title, event.source -> author ... inside my controller and I could read that table row data), but with my view that seems not work.
so my questions are:
1) how can I pass that parameters from VIEW: to CONTROLLER showPic()
2) generally speaking, if there is a better view to list some objects and opening each one with a click, just tell me how so that I can learn something more :D (PS: I cannot use tableView because my layout does not fit with this kind view)
---- EDIT: here follows my full code
index.xml:
<Alloy>
<Collection src="pictures"/>
<NavigationWindow id="navGroupWin">
<Window class="container" title="La mia galleria">
<View class="arrow arrow-up"><Label text="UP" /></View>
<ScrollView id="grid" dataCollection="pictures">
<View class="single-item" title="{title}" author="{author}" desc="{desc}" onClick="showPic">
<ImageView class="thumb" image="/images/thumb-stock-1.jpg" />
<Label class="title" text="{title} by {author}" />
<Label class="desc" text="{desc}" />
</View>
</ScrollView>
<View class="arrow arrow-down"><Label text="DOWN" /></View>
</Window>
</NavigationWindow>
</Alloy>
showPic from index.js:
function showPic(event) {
var pic = event.source;
var args = {
title: pic.title,
desc: pic.desc,
author: pic.author
};
var picView = Alloy.createController("detail", args).getView();
if (OS_IOS) {$.navGroupWin.openWindow(picView);}
if (OS_ANDROID) {picView.open();}
}
detail.xml:
<Alloy>
<Window class="container">
<View layout='vertical'>
<Label id="titleLabel"></Label>
<Label id="descLabel"></Label>
<Label id="authorLabel"></Label>
</View>
</Window>
</Alloy>
detail.js
var args = arguments[0] || {};
$.titleLabel.text = args.title || 'Default Title';
$.descLabel.text = args.desc || 'Default desc';
$.authorLabel.text = args.author || 'Default author';
when I click on each item of the index, my source.title, source.author and source.desc seems to be empty, and on the detail window I got back only 'Default' values
I am not sure if you can do this on the view file level.
What I would try is to assign ids to every view element (this is a general technique) and fully deploy all my click listeners inside the controller file, removing all onClick commands from view.
So:
Set id="myview" along with class="single-item" in your View
In your controller try
$.myview.addEventListener('click', function(e){
showPic(e.title, e.author, e.desc)
});
Not sure if it goes wrong somewhere else, but stripped down like this it works:
index.html
<Alloy>
<Window id="test">
<ScrollView id="grid" layout="vertical">
<View class="single-item" width="250" height="250" backgroundColor="blue" title="title" author="author" desc="desc" onClick="showPic">
</View>
<View class="single-item" width="250" height="250" backgroundColor="red" title="red" author="red" desc="red" onClick="showPic">
</View>
<View class="single-item" width="250" height="250" backgroundColor="yellow" title="yellow" author="yellow" desc="yellow" onClick="showPic">
</View>
<View class="single-item" width="250" height="250" backgroundColor="green" title="green" author="green" desc="green" onClick="showPic">
</View>
</ScrollView>
</Window>
</Alloy>
index.js
function showPic(event) {
Ti.API.info(JSON.stringify(event.source));
}
$.test.open();