I am trying to add an svg and another span element container an svg to the far right of an input however, with my current setting they are overlapping:
I have a structure like this:
/* How can I fix this such that the red will be aligned before the arrows? Currently my css is: */
svg,
#mySvg {
cursor: pointer;
position: absolute;
display: inline-block;
opacity: 0.8;
right: 0;
position: relative;
margin-left: -25px;
z-index: 9999 !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex align-items-center input-fields">
<input class="form-control textInput" type="text">
<svg></svg>
<span id="mySvg"></span>
</div>
currently they look like this:
Here is a simple example that I managed to work on for this purpose. You can change your HTML like this:
<div class="input-fields">
<input class="form-control textInput" type="text">
<div id="icons_container">
<svg></svg>
<span id="mySvg">♠</span>
</div>
</div>
and for the CSS part, you do like this:
#icons_container {
position: absolute;
display: flex;
align-items: center;
right: 0;
top: 0;
padding: 0px 5px 0 0;
}
I have wrapped both the icons with div that is positioned as absolute and it's display property is set to flex.
Here is the example in full in CodePen. https://codepen.io/ahmadkarimi2009/pen/ExgpLbe
Note: I haven't used Bootstrap for tackling this issue.
When you using absolute position for elements you can not control overlaping them.
The only thing you can do is that add more right offset to one of them to prevent overlaping.
Example:
svg {
right: 10px;
}
#mySvg {
right: 40px;
}
Related
I want to create a list item in a game that has a background, an iconholder with an icon inside it, a title and description and up to three resources. I am working with Bootstrap and thought that using a container-fluid with a row inside it might work but the images are placed underneath each other (see image) []
I don't want to use things like position:absolute, or set the margin at like -250% 0 0 0. Is there a way to say that images should be placed on top of one another, instead of underneath each other?
This is my HTML code thus far:
.resourceHolder
{
position: relative;
}
.resourceIcon
{
position: relative;
}
.nopadding
{
padding: 0 !important;
margin: 0 !important;
}
.iconHolder
{
position: relative;
width: 100%;
}
.icon
{
position: relative;
width: 65%;
}
.bannerText
{
font-family: FenwickWood;
color: #0062cc;
margin: 0 0 20% 0;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: beige;
pointer-events: none;
}
<div class="container-fluid">
<img class="background" src="assets/UI/window/wood_plank1.svg">
<div class="row">
<div class="col-sm-3 nopadding">
<img class="iconHolder" src="assets/UI/window/grid4L.svg">
<img class="icon" src="assets/Terrain_Medieval/Decor/villageSmall03.png">
</div>
<div class="col-sm-3 nopadding">
<h1 class="bannerText">Village</h1>
</div>
<div class="col-sm-2 nopadding">
<img class="resourceHolder" src="assets/UI/window/grid4L.svg">
<img class="resourceIcon" src="assets/Icons/gold_coins.png">
</div>
</div>
</div>
You can use CSS Grid layout, and put both images in the same cell.
Checkout out this jsfiddle: https://jsfiddle.net/dscmr7oz/.
Also, when you say you don't want to use things like position:absolute", why is that? It is a completely legitimate way to put things on top of each other. Are you aware that if you put an absolute-positioned element inside a relative-positioned element, that the inner element is absolutely positioned, relative to its parent?
.container {
position: relative;
}
.container .bottom-image {
position: absolute;
top: 0;
left: 0;
z-index: 1;
{
.container .top-image {
position: absolute;
top: 20px;
left: 20px;
z-index: 2
}
I am looking at the Instagram website. I notice that they put a zoom icon inside the padding of adjacent input. I wonder how this is done, can somebody show me an example
Thanks.
Here is the example for jQuery search box on focus show hide icon as per your reference. I hope this answer will be helpful.
$('.btn-close').hide();
$('.fa-search').show();
$('.input-text').on('focus', function() {
$(this).siblings('.btn-close').show();
$(this).siblings('.fa-search').hide();
});
$('.btn-close').click(function(e) {
$('.fa-search').show();
$('.btn-close').hide();
e.stopPropagation();
});
$('.input-text').on('focusout', function() {
$(this).siblings('.btn-close').hide();
$(this).siblings('.fa-search').show();
});
.input-text {
border: 1px solid #888;
min-height: 40px;
font-size: 16px;
padding: 0 25px 0 5px;
}
.input-box {
position: relative;
display: inline-block;
}
.input-box .fas,
.btn-close {
position: absolute;
right: 0;
padding: 11px 4px;
top: 0;
color: #888;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="input-box">
<input type="text" class="input-text" placeholder="text">
<i class="fas fa-search"></i>
<a class="btn-close" href="#"><i class="fas fa-times-circle"></i></a>
</div>
The answer is that they don't actually put the icon inside the input box. The just draw a rectangle around both the icon and the <input>. The icon itself is added to the <span> on the line right after the highlighted <input> in the image in the question. Look for the class coreSpriteSearchIcon.
When I inspected that <span>, I saw these styles applied:
background-image:
url(/static/bundles/metro/sprite_core_2x_6ba81dcece9b.png/6ba81dcece9b.png);
}
background-size: 410px 396px;
background-position: -240px -366px;
height: 10px;
width: 10px;
The background-image is the sprite file (an image containing multiple smaller images). background-size ensure that the image isn't stretched. background-position tells you where to find the search icon within the larger sprite image. And, width and height tell you how much of the image to display.
They were able to place it where it is by using absolute positioning:
left: 11px;
position: absolute;
top: 9px;
z-index: 2;
One of the way to achieve this is to use position: absolute and put input into a wrapper. Let me show you:
.input-wrapper {
position: relative;
}
.input-wrapper img {
position: absolute;
top: 5px;
left: 5px;
}
input {
height: 40px;
width: 200px;
padding-left: 35px;
font-size: 20px;
box-sizing: border-box;
}
<div class="input-wrapper">
<img src="https://picsum.photos/30"/>
<input type="text" />
</div>
So basically we use position: relative to move img relatively to it. Also note, that you have to add extra padding(left one in this case) so text won't overlap with icon.
There are a lot of ways to do the same: position: relative, negative margin, background-image, utilising of pseudo-elements, but absolute positioning is the most semantically correct in my opinion.
Goal: Get the button element fixed to the bottom of the main element. I tried positioning it's container with relative positioning so it sticks to the bottom:
/* POSITIONING NOT WORKING. I WANT THIS DIV FIXED TO BOTTOM OF PARENT */
.wrapper:nth-child( 4 ) {
background-color: #bbb;
position: relative;
bottom: 0;
}
This isn't moving the .wrapper div at all. Ideas?
#import url( "https://necolas.github.io/normalize.css/latest/normalize.css" );
* {
box-sizing: border-box;
}
main {
background-color: #eee;
}
main, input {
padding: 2%;
}
main input {
width: 100%;
margin: 5% 0;
border: 0;
}
.clr-fix::after {
content: "";
display: block;
clear: both;
}
.wrapper {
width: 23%;
margin: 1%;
padding: 2%;
background-color: #ddd;
float: left;
}
/* POSITIONING NOT WORKING. I WANT THIS DIV FIXED TO BOTTOM OF PARENT */
.wrapper:nth-child( 4 ) {
background-color: #bbb;
position: relative;
bottom: 0;
}
<main class="clr-fix">
<div class="wrapper">
<input type="text" value="position:bottom">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="wrapper">
<input type="text">
<input type="text" value="Isn't working">
<input type="text">
<input type="text">
</div>
<div class="wrapper">
<input type="text">
<input type="text">
<input type="text" value="On 'A button'">
<input type="text">
</div>
<div class="wrapper">
<button>A button</button>
</div>
</main>
Relative positioning is a change in relation to the spot the element is already positioned. So if position: relative, bottom: 0 (or top:0, left:0, right:0, etc) means leave this at the same spot it currently is.
If you want this positioned to the bottom of the element, you need to make the parent element position: relative, and the element you want pinned to the bottom position: absolute (with bottom: 0). Absolutely positioned elements will hop on out of the DOM flow and go instead in relation to it's closest relative parent.
essentially you want:
.wrapper {
position: relative;
}
.wrapper:nth-child(4){
position: absolute;
bottom: 0;
}
Your main style will need a relative position applied to it. As mentioned, you can't position bottom:0 with relative positioning. See if this works for you.
main{
background-color: #eee;
position: relative;
}
.wrapper:nth-child(4) {
background-color: #bbb;
position: absolute;
bottom: 8%;
right: 1%;
}
To make the 4'th wrapper stick to bottom you need to put position: relative; on main and add position: absolute to the 4'th wrapper.
a position: absolute; element is absolutely positioned relatively to it's closest parent which is position: relative; - in your case that would be main which wraps the 4'th wrapper.
I am designing a site that has a specific requirement to display a ribbon to the far right of the screen, I am using Bootstrap and the ribbon is in a bootstrap container, with a row and columns divided equally between the two elements, I want the Designer Text to stay exactly where it is because I am trying to keep it responsive and contained when going to mobile. How can I push the image div (Ribbon) all the way to the far right extending outside of the container.
I have include an image below of what I am working with. I may be doing this completely wrong, as my design skills are minimal.
I would like it to look like this
Here is the code:
.bookmarkRibbon {
/*width:100%;*/
height: 0;
width: 100%;
border-bottom: 22px solid #ff5750;
border-top: 22px solid #ff5750;
border-left: 20px solid transparent;
position: absolute;
margin-right: -3000px;
}
.bookmarkRibbon a {
display: block;
padding: 0;
position: relative;
/* allows us to position our pseudo-elements properly */
background: #ff5750;
overflow: visible;
/*height: -18px;*/
margin-left: 29px;
margin-top: -18px;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: x-large;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-7">
<h1 ID="lblCategoryName" runat="server"></h1>
</div>
<div class="col-xs-5">
<div class="bookmarkRibbon" id="discountBannerContainer" runat="server" style="margin-top: 15px">
20% OFF ADDRESS STAMPS<p class="mine">CODE: STAMP 20</p>
</div>
</div>
</div>
</div>
You have to move the ribbon outside the container to be child of body.
Than you can position it absolute.
<body>
<div class="ribbon"></div>
</body
.ribbon {
position: absolute;
top: 300px;
right: 0;
}
If you can not move the ribbon outside the container you have to use position fixed.
Unfortunately the ribbon will scroll with your page.
.ribbon {
position: fixed;
top: 300px;
right: 0;
}
Last option would be to use negative values and use the calc function.
This is not quite ease but doable.
Do you have a link to your site? I could take a looke at it if you like to.
I would like to make the question mark on hover appear on the top right part of the white box. Currently, it is appearing on the bottom left part of the white box.
<div class="panel panel-default">
<div class="panel-heading">
Test
</div>
<div class="panel-body">
<div id="rptTitle">
<br />
<br />
Text here....... text here......
<br />
<br />
</div>
<div class="questionBox" data-original-title="More Information" data-toggle="tooltip" data-placement="top">
<i class="fa fa-question-circle grayColor"></i>
</div>
</div>
</div>
CSS:
.grayColor {
color: #A6A6A6;
}
.panel {
cursor: pointer;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #fff;
opacity: 0.8;
}
.panel:hover {
cursor: pointer;
border: 1px solid #eee;
background: #fff none repeat scroll 0 0;
opacity: 1;
}
.panel:hover .panel-heading {
background-color: #f6f6f6;
}
.panel .questionBox i {
font-size: 15px;
display: none;
}
.panel:hover .questionBox i {
font-size: 15px;
display: block;
}
JSFiddle
I tried using position:absolute; and using right, top but that wouldn't help me if I have multiple divs
UPDATE:
You should relatively position your outer panel and then you can absolutely position your icon.
Try the following solution:
.panel {
position:relative;
}
.fa.fa-question-circle {
position: absolute;
top: 0;
right: 0;
}
Fiddle
The reasoning for this is because absolutely positioning something positions an item relative to it's first ancestor element that is positioned non-statically. This is the reason for the relative positioning to the panel.
Picture a box. The box has a relative positioning. Anything inside of that box that is positioned absolutely has a maximum height/width of that box. So when you position the icon absolutely and use top: 0; right: 0, you get it to the top right of that box. In this case, the box is the panel.
UPDATE
Given your new criteria, you can try something like this:
#rptTitle {
display:inline-block;
width: 90%;
}
.questionBox {
display: inline-block;
float: right;
}
It's a quick and dirty solution, but fits your needs. Use the concepts to build it better :)
New Fiddle
You had the right idea with position:absolute; but you also need to set the parent element to position:relative;. Lastly add top:0px and right:0px to the question mark element.
With the updated post you will need to also move the div inside the div with the class panel-body and make sure panel-body is position:relative;.
JSFiddle
Try this:
.questionBox > * {
position: absolute;
top:65px;
right: 25px;
}
Live example:
(updated) https://jsfiddle.net/kow5np4q/7/
Another approach (without position: absolute)
https://jsfiddle.net/kow5np4q/8/
The 3rd approach:
https://jsfiddle.net/kow5np4q/10/
And with the 3rd approach, you don't need to use <br>s. Use padding instead.