Fiddle: https://jsfiddle.net/kn7g54j1/2/
How do I position the tooltip on top of it's parent's padding? Is that even possible?
Here's my snippet:
span {
width: 100px;
}
.input-group {
padding-right: 20px;
}
.tooltip {
position: absolute;
}
<div class="input-group">
<input type="text" value="firstname" />
<div class='tooltip placeholder'>^</div>
</div>
<div class="input-group">
<input type="text" value="lastname" />
</div>
And this is what the code outputs:
How do I position the tooltip on top of it's parent's padding? Is that even possible?
It is definitely possible.
You have the right idea with the position: absolute. The main point is removing the tooltip from the document flow, otherwise, it will be in the content area of the parent element, instead of over the parent's padding.
Try it here:
.input-group {
float: left;
padding-right: 20px;
background: gray;
position: relative;
}
.tooltip {
position: absolute;
top: 0;
right: 0;
background: cyan;
}
<div class="input-group">
<input type="text" placeholder="First Name" />
<div class='tooltip placeholder'>^</div>
</div>
<div class="input-group">
<input type="text" placeholder="Last Name" />
</div>
Edit: I have refactored your code as nesting block elements in <span> isn't good practice.
Can you set negative margin to make this work?
For example
.tooltip {
position: absolute;
margin-top: -10px;
}
Weave: http://kodeweave.sourceforge.net/editor/#ab8e7d11a9e2412863824bf0e3176caf
I might be wrong, but last I checked embedding a DIV inside of a SPAN element is not valid HTML
First off a DIV element by default is display block. Meaning it behaves like a paragraph (minus the padding) and always is added on a new line. So instead of using a DIV use a SPAN element which is display inline. Remember DRY!
Now as for your question...
How do I position the tooltip on top of it's parent's padding?
You can do this using position absolute, position fixed, or position relative. (In your case absolute or relative would be what you want to use)
Here's a simple example. (I'm using Normalize CSS Reset so the UI looks the same on all browsers.)
.tooltip {
position: relative;
top: 8px;
}
<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>
<span class="input-group">
<input type="text" value="firstname">
<span class="tooltip placeholder">^</span>
</span>
<span class="input-group">
<input type="text" value="lastname">
</span>
You can use position:relative along with z-index to get your tooltip anywhere and over any padding or element you want..
I have implemented your code on a seperate html as i didn't have your html structure.
You can change the .topltip{top:__px} to adjust your tooltip vertically according to your need.
<html>
<head>
<style>
span {
width: 100px;
}
.input-group {
padding-right: 20px;
}
.tooltip {
position: relative;
top: -10px;
display: table-cell;
z-index: 2;
}
.input-group{
display: inline-block;
}
</style>
</head>
<body>
<span class="input-group">
<input type="text" value="firstname" />
<div class='tooltip placeholder'>^</div>
</span>
<span class="input-group">
<input type="text" value="lastname" />
</span>
</body>
</html>
Related
I want to create forgot password button or <a> tag in inside <input> tag. And I want to right align the <a> tag in <input> but I got stuck.
<div class="form-group">
<label for="password" class="text-gray">Password</label>
<input
type="password"
class="form-control form-field"
placeholder="Password"
/>Forgot
</div>
You can't. But you can make it appear that way with some good CSS and HTML:
.wrapper {
width: 200px;
position: absolute;
}
input {
width: 200px;
position: relative;
}
.icon {
position: absolute;
top: 0;
right: 20px;
width: 20px;
height: 20px;
display: block;
}
<div class="wrapper">
<input placeholder="Forgot on an input! -->" />
<div class="icon">Forgot</div><!-The blue block to the right-->
</div>
<div contenteditable="true">
This is editable
Link
</div>
To be able to do that the best way is a contenteditable div. As it is editable and a div you can use the html markup here.
I cannot figure out why my container (main-container) background is not stretching with the content inside. It looks like the container background is stuck on initial view height. When I scroll pass the initial view height, the rest of it is white.
Here is the css
.main-container {
margin: 0;
padding: 0;
font-family: 'montserrat';
height: fit-content;
}
.main {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: greenyellow;
border-radius: 10px;
margin-bottom: 40px;
padding-bottom: 20px;
}
<div class="main-container">
<div class="main">
<h1>Signup</h1>
<form method="POST">
<div class="txt-field">
<input type="text" required>
<span></span>
<label>First Name</label>
</div>
<h1>Upload Image</h1>
<button class="btn btn-primary">Upload<i class="fa fa-upload fa-1x"></i></button>
<input type="submit" value="Signup">
</form>
</div>
</div>
This is what it looks like initially.
This is what it looks like when I scroll down
The reason is that you have position: absolute on your .main class - any elements positioned absolutely will be taken out of the regular document flow and will have no effect on the layout of their parent(s).
It looks like you are using absolute position to try and center the .main element. Have you considered using a flexbox on .main-container instead? Using a flexbox with justify-content: center and align-items: center is an easy way to center an element inside its parent while keeping the regular document flow.
I'd like to add an icon right before the placeholder in a textarea but don't know how to do it.
Here is my code:
<div class="center-part">
<div class="user-input">
<textarea class="share" name="share" type="text"
placeholder="">
</textarea>
</div>
</div>
Thank you.
It is not possible to combine an icon and text in a placeholder. Because you are only able to use 1 font in it. If you could use different fonts inside the placeholder then this would be possible by using fontAwesome.
You can add a span (positioned inside the textarea) and shift the placeholder to the right of the icon by doing this:
HTML (added span in your code):
<div class="center-part">
<div class="user-input">
<textarea class="share" name="share" type="text" placeholder=" Icon before this"></textarea>
<span class="icon"></span>
</div>
</div>
CSS:
.center-part {
position: relative;
min-height: 50px;
min-width: 200px;
}
.share {
min-height: 50px;
min-width: 200px;
}
.icon {
position: absolute;
background: red;
width: 15px;
height: 15px;
left: 10px;
top: 5px;
}
You can see a demo at Codepen
I am new to CSS. Created a form with 4 input text boxes. Here is the code:
body {
background: #484848;
color: white;
margin:0px;
}
.pagetop{
width:1280px
}
header{
background: #D9853B;
padding:15px 40px;
margin:20px;
}
a{
color:white;
}
div{
padding:2px;
}
.pagetop nav h1,ul,li{
display:inline;
}
nav ul,li{
padding: 20px;
}
.signinform{
margin:0 auto;
margin-top:20px;
max-width: 600px;
}
.inputleft{
width: 30%;
float: left;
text-align: right;
}
.inputright{
width: 65%;
margin-left: 10px;
float:left;
}
.submitbutton{
width: 60%;
align-self: center;
}
<html>
<head>
<link rel="stylesheet" href="src/static/base.css">
</head>
<form method="post" class="signinform">
<div class="inputleft">
UserName:
</div>
<div class="inputright">
<input type="text" name="username" value={{username}}>
</div>
<div class="inputleft">
Password:
</div>
<div class="inputright">
<input type="password" name="pwd">
</div>
<div class="inputleft">
Verify Password:
</div>
<div class="inputright">
<input type="password" name="pwdverify">
</div>
<div class="inputleft">
Email(Optional):
</div>
<div class="inputright">
<input type="text" name="email" value={{email}}>
</div>
<div>
<input type="submit">
</div>
</form>
</html>
The last div element in the form covers all of the form when viewed in inspector in Firefox browser, my understanding says when I hover over div element then only div element should be highlighted not the other elements of form element.
This problem occurs when I apply the inputright style. Please explaing what's going on here.
First you have to close your <form> tag and the main thing to remember is to use clear:both; after every div where you have used float css.
This is must thing while using float as by float we are breaking the flow and pushing element to come inline so when element did not fit in space they got misaligned. You did not get that issue yet but to save your self by that issue, better use clear:both after every floated div so it will clear the blank space and you will save from that issue.
Also if you won't clear then it won't appear in inspect too. See my example i have used clear:both after every floated row so there won't be any issue with blank space or inspect element like you are facing.
I have the following fiddle: http://jsfiddle.net/stpra123/7cap7o7s/2/
The first input has the icond correctly aligned but when I try to make the input tag take up 100% of it's width I can't seem to figure out how to get the icon to align correctly. Any suggestions? I am using the cascade css framework and fontawesome.
<div class="site-body">
<div class="site-center">
<div class="cell">
<form>
<input id="first" value="I am correct!" />
<i class="fa fa-calendar first"></i>
</form>
<form>
<input id="second" value="I am a bit messed up!" />
<i class="fa fa-calendar second"></i>
</form>
</div>
</div>
</div>
form {
margin-top: 30px;
}
#first {
width: 90%;
vertical-align: middle;
}
.first {
position: relative;
left: -30px;
}
#second {
width: 100%;
vertical-align: middle;
}
.second {
position: relative;
left: -30px;
}
EDIT: I need the input to take up 100% of the width because I have content below it that also takes up 100% of the width and if I set the input to 90% then it looks funny compared to the content below it.
I would wrap the input tag in a 'div' tag:
HTML
<div class="inputCont">
<input id="second" value="I am a bit messed up!" />
<i class="fa fa-calendar second"></i>
</div>
CSS
.inputCont {
position: relative;
width: 100%;
}
.second {
position: absolute;
right: 4px;
top: 8px;
}
Here's an updated jsFiddle