I'm trying to use an material icon within an material input field. This Icon shall show a material tooltip.
The result is a nicely animated, but fully unstyled (like main text) and totally wrong positioned tooltip.
Where did I go wrong?
My html:
<section>
<div class="row">
<mat-form-field>
<input matInput name="newPin" placeholder="Neue PIN" required type="password"
[(ngModel)]="newPin" [disabled]="!selectedToken">
<mat-icon matTooltip="{{getPinTooltip()}}" [matTooltipPosition]="'below'">
info
</mat-icon>
</mat-form-field>
<mat-form-field>
<input matInput name="controlPin" type="password" required
placeholder="Neue PIN wiederholen"
[(ngModel)]="controlPin" [disabled]="!selectedToken">
</mat-form-field>
</div>
</section>
And my less:
body {
font-family: Helvetica, FreeSans, sans-serif;
background-image: url('./assets/images/background.jpg');
}
section {
margin-top: 2em;
}
.row {
margin-bottom: 1rem;
}
mat-form-field {
color: #inputfield-text-color;
width: 95%;
margin-bottom: .5em;
.mat-input-element {
background-color: #inputfield-background-color;
border-radius: .3em;
padding: 1em 0.6em 0.2em 0.6em;
line-height: 1.7em;
&:disabled {
background-color: #inputfield-disabled-color;
color: dimgrey;
}
}
.mat-form-field-label-wrapper {
left: 0.6em;
top: 0.3em;
font-size: .8em;
}
}
// here I tried to fix it, but it had no effect:
.input-tooltip-icon {
position: absolute;
z-index: 1;
top: .3em;
right: -.50em;
cursor: context-menu;
color: #button-color;
}
This is how it looks like:
Related
The spent text with the teal background is meant to be a tag, and I want the tag to appear above the todo bar...kind of like this:
Like a small rectangle on top of a big one. So the tag would be on the top left corner of the todo bar. How would I achieve this? I've tried doing margin to the tag, but that did not work out at all.
CSS for the tag (style.css)
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
React JS code for the tag part (Todo.js)
<li className={`todo-item${todo.completed ? "completed" : ""}`}>
{isSpent && <p className="tag">Spent</p>}
{isReceived && <p className="tag">Received</p>} ${text}
</li>
In case anyone needs the whole of the todo.css file: https://pastecode.io/s/s5XZ9e3DRW
If you need anymore information, or if my question was poorly phrased, please tell me. Any help is very much appreciated. Thank you!
I think if yow will separate the tag and the navbar to two different div tags and put them on main div something like:
<div id="wrapper">
<div id="top-left">top left div</div>
<div id="down">down side div</div>
</div>
and the css will be something like (using grid on the main div):
#wrapper {
display: grid;
}
#top-left {
background: green;
width: 250px;
float:left;
margin-right: 20px;
}
#down {
background: blue;
float:left;
width: 500px;
}
the result is:
I would go with something like this, where input:focus could be a class set on on .container, for example, if the input has any values.
I couldn't understand why you used li and p in your original code, because you need to override so much stuff to make it look nice.
Using "rem" over a fixed pixel value is also preferred if you want to create a responsive site, where you just override the font-size in the body to make everything scale.
.container {
position: relative;
display: flex;
}
body,
input {
padding: 1rem;
}
.container.selected > .todo-item,
input:focus ~ .todo-item {
transform: translateY(-1rem);
}
.todo-item {
position: absolute;
left: 1rem;
transform: translateY(1rem);
transition: transform 400ms;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
<div class="container">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
<div style="padding-top: 1rem"><-- select this input</div>
</div>
<div class="selected container" style="padding-top: 2rem">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
</div>
body {
background-color: #48AEE0;
}
.container {
height: 200px;
width: 500px;
display: flex;
flex-direction: column;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
width: 80px;
text-align: center;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.other {
margin: 0;
display: inline-flex;
flex-direction: column;
}
input {
height: 30px;
width: 200px;
border: white;
margin: 0;
}
<div class="container">
<div class="tag">spent</div>
<div class="others">
<input type="text">
</div>
</div>
I was just creating a web app using ReactJS but the problem is, the background image is not getting rendered properly.
Given below is the code snippet.
class WeatherComponent extends Component{
constructor(props){
super(props);
this.state={
key: 'XXXXXXXXX',
place: 'New York',
temperature: '17',
description: 'Light Rain'
}
this.handleSubmit=this.handleSubmit.bind(this);
this.update=this.update.bind(this);
}
update(values){
this.setState({ temperature: values.current.temperature })
this.setState({ description: values.current.weather_descriptions[0] })
}
handleSubmit(value){
fetch('http://api.weatherstack.com/current?access_key=' + this.state.key +'&query='+ value.place)
.then(response=>response.json())
.then(values=>this.update(values))
this.setState({ place: value.place })
}
render(){
return(
<div className='background-style'>
<div className='box'>
<div className='search-box'>
<input type="text" placeholder="search"/>
<button type='submit' className='button text-small'>Search</button>
</div>
</div>
</div>
)}
}
The CSS file is:
.text{
font-family: 'PT Sans Narrow';
font-size: 50px;
font-weight: lighter;
color: crimson;
}
.text-small{
font-family: 'PT Sans Narrow';
font-size: 20px;
font-weight: lighter;
color: white;
}
.box{
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
width: 450px;
height: 700px;
background-image: url("./assets/images/wall.jpg");
}
.search-box{
position: absolute;
}
.button {
background-color: rebeccapurple;
border: none;
outline: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 10px;
}
.background-style{
background-image: url("./assets/images/sunny.jpg");
background-size: cover;
background-position: bottom;
}
If I change the .box.position attribute to relative in the CSS file, the background image is rendered but then the search box is not rendered. Making the attribute absolute completely removes the background image from rendering, I don't know why this happens, some help to solve this issue is much appreciated.
This may seem like a simple question and may have a simple solution but I was wondering how I can get two text elements (from a button) start at the space spot on the x-axis (they are two different divs). I am referring to the button's text in the image below.
How can I get both the text "Dashboard" and "A new button" to start at the same position on the x axis?
* {
margin: 0;
padding: 0;
}
body {
background-color: #ced4da;
font-family: sans-serif;
}
.wrapper {
height: 100vh;
}
input[type="button"] {
border: none;
background-color: Transparent;
outline: none;
height: 20px;
width: 92%;
font-size: 13px;
font-weight: regular;
color: white;
}
.side-bar {
display: flex;
flex-direction: column;
width: 17%;
height: 100%;
background-color: #272C32;
}
.sub-title {
margin-top: 10%;
margin-left: 7.5%;
}
.sub-title h3 {
color: #B9B9B9;
font-size: 13px;
font-weight: lighter;
}
.splitter {
display: flex;
align-self: center;
width: 85%;
height: 0.5px;
background-color: grey;
margin-top: 12px;
margin-bottom: 4%;
}
.button {
position: relative;
margin-left: 7.5%;
margin-bottom: 3%;
}
.button form i {
color: white;
font-size: 14px;
transition: 0.3s;
position: absolute;
left: 0px;
top: 0px;
padding: 5px 0px;
}
.button input:hover+i {
color: dodgerblue;
}
<div class="wrapper">
<div class="side-bar">
<div class="sub-title">
<h3>ADMIN TOOLS<h3>
</div>
<div class="splitter"></div>
<div class="button">
<form>
<input type="button" value="Dashboard" onclick="window.location.href='http://www.google.com'"/>
<i class="fas fa-tachometer-alt fa-lg" aria-hidden="true"></i>
</form>
</div>
<div class="button">
<form>
<input type="button" value="A new button" onclick="window.location.href='http://www.google.com'"/>
<i class="fas fa-hand-paper fa-lg" aria-hidden="true"></i>
</form>
</div>
</div>
<div class="nav-bar"></div>
</div>
And if you have time, how does my CSS code look? I am still learning and would like some feedback too if you don't mind :) Thanks!
All you have to do is put a <div> element around your <form> element s, then set its position to wherever you want it, and its text-align: left;. BTW your CSS looks excellent, just keep in mind that some things can be simplified, e.g.
{margin: 0; padding: 0;}
This is very good, but * is the same as body, even though it's documented differently. * applies to all the content, but content is only displayed if it's in the <body> element.
Very good looking however, keep it up!
P.S. I'd vote you up if I could, but I'm out of votes - I'll do it tomorrow
I am trying to use the Font Awesome Map Marker in a Google Autocomplete Input. My goal is to have the Map Marker to the left of the placeholder text, be able to add a color to just the map marker, and to have it always present even when the user is typing. So far I have tried:
<span class="google-address-bar"><input #pacinput id="pac-input" class="form-control" type="text" placeholder=" Enter Your Street Address">
</span>
with :
#pac-input {
font-family: Fira-Sans, FontAwesome, Serif;
background-color: #fff;
width: 400px;
height: 45px;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
but with this solution I am unable to add color to just the Map Marker and since it is placeholder, it disappears once the input is dirty. Has anyone accomplished this?
Use a <label> or <i> for the Font Awseome part and then position then icon over the input. Then all that is required is adjusting the padding.
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.google-address-bar {
position: relative;
}
.google-address-bar i.fa {
color: red;
position: absolute;
height: 45px;
line-height: 45px;
padding-left: .5em;
}
#pac-input {
font-family: Fira-Sans, Serif;
background-color: #fff;
width: 400px;
height: 45px;
font-size: 15px;
font-weight: 300;
padding-left: 1.5em;
text-overflow: ellipsis;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="google-address-bar"><i class="fa fa-map-marker"></i>
<input #pacinput id="pac-input" class="form-control" type="text" placeholder=" Enter Your Street Address">
</span>
I am trying to make a custom placeholder for my "Search" input. It should look like a search icon (using Bootstrap glyphicon glyphicon-search classes for that) and then the word "Search", inside the input element, just as a placeholder looks like, and centered.
I am trying to position the div containing these to elements inside the input but I can't get it right.
Here's the code in jsfiddle.
HTML:
<div class="search-wrapper">
<form class="post_search" id="post_search" action="/posts/explore" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input autocomplete="off" class="search-input" type="search" name="q[caption_or_user_user_name_cont]" id="q_caption_or_user_user_name_cont">
<div class="placeholder">
<div>
<span class="glyphicon glyphicon-search"></span>
<span>Search</span>
</div>
</div>
</form>
</div>
CSS:
.search-wrapper {
max-width: 340px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
display: inline;
}
.search-wrapper .search-input {
border: 1px solid #ddd;
border-radius: 15px;
background-color: #eee;
width: 220px;
height: 31px;
padding: 10px 15px;
transition: 0.25s all;
}
.search-wrapper .search-input:focus {
outline: 0 none;
background-color: #fff;
transition: 0.25s all;
}
.search-wrapper .placeholder {
display: inline;
position: relative;
top: 30%;
width: 40px;
margin: 0 auto;
text-align: center;
font-size: 10px;
}
Then when focusing on the input the placeholder should be gone, I guess this shouldn't be difficult with some js.
But back to the issue, what am I doing wrong? How can I display the placeholder as intented?
Why not simplify this enormously? You already have the placeholder built into HTML! Here's what you can do:
input[type="search"]::-webkit-input-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
}
input[type="search"]:-moz-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
input[type="search"]::-moz-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
}
input[type="search"]:-ms-input-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
}
<input type='search' placeholder='search here' />
Now don't be worried, the icon isn't displaying here because I haven't included font-awesome (or whatever the Glyphicons Halflings font is provided by), but this makes it tremendously simply to create a nice placeholder. It even works like one! It also reduces your code greatly, although browser support is a little less stellar (it really depends how far back you want to go).
Font Awesome uses the unicode glyphs and a font with all those icons included, so as long as you use the right font and copy in the correct character into your content property, this will work.
this was tested in Safari and Chrome
My solution:
https://jsfiddle.net/83x8tfwp/6/
HTML:
<div class="search-wrapper">
<form class="post_search" id="post_search" action="/posts/explore" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input autocomplete="off" class="search-input" type="search" name="q[caption_or_user_user_name_cont]" id="q_caption_or_user_user_name_cont">
<div class="placeholder">
<div>
<span class="glyphicon glyphicon-search"></span>
<span>Search</span>
</div>
</div>
</form>
</div>
CSS:
.search-wrapper {
max-width: 280px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
position: relative;
color: #aaa;
}
.search-wrapper .search-input {
border: 1px solid #ddd;
border-radius: 15px;
background-color: #eee;
width: 220px;
height: 31px;
padding: 3px 15px;
transition: 0.25s all;
}
.search-wrapper .search-input:focus {
outline: 0 none;
background-color: #fff;
transition: 0.25s all;
}
.search-wrapper .search-input:focus + .placeholder {
display: none;
}
.search-wrapper .placeholder {
position: absolute;
top: 8px;
left: 38%;
margin: 0 auto;
text-align: center;
font-size: 13px;
}
JavaScript:
$('.placeholder').on('click', function() {
$('.search-input').focus();
});
if ($('.search-input').val()) {
$('.placeholder').hide();
}
$('.search-input').on('blur', function() {
if (!$('.search-input').val()) {
$('.placeholder').show();
}
});
$('.search-input').on('focus', function() {
if (!$('.search-input').val()) {
$('.placeholder').hide();
}
});
$('.search-input').on('input', function() {
if ($('.search-input').val()) {
$('.placeholder').hide();
}
});