I just finnished of creating the basis for my chat... I just got around detecting the scroll positioning of the user and want to use this information to make a "Scroll down button" if the chat is not fully scrolled down and a message is recieved. I used position: sticky and that worked all well... But when i got around to testing it across web browsers it did not work very well seems to be very short term to go with it then. What kind of positioning can I use to achieve the same results cross platforms?
<div id = 'chatlogs'>
<div class='chatContainer self'>
<div class = 'imgContainer'>
<img src='displayProfilePicture.php?user_id=$id'>
</div>
<div class='content'>
<div class = 'message'>
". $extract['msg'] ."
</div>
</div>
The chatlogs is filled with multiple of the shown small "chat objects" and no i want for the popup to be placed at the bottom verticaly and center horizontaly in the chatlogs.
<span onclick = 'doScroll();' class = 'fa fa-arrow-down'></span>
</div>
position: sticky just works in chrome for now
To make the button fixed in the scroll you need to let him outside the content scrollable
<div class="scroll-wrapper">
<div class="scroll">
blah blah
</div>
<span onclick = 'doScroll();' class = 'fa fa-arrow-down'></span>
</div>
and with css you can use position absolute to let it fixed
.scroll-wrapper{
position: relative
}
.fa-arrow-down{
position: absolute;
left: 50%; // center horizontally
transform: translateX(-50%); // center horizontally
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
bottom: 10px;
}
Related
In React, I have a parent component and a child component. The parent shows an iframe, returning this jsx:
<div className={cx("col-md-6", classes.BWrapper)}>
<iframe className={classes.Iframe} width="100%" src="https://www.youtube.com/embed/OVoFzu-vH4o" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
Then the child component handles some asynchornous code and while doing that it changes the state to loading and showing a spinner
return (
<div className={globalStyles.Card}>
<div className={cx("card-header", globalStyles.CardHeader)}>
<ul className="nav nav-tabs card-header-tabs">
{formTypesJsx}
</ul>
</div>
<div className="card-body">
<div className="tab-content">
<div role="tabpanel" className="tab-panel" id="signup-form">
{this.props.loading && (<div><Backdrop show/><Spinner/></div>)}
I guess it's not ideal to show a spinner in the child component that is supposed to cover in gray the elements of the parent, but I set the spinner elements with z-index and it's working fine except the iframe window is still appearing on top of the spinner.
Spinner css:
.Center {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 200;
}
I tried different stuff including giving the spinner z-index: -1 , opacity: .99 and also tried to give the iframe an absolute positioning and a higher z-index than the spinner, and giving the spinner relative position
Is there something I'm missing? Why is only the iframe appearing on top of the spinner?
Thanks in advance
I have the following angular component lets call it child-component
<div>
<a-component-tag></a-component-tag>
<router-outlet></router-outlet>
</div>
which is itself being rendered into another router-outlet like this
<div>
<top-component></top-component>
<router-outlet></router-outlet>
<div>
I would like the component that is rendered in the first router-outlet above to either render below a-component-tag or cover a-component-tag, depending on the user clicking a maximize, minimize button. It shouldn't cover anything but a-component-tag (i.e. it should not cover top-component).
This component is defined by
<div id="thiscomp" [ngclass]="max?cover:minimize">...</div>
I tried to define these two classes as
.cover{
position: absolute;
top: 0;
left: 0;
z-index:100;
}
.minimize {
margin-top:30px;
}
but the cover class is not working: Some of the subcomponents in the thiscomp div are rendered above some stay minimized.
You're trying to change the order in which two DOM elements appear -- there are better techniques than absolute positioning available for that.
The javascript in this example is just for demo; the work is being done in the CSS:
document.getElementById("example").onclick = function() {
document.getElementById("container").classList.toggle('flip');
}
#container {display: flex; flex-direction:column}
#container.flip {flex-direction: column-reverse}
<div id="container">
<div class="componentA">Component A</div>
<div class="componentB">Component B</div>
</div>
<button id="example">Toggle</button>
I'm having the same problem the author of this question exhibits with affix, specifically the authors comment on the accepted answer. The answerer provides a secondary solution, but this is unsatisfactory.
The issue occurs when all of the following conditions are present:
Affixed div is taller than view port
Affixed div is tallest part of page
User scrolls past affix-top
It is demonstrated in this JSFiddle: https://jsfiddle.net/g1ns9k8o/3/ with the following code:
CSS:
.top-bit { height: 100px; }
.sidebar { width: 200px; padding: 10px; }
.sidebar.affix { top: 10px; }
HTML:
<div class="top-bit">
</div>
<div class="row">
<div class="col-xs-9">
<!-- short content -->
</div>
<div class="col-xs-3">
<div class="sidebar" data-spy="affix" data-offset-top="100">
<!-- long content -->
</div>
</div>
</div>
I had this problem and ran into the jerky scroll movement. To fix it, I used JavaScript to compare the height of the affixed element to the element it is sitting next to. If the affixed height is less than the content height, set the affix. Otherwise, just let the affixed element sit where it is.
So, say it's a sidebar that I'm fixing next to a content element.
// Pseudocode
if (sidebar.height < content.height) {
$(sidebar).affix({});
}
I have one div that should contain text and bellow it one image.
I don't want that image to ever go out of that div. Just to the bottom.
That image maximum should be 128px.
But when text on top of the div is too large image should become smaller.
I have tried something but this stick image to the bottom of the browser:
<div style="width:250px; height:300px;background:#ff0000;">
<div style="background:#00ff00;">hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/></div>
<img src="http://www.blogcdn.com/www.joystiq.com/media/2008/07/ea.logo.round.490.jpg" style="position: absolute;
bottom: 0;
set left: 0;
height: 24px;"/>
</div>
Update
<div style="width:250px; height:300px;background:#ff0000;">
<div style="background:#00ff00;">hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>
hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hjg<br/>jhg</div>
<img src="http://www.blogcdn.com/www.joystiq.com/media/2008/07/ea.logo.round.490.jpg" style="position: relative;bottom: 0;left: 0; height:100%;"/>
</div>
Update
http://jsfiddle.net/jjehN/
UPDATE:
For your needs use "float" instead. Remember to use the "clear" after floats so you dont break the page. Heres your code, working with textwrapping
<div style="position:relative;width:250px; min-height:300px;background:#ff0000;">
<div style="background:#00ff00;">hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hjg<br/>jhg</div>
<img src="http://tools.android.com/_/rsrc/1306369561351/recent/miscellaneousimprovements-1/android_icon_128.png"style="float:bottom;
bottom: 0;left: 0; background:#0000ff;max-height: 100%;"/>
<div style="clear:both;"></div>
</div>
For making the picture shrink/grow. Use Javascript. Maybe jQuery will be easiest for you. Make a new tread here at Stackoverflow if you find any troubles using it.
Best Regards
Jonas
Try this:
<div style="width:250px; height:300px;background:#ff0000;position: relative;">
<div style="background:#00ff00;">hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>
hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hjg<br/>jhg</div>
<img src="http://www.blogcdn.com/www.joystiq.com/media/2008/07/ea.logo.round.490.jpg" style="position: absolute;bottom: 0;left: 0; height:100%;"/>
</div>
I have a login form on my website that displays when a user clicks a button. It is a div that floats over other content. It only takes up a small portion of the page (directly below the sign in link).
It all works fine apart from one small thing. It displays aligned to the left of the sign in link (i attempted a diagram below).
|sign in|
|sign in stuff here|
I actually want it to look like this (align to the right of the sign in link):
|sign
in|
|sign in stuff here|
This is my HTML:
<div class="clear">
<a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;"><span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span></a>
</div>
<div id="signinbox" style="display:none;">
<p>Who would you like to sign in with?</p>
<p>Google</p>
<p>Yahoo</p>
<p>Other</p>
</div>
And the CSS for the sign in box:
signinbox {background-color:#C1DEEE;
padding:10px; z-index:1; position:
absolute; top:66px; }
Is it possible to do this in just CSS?
Thanks
Wrap the signin info inside another div and call it inner-signin then position that relative to the absolute positioned outter div. You may also have to set the width on the absolute positioned outter div.
div.inner-signinbox {
position: relative;
right: 20px;
}
signinbox {
width: 250px; //ADD A WIDTH
background-color:#C1DEEE;
padding:10px;
z-index:1;
position: absolute;
top:66px;
}
If that does not work, why not just add a "left" property to the signingbox to set the horizontal position as well as the vertical. Is there a reason you don't can't absolute position the element with x and y?
I think you may want to try
float: right
or
text-align: right
Put the sign-in stuff inside the div containing the sign-in button.
Make the container position: relative.
Then give the sign-in stuff position: absolute; and right: 0;.
Incidentally, take care here; requiring Javascript merely to log in is pretty rude. A lot of people run NoScript for a variety of reasons.
I have created new div with class "main-pane". You can adjust the position of "signinbox". from the css by changing the value of "right" and "top".
<div class="main-pane">
<div class="clear">
<a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;">
<span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span>
</a>
</div>
<div id="signinbox" style="display:none;">
<p>Who would you like to sign in with?</p>
<p>Google</p>
<p>Yahoo</p>
<p>Other</p>
</div>
</div>
.main-pane{
position:relative;
}
#signinbox{
width: 250px;
background-color:#C1DEEE;
padding:10px;
z-index:5;
position: absolute;
top:66px;
right:0px;
}
Thanks,
Arun Krishnan