Is it possible to arrange 2 text elements in a line so that the second element is at the level of the last line of the first text - react-native

I code a simple react-native messaging application with kind of message baloons containing 2 text elements: a message text and message time. A message text can be multiline and the time text has fixed width.
However, i ran into the problem that I could not arrange the time text element in the same level as the last bottom line of message text.
My goal is to get a component with behavior similar to easy-to-do HTML example but I don't know how to implement such in flex-box model in RN.
.container {
width: 300px;
background-color: #ff0000;
border-radius: 10px;
padding: 10px;
}
.time {
width: 50px;
text-align: right;
background-color: #00ff00;
display: inline-block;
float: right;
}
.separator {
height: 10px;
}
.clear{
clear: both;
}
<p>when the bottom line of message is not long enough that time can be fit into the same line</p>
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida tristique arcu, malesuada dignissim dui porttitor id. Praesent id posuere tortor. </span>
<span class="time">12:37</span>
<div class="clear"></div>
</div>
<div class='separator'></div>
<p>when the bottom line of message takes more space, the time text takes additional line at bottom</p>
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida tristique arcu, malesuada dignissim dui porttitor id. </span>
<span class="time">12:37</span>
<div class="clear"></div>
</div>
Any help would be appreciated.

This might not be the answer you were looking for but I'd suggest using a UI component library such as Nativebase if you're getting started, it's good practice and you surely don't want to build everything from scratch. They have lots of components you can take advantage of and have lots of example on how to implement them. You should also check out material design - https://material.io/

Related

vue fade transition only work when element is leaving and not entering

I am trying to learn Vue.js and doing a basic fade. I have an list of links that always stay on the page. On clicking the link, I wish to fade in and out the visibility of a div. By default the div isn't seen. This div contains several components. I tried to follow the documentation. However, the element only fades out while leaving, but nothing happens to it when enters. I've removed excess parts of this document and kept the relevant elements.
<template>
<div class="list">
<ul>
<li #click="openWindPoetry">☞ Wind Poetry</li> // button that toggles div show
</ul>
</div>
<div style="width: 97%;" class="project container">
<transition name="fade" mode="out-in">
<div v-if="showWP" class="backdrop" #scroll.passive="handleScroll"> // div needed to transition
<Header theme="WP" header="Wind Poetry" :types="['Interaction','Data Visualisation','2020']"></Header>
<BodyText theme="WP" heading="ABOUT"
body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla magna, consectetur quis tellus eget, ultricies mattis nisi. Duis dictum dolor in ante placerat, non ultricies dui faucibus. Vivamus lobortis sapien porttitor, molestie urna ut, varius neque. In eu dapibus lectus. Etiam consequat, massa ut consequat lacinia, velit dui molestie dolor, id dapibus sem justo a ante. In pellentesque, odio ut pharetra congue, quam tellus efficitur arcu, non mattis risus nibh ac turpis.">
</BodyText>
<div class="introImg">
<video alt="GIF DEMO" loop autoplay="autoplay" src="./assets/wind/wind_poetry-demo-1.mp4"></video>
</div>
</transition>
</div>
</template>
<script>
export default {
name: "App",
components: {
Header,
Gradient,
BodyText
},
data() {
return {
title: "LIST OF WORKS",
ProjTitle: "Wind Poetry",
showWP: false
};
},
methods: {
openWindPoetry() {
(this.title = "BACK TO HOME"),
(this.showWP = true),
(this.showRec = false);
}
}
}
</script>
<style>
#app {
font-family: "Roboto Mono";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease-out;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
In Vue 3, the transition class name has changed from -enter to -enter-from, so your classes should be renamed accordingly to allow the transition calculation to work properly:
/* .fade-enter {/*...*/} ❌ Vue 2 class name */
.fade-enter-from {/*...*/}
demo

Boostrap-vue Carousel sliding bug

I'm experiencing a bug while using Boostrap(4)-Vue.
Namely, when transitioning between slides the image scrolls up and the page 'jumps' as can be seen below. I've copied exactly the source code in the reference provided.
The bug persists in both Chromium and Firefox, both for desktop (large) view and for mobile.
Any idea would be appreciated.
Vue component:
<template>
<b-carousel id="carousel1"
style="text-shadow: 1px 1px 2px #333;"
controls
indicators
background="#ababab"
:interval="4000"
img-width="1024"
img-height="480"
v-model="slide"
#sliding-start="onSlideStart"
#sliding-end="onSlideEnd">
<!-- Text slides with image -->
<b-carousel-slide caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
img-src="https://picsum.photos/1024/480/?image=52"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
<h1>Hello world!</h1>
</b-carousel-slide>
<!-- Slides with image only -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58">
</b-carousel-slide>
<!-- Slides with img slot -->
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
<b-carousel-slide>
<img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
src="https://picsum.photos/1024/480/?image=55" alt="image slot">
</b-carousel-slide>
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque
ut lacus vel interdum.
</p>
</b-carousel-slide>
</b-carousel>
</template>
<script>
import data from '#/data'
export default {
name: 'Home',
data () {
return {
slogan: data.slogan,
welcome: data.welcome,
servicesList: data.servicesList,
slide: 0,
sliding: true,
selected: ''
}
},
methods: {
expand (sect) {
sect.expanded = !sect.expanded
},
onSlideStart (slide) {
this.sliding = true
},
onSlideEnd (slide) {
this.sliding = false
}
}
}
</script>
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.selected {
background-color: aquamarine;
}
</style>

