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>
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';
My video from contentful doesn't seem to be rendering properly. It's in the DOM but I can't get it to display. Any ideas why ?
I was thinking maybe it's an incorrect path and that's why it can't access it but the image works and displays just fine. There is also an eslint error message asking for a track element, could that be blocking it?
This is the code
{data.allContentfulPodcast.edges.map(video =>
<div>
<ReactPlayer
priority
autoPlay
loop
muted
className='react-player'
url={'https:' + video.node.video.file.url}
playing={isPlaying}
height = '100%'
width = '100%'
/>
</div>
)}
and the console.log
{
"allContentfulPodcast": {
"edges": [
{
"node": {
"title": "Welcome to our show",
"thumbnail": {
"file": {
"url": "//images.ctfassets.net/hi3b2mc578jm/3wxzzKv4Rblsv1FAUR2SQ/d8f09ade7e9fc57afa2f425bb2da9ed5/business.jpg"
}
},
"content": {
"raw": "{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"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.\\n\\nLorem 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.\\n\\nLorem 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.\\n\\n\",\"nodeType\":\"text\"}],\"nodeType\":\"paragraph\"}],\"nodeType\":\"document\"}"
},
"video": {
"file": {
"url": "//assets.ctfassets.net/hi3b2mc578jm/4kK38bwyJRxPYoM3SADQrU/4b11d4079052f651685a407c7fc6ecb4/watch"
}
},
"audioClip": {
"file": {
"url": "//assets.ctfassets.net/hi3b2mc578jm/4QlnJBILMhACqeadWfr95S/7d70e3ff7d077cf463458edd93099432/mixkit-fast-rocket-whoosh-1714.wav"
}
}
}
}
]
}
}
To me, it seems that ReactPlayer is not able to find the video because it's stored locally, not in the domain you are telling the player (https://...).
Try deploying your site to get a valid URL or use a local path, using publicUrl or localUrl instead of video.file.url.
For the audio caption, you should use the file along with config props like:
<ReactPlayer
priority
autoPlay
loop
muted
className='react-player'
url={'https:' + video.node.video.file.url}
playing={isPlaying}
height = '100%'
width = '100%'
config={{ file: {
tracks: [
{kind: 'subtitles', src: 'subs/subtitles.en.vtt', srcLang: 'en', default: true},
{kind: 'subtitles', src: 'subs/subtitles.ja.vtt', srcLang: 'ja'},
{kind: 'subtitles', src: 'subs/subtitles.de.vtt', srcLang: 'de'}
]
}}}
/>
There is also an eslint error message asking for a track element,
could that be blocking it?
Depends on your ESLint configuration. You can configure it to block or to throw an error in the compilation (error) or to warn you but allow the compilation to complete (warning). According to what you say, it seems the second option, otherwise, you wouldn't be able to compile the project.
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>
);
}
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
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>