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.
Related
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/
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>
I have been trying to add pseudo elements with content into the CSS for a page that is being converted with the Flying Saucer library. When viewing the page in a regular browser as HTML, the code works fine and I can see the pseudo element (:before). When rendering the PDF using Flying Saucer however, the pseudo element disappears.
According to the official Flying Saucer spec, CSS 2.1 is supported so that should include pseudo elements and content attributes. So why isn't it working for me? All other CSS is working fine.
Besides of CSS2.1 pseudo-elements listed in the CSSParser, which are:
first-line
first-letter
before
after
Flying Saucer supports following pseudo-elements for output rendering:
first-child
even
odd
last-child
Some browser related/interactive pseudo-elements are supported as well:
link
visited
hover
focus
active
See the source code of addPseudoClassOrElement.
Flying-saucer supports the following CSS pseudo elements:
before
after
first-line
first-letter
It only supports the standard, double-colon CSS3 syntax (::after), and not the old, single-colon CSS2 syntax (:after).
Here is a working example:
<html>
<head>
<style>
div::before {content: "before - "}
div::after {content: " - after"}
p::first-line {font-weight:bold}
p::first-letter {color:blue}
</style>
</head>
<body>
<div>A div</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed scelerisque augue. Nulla eleifend aliquet tortor, vel placerat velit fringilla vitae. Sed quis sem eu arcu dapibus convallis.</p>
</body>
</html>
And the result (using flying-saucer 9.1.6):
I want this simple Bootstrap 3 accordion:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
</div>
</div>
</div>
</div>
to have an plus icon when in closed and a minus icon when in hover and active.
My css:
.panel-title a {
background: url('plus.png') no-repeat 100% 50% ;
padding-right:20px;}
.panel-title a:hover{
background: url('minus.png') no-repeat 100% 50% ; }
.panel-title a:active {
background: url('minus.png') no-repeat 100% 50% ; }
So far is working except the active state. Can you help me to make it work?
Thank you
If I recall correctly, the :active state only occurs while the link is actually be clicked. :active has nothing to do with the state of the collapse.
To get this to work, I would change your CSS to something like this:
.panel-title a {
background: url('plus.png') no-repeat 100% 50% ;
padding-right:20px;}
.panel-title a:hover{
background: url('minus.png') no-repeat 100% 50% ; }
.panel-title a.active {
background: url('minus.png') no-repeat 100% 50% ; }
Note that instead of using the :active pseudo, we are actually going to use a class called .active.
Now, just toggle the class on and off via javascript. There are a couple of ways to do this, but the most straight forward would be to attach a listener to the existing a tag, like so:
$('[data-toggle]').on('click', function() {
$(this).toggleClass('active');
});
So in summary, change :active to .active in your css, and add three lines of javascript.
See http://www.bootply.com/130209 for a working example.
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/