Text isn't wrapping inside absolute positioned container

I've created tooltips that are absolutely positioned and have divs inside of them that have max-width: 200px;. The text within the divs are not wrapping to the next line, however. They're going outside of the container even though there are spaces in the text, so it's not a word-break issue. See image below:
Edit: The tooltips are pulling in the text from their trigger element's title attribute and that seems to be the problem. If the content is hard-coded, the text wraps just fine.
Here's the HTML:
<div class="tooltip">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada, lectus eget gravida eleifend, odio libero hendrerit elit.</div>
</div>
And the CSS:
.tooltip{
padding: 10px;
position: absolute;
background: #303030;
font-size: .9em;
color: #ccc;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.4);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.4);
box-shadow: 0 5px 10px rgba(0,0,0,.4);
}
.tooltip div{
max-width: 200px;
border: 1px solid red; /* See where element is */
}
This seems so obvious, but I cannot think of what the issue is. Any help would be appreciated.
Thanks
It probably has something to do with the way you're injecting the text into the .tooltip element. Try something like this (using jQuery):
$('.trigger').on('click', function() {
$('.tooltip div').html($('.trigger').attr('title'));
});
http://jsfiddle.net/DyxkA/

Kwicks slider images with text

Hello (I am not a programmer so bear with me)
I am using drupal 7. My boss loves the KWICKS slider. I have gotten this to work but only with images using views-kwicks module.
I would like to be able to have text(teaser) placed over the images in the slider with a link to the corresponding page when clicked, like http://demo.themesmania.com/creative/kwicks-slider
How should I go about doing this? Thank you!!
the markup used in that link is:
put this inside your <li></li> of kwicks:
<div class="slide-description">
<h4>At vero eos et accusamus et</h4>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti</p>
</div>
then use this css:
.slide-description { background-color:#000;
bottom: 0;
cursor: pointer;
display: block;
font-weight: normal;
left: 0;
line-height: normal;
padding: 16px 20px;
position: absolute;
width: 760px;z-index: 2;}

div disappearing while changing the height of Safari and Chrome browsers

Visit this URL using Safari or Chrome browser:
http://aspspider.net/sunlight1000/two_col_div_layout_w3valid.htm
Set the width of the browser’s window to make sure the height of the Green box is greater than the height of the Red box. Then grab the lower edge of the browser’s window and drag it to the lower edge of the Green box and play around it. You will notice the Red box disappears when the lower edge of the browser’s window goes higher than the lower edge of the Green box. Then continue to shrink up the height of the browser’s window and the Red box will appear again. You will notice the Red box appears again exactly at the moment the lower edge of the browser’s window reaches the low edge of Red box. The Red box never disappears in other browsers (IE, FF and Opera). Is this a bug in Safari or some kind of “feature”? In any case I will be highly appreciated if someone suggests me a workaround to avoid disappearing of the Red box in Safari.
Here is the code of above mentioned page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2 Column Fixed Liquid CSS Layout</title>
<style type='text/css'>
.wrapper
{
width: 100%;
min-width: 300px;
}
.wrapright
{
float: left;
width: 100%;
background-color: Blue;
}
.right
{
margin-left: 160px;
background-color: Lime;
}
.left
{
float: left;
width: 150px;
margin-left: -100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="wrapright">
<div class="right">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, SED DIAM NONUMMY NIBH
EUISMOD TINCIDUNT UT LAOREET DOLORE MAGNA ALIQUAM ERAT VOLUTPAT.
</div>
</div>
<div class="left">
<div style="background-color: red;">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, ...
</div>
</div>
</div>
</body>
</html>
I'm not sure if this would work for your final layout, but based on the demo layout: seems like the negative 100% margin could be causing the issue. The behavior appears to be the same if you take away the float and margin declarations and do a position: absolute on the .left div. As long as the container is relatively positioned, I think you'll get the same end result.