I'm building a react app and I am having problems getting my react-bootstrap columns to show horizontally. I would like the image to appear next to the text not above it. I don't know what I am doing wrong. Below is my code:
function About() {
return (
<Container fluid className="about-us">
<Row>
<Col sm={4}>
<Image src={require('../techOn.png')} style={{height:"250px", width: "300"}} />
</Col>
<Col sm={4}>
<h2>Meet The Team</h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum."
</p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum."
</p>
</Col>
</Row>
</Container>
);
}
Needed to add display: flex in css for row
return (
<Container fluid className="about-us">
<Row style={{display:"flex"}}>
<Col sm={4}>
<Image src={require('../techOn.png')} style={{height:"250px", width: "300"}} />
</Col>
<Col sm={4}>
<h2>Meet The Team</h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum."
</p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum."
</p>
</Col>
</Row>
</Container>
);
}
Related
I copy and paste the code from "https://react-bootstrap.github.io/components/accordion/" but it does not work ..
<Accordion>
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</Accordion.Body>
</Accordion.Item>
</Accordion>
It looks like maybe the dependent CSS is not properly imported for react-bootstrap components?
According to react-bootstrap document, perhaps try add to App.js:
import 'bootstrap/dist/css/bootstrap.min.css';
I'm creating an reading aplication, but when I use at the same time textAlign: justify and selectable={true}, the justify alignment doesnt work. I'm testing on Android, version 10>+. Can someone help me?
<Text
selectable={true}
style={{textAlign: 'justify'}}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Text>
I am fairly new to ionic mobile app development. Currently I am working on android app development. My requirement is display a list, on click of any item on that list show a respective paragraph. For the same I have added the content in an array in services.js as directed in one of the example app in ionic app development. My query is I want to show the text content in different paragraphs on front end.
Please help
use factory with conroller
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout)
{})
.controller('PlaylistsCtrl', function($scope,Chats)
{
$scope.chats = Chats.all();
})
.controller('PlaylistCtrl', function($scope, $stateParams,Chats)
{
$scope.chat = Chats.getOne($stateParams.id);
})
.factory('Chats', function()
{
// Might use a resource here that returns a JSON array
var chats =
[{
id: 0,
name: 'item1',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}, {
id: 1,
name: 'item2',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}, {
id: 2,
name: 'item3',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}, {
id: 3,
name: 'item4',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}, {
id: 4,
name: 'item5',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}];
return {
all: function()
{
return chats;
},
getOne:function(id)
{
return chats[id];
}
};
});
I have got the solution to this query. hope it helps to some else as well.. Solution is very simple and pure css - Use \n where ever you need new line and in your html wrap your div with style="white-space:pre-wrap"; thats it! Preserve line breaks in angularjs
On AngularJS, I have a filter for a SKU and a Name. Those work great in filtering the correct information. However, when I want to load the information in the detail screen using routing to show more, it still loads the index 0, even though I'm selecting a different option. I'm not quite sure what's missing to get this to show the correct detail page.
Here is the HTML:
<input ng-model="search.name" placeholder="Enter search term here...">
<input ng-model="search.upc" placeholder="Enter SKU here...">
<li ng-repeat="product in productsArray | filter:search | filter:upc">
<button class="productListItem">{{product.name}}</button></li>
-------------------------`
Here is the JavaScript:
angular.module("ingredientProducts", ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when('/main',{
templateUrl: "main.html",
controller : "mainController"
}).when('/detail/:productID',{
templateUrl: "details.html",
controller : "detailsController"
}).otherwise({
redirectTo : "/main"
});
})
.controller("mainController", function($scope, dataService){
var productsArray = [];
$scope.productsArray = dataService.getProducts();
})
.controller("detailsController", function($scope, $routeParams, dataService){
$scope.product= dataService.getProductAt($routeParams.productID);
});
angular.module("ingredientProducts").service("dataService", function(){
var productsArray = [
{name: "Glass Container",
upc: "2000000000",
description: "This is a glass container",
ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
allergy: "This product may contain soy, gluten, and dairy.",
img: "glass.jpg",
}];
this.getProducts = function(){
return productsArray;
};
this.getProductAt = function(product){
this.getProducts();
return productsArray[product];
};
});
Thank you for your help!
You can't rely on $index becouse when you filter your array index of product will be not equal to product index in your service.
Please see here for solution http://plnkr.co/edit/xFMkHxwDwkJfcqwnbHg8?p=preview
Main View:
<li ng-repeat="product in productsArray | filter:search | filter:upc">
<button class="productListItem">{{product.name}}</button></li>
Data Service:
angular.module("plunker").service("dataService", function(filterFilter) {
var productsArray = [{
name: "Glass Container",
upc: "2000000000",
description: "This is a glass container",
ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
allergy: "This product may contain soy, gluten, and dairy.",
img: "glass.jpg",
},
{
name: "Jar",
upc: "2000000001",
description: "This is a glass container",
ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
allergy: "This product may contain soy, gluten, and dairy.",
img: "glass.jpg",
},
{
name: "Tent",
upc: "2000000002",
description: "This is a glass container",
ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
allergy: "This product may contain soy, gluten, and dairy.",
img: "glass.jpg",
},
{
name: "Bootle",
upc: "2000000003",
description: "This is a glass container",
ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
allergy: "This product may contain soy, gluten, and dairy.",
img: "glass.jpg",
}];
this.getProducts = function() {
return productsArray;
};
this.getProductAt = function(_upc) {
this.getProducts();
return filterFilter(productsArray, {upc:_upc})[0];
};
});
I have implemented lightbox in my responsive site using jquery prettyphoto lightbox and make my inline content to display inside lightbox.How to make the lightbox as responsive
<a href="#inline-1" rel="prettyPhoto" >Prettyphoto lightbox</a>
<div id="inline-1" class="hide">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>