I have been sitting on this problem for a few days already, searching through a dozen StackOverflow answers, but to no avail.
I want to implement a dynamic box like the one in the picture.
All my current tries have not been successful, I got it working with all 4 sides expanding, or only working with a fixed box size(if the box size changed, all would break), but that's not what I'm trying to achieve here.
Any help would be greatly appreciated!
Edit:
I tried modifying the answers of this StackOverflow post, but I couldn't make it work with just one line expanding, like in the image.
"dynamic" might have been the wrong word choice, I just meant for it to be responsive, without breaking the expanded border line.
Does something like this work for you?
JSFiddle DEMO
.box {
width: auto;
max-width: 200px;
height: auto;
background: white;
border: 10px solid blue;
position: relative;
margin-top: 40px;
}
/* Adding the extended line */
.box:before {
content: "";
display: block;
position: absolute;
right: -10px;
top: -40px;
height: 40px;
width: 10px;
background: blue;
}
/* Dynamic height for test purposes */
.box:after {
content: "";
display: block;
padding-bottom: 100%;
}
<div class="box"></div>
Related
I am trying to implement a arrow-headed div. Below is the part of the code that is relevant to the post/question. I have been trying to figure out how to get this done for a while now but no success.
I have a grandparent div, a parent div with a child as follows
<div className="main-segment-container">
<div className="panel panel-default segment-select-box">
<div className="panel-header segment-select-box-header">MAIN SEGMENT</div>
<div className="panel-body segment-select-box-body">
<div className=has-subsegments'>
<input type="checkbox" className="form-check-input" value={checkedSegment.category_id} onChange={this.segmentChecked} />{' '}
<label className="form-check-label">{checkedSegment.name}</label>
</div>
</div>
</div>
</div>
Here is what I am trying to achieve (notice the arrowhead):
I am able to achieve this with this css:
.main-segment-container{
width: 100%
}
.has-subsegments{
background-color: #215C64;
width: 100%;
color: #fff;
position: absolute;
height: 30px;
}
.segment-select-box {
border-radius: 3px;
width: 100%;
/* max-height: 400px; */
/* overflow: scroll; */
position: relative;
}
.segment-select-box-body{
width: 100%;
max-height: 400px;
overflow: scroll;
padding: 0px;
display: inline-block;
}
.has-subsegments::after{
content: "";
margin-top: -15px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
position: absolute;
border-left: 21px solid #215C64;
width: 0;
height: 0px;
right: -20px;
top: 50%;
}
Problem:
When I use the css above, the .has-subsegments element seems to be at a fixed position when I scroll. Like this:
Question
How do I implement scroll without removing the element from the normal position?
Note:
When i remove scroll from .segment-select-box-body class, everything works perfect but the children list becomes very long, therefore a scroll is needed.
adding position: relative; to .segment-select-box-body class makes the :after pseudo-element invisible.
EDIT
See JSFIDDLE here : https://jsfiddle.net/uuwhndgu/16/
EDIT
Thanks for posting the jsfiddle. I don't think, what you're trying to achieve is possible the way you are trying to do it.
I updated the fiddle with a suggested workaround/fix: https://jsfiddle.net/uuwhndgu/34/
what I did, is giving the wrapping col a little more width (you probably would have to either increase the col to .col-md-3 or decrease the width of .segment-select-box a little. You probably need to do the latter anyway), a max-heightof 200px and a overflow-y: scroll;. I set the width of .segment-select-box to 90% and changed position: absolute;of .has-subsegments to position: relative;. I don't know if this helps you but I BELIEVE, that there aren't many ways to achieve what you are trying to achieve.
Original answer
I am not quite sure how you intend this thing to behave. But if the highlighted entry (the one with the arrow) just ought to stay where it was, I think you can simply replace position: absolute; with position: relative; in your .has-subsegments class. Now, I wasn't able to recreate this anything close to perfectly, because it's a react app, but still, you should get the idea:
with position: absolute; on .has-subsegments
with position: relative; on .has-subsegments
new to webdev so bear with me. I am developing a prototype of a Messaging Application, I have most of the basics worked out and I'm trying to add the little touches to make it feel nicer to use. I'm trying to make it so that when an individual message is hovered over, the time that message was sent will slide out from the message.
Here is my code at the moment: http://codepen.io/RBrNx/pen/GNzOWr
(Note: Click on "Toni" again and his message will appear, small bug. You can also send messages from the text box).
Now here are some images showing what I mean:
http://imgur.com/a/elB04
Ideally I think the 2nd one would look better.
I tried to implement it by adding a span inside the bubble like so:
<div class="bubble you">Test Message<span class="hover-time">13.45</span></div>
.hover-time{
position: relative;
left: 60px;
}
But that made the inside of the bubble stretch to account for the Span.
How can this be done?
EDIT: Thanks to Antidecaf I managed to get the left side working and figured out the right hand side as well. Here is the CSS I added:
.container .right .bubble.you .hover-time {
display: none;
position: absolute;
left: 110%;
color: #999;
width: 100px;
}
.container .right .bubble.me .hover-time {
display: none;
position: absolute;
right: 90%;
color: #999;
width: 100px;
}
These deal with the left hand messages (from the person you are messaging) and the right hand messages (from me). I also added:
.container .right .bubble.you:hover .hover-time{
display: inline-block;
}
.container .right .bubble.me:hover .hover-time{
display: inline-block;
}
So that the hover-time span is shown on hover.
You can do this with the markup you suggested by positioning .hover-time relative to .bubble. To do this, add position: relative to .bubble and position: absolute to .hover-time. Here's some more info on the technique.
<div class="bubble you"><span class="hover-time">13.45</span>Test Message</div>
CSS for positioning timestamp to the right:
.bubble {
position: relative;
}
.hover-time {
position: absolute;
left: 110%;
color: #999;
}
Same approach goes for positioning it to the left, but in this case you'll need to add a bit of margin to the bubble in order to free up space for the timestamp:
.bubble {
position: relative;
margin-left: 50px;
}
.hover-time {
position: absolute;
left: -50px;
color: #999;
}
<style>
.hover-time {
position: relative;
left: 60px;
display: none;
}
.bubble:hover .hover-time {
background-color: #ccc;
color: #000;
display: inline-block;
}
</style>
<div class="bubble you">Test Message <span class="hover-time">13.45</span></div>
Works for me. You'll probably want to spice it up a little with some transform or other fancy anim stuff.
EDIT: Perhaps you meant like so:
<style>
.bubble {
border: 1px solid #ccc;
width: 300px;
}
.hover-time {
float: right;
display: none;
}
.bubble:hover .hover-time {
background-color: #ccc;
color: #000;
display: inline-block;
}
</style>
<div class="bubble you">Test Message <span class="hover-time">13.45</span></div>
Border and width just to have a visual guide.
Maybe I'm misunderstanding, but are you styling the DIV as the speech bubble, then taking the span inside the div and telling it 'but not you buddy, you are special'?
If so, isn't it cleaner and less headaches to put your text message in a span also, styling the span as text bubble, and keeping the div as an invisible structural element?
Hi guys I'm trying to make a fancy style border that kind of highlights a block of text, its basically just two sharp lines that intersect (also gonna make them have a slow animated pulse thats subtlety noticeable, this is the code I have so far:
span.fancyTop::before {
position: relative;
right: -50px;
display: block;
width: 80%;
float: right;
height: 1px;
background: white;
z-index: 2;
content: "";
}
span.fancyRight::after {
position: relative;
right: -400px;
top: -20px;
display: block;
content: "";
float: right;
z-index: 2;
background: white;
height: 200px;
width: 1px;
float: right;
}
the only problem is it seems to push my content around:
I want to make it so that I can have the content fit nicely inside the lines but it seems to push it down, I also need it to be responsive for mobile. I'm trying to avoid using absolute positioning and I'd like to be able to use the classes reliably wherever and have the expected result. I'm not a front end designer by any means so any help would be fantastic. Thanks.
Absolutely positioned elements do not take up the DOM Space. So you may use this:
span.fancyTop::before {
position: absolute;
right: -50px;
display: block;
width: 80%;
float: right;
height: 1px;
background: white;
z-index: 2;
content: "";
}
span.fancyRight::after {
position: absolute;
right: -400px;
top: -20px;
display: block;
content: "";
float: right;
z-index: 2;
background: white;
height: 200px;
width: 1px;
float: right;
}
And make sure you position the parent relatively.
span.fancyRight, span.fancyTop {
position: relative;
}
If you change the positioning given to absolute, and add:
.fancyTop, .fancyRight { position: relative; }
I believe you'll get the result you're looking for. Absolutely-positioned elements are positioned relative to the container it's inside, so long as that container has a position associated with it.
If you want to get really fancy, just change .fancyTop and .fancyRight to .fancy and add the :before and :after pseudoclasses to the one class.
You may run into some other issues with the code you gave, like the span tag is an inline tag. I put together a fiddle for you as an example: https://jsfiddle.net/stgermaniac/p3d0a1ez/
The following is my code for positioning text over image. The requirements are:
Image should be adapt to screen automatically. Even on smart phone, the image should be displayed completely. Only showing part of the image is not allowed.
Text should be accurately positioned anywhere I wish.
.txtimg{
position: relative;
overflow: auto;
color: #fff;
border-radius: 5px;
}
.txtimg img{
max-width: 100%;
height: auto;
}
.bl, .tl, .br,
.tr{
margin: 0.5em;
position: absolute;
}
.bl{
bottom: 0px;
left: 0px;
}
.tl{
top: 0px;
left: 0px;
}
.br{
bottom: 0px;
right: 0px;
}
.tr{
top: 0px;
right: 0px;
}
<div class="txtimg">
<img src="http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg">
<p class="bl">(text to appear at the bottom left of the image)</p>
<p class="tr"> (text to appear at the top right of the image)</p>
</div>
However, the bottom left text is hide from fully displayed on my firefox browser.
It is wired that the code snippet runs pretty well in stackoverflow by clicking the Run Code Snippet below.
I don't know why. Anywhere I found a solution: change overflow:auto to overflow:visible. The problem will disappear.
Anyone advice?
I can't reproduce the problem on this specific code, but i know the problem. Simply add a vertical-align on the image.
.txtimg img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
This also work like this :
.txtimg img {
max-width: 100%;
height: auto;
display: inline-block;
}
Finally I found the problem. In another CSS class, I have already include the "overflow:hidden" line. So, I remove the corresponding line in class txtimg.
I try to create heading like this...
Title --------------------
This line with a custom image background
HTML :
<h2>Title</h2>
CSS :
h2 {background:url('line.png') repeat-x 15px 10px;}
Result :
Live : http://jsfiddle.net/5G2aq/
I try to repeat this image with X-axis and add some padding into the left.
But it doesnt work, 15px doenst work... or what ?
PS :Try to do with a single element <h2>, not :after or full-long image
Any trick ?
Do it like this, use :after pseudo with content: ""; and be sure you use display: block;, now we use position: absolute; and assign position: relative; to the container element. Last but not the least we use overflow: hidden; so that we don't get dirty scroll.
Demo
h2 {
position: relative;
overflow: hidden;
}
h2:after {
position: absolute;
height: 2px;
content: "";
display: block;
width: 100%;
top: 50%;
left: 60px;
background:url(http://oi39.tinypic.com/m7t8xw.jpg) repeat-x;
}
Coming to your solution, you are using repeat-x, so you won't see the background-position changing on the x axis as the image is repeating, if you want to go for this approach, you shouldn't repeat.
Even better approach
Demo 2 OR Demo 3 (Using your image)
<div><span>Hello</span></div>
div {
border-top: 1px solid #000;
margin: 20px;
position: relative;
}
div span {
display: block;
position: absolute;
top: -12px;
background: #fff;
padding-right: 10px;
}
The above way will be title width independent, I would've chosen this way
Note: You can replace div with h2