I have an form in html where I want to add the tooltip when the user hover on some input field. The tooltip data is however fetched from json and is dynamic. How do I do this?
I tried the following:
<div data-balloon="{{ obj.info }}" data-balloon-pos="up">
<input class="form-control" type="text" [id]="obj.key">
</div>
But it throws the template parse error:
Can't bind to 'balloon' since it isn't a known property of 'div'.
I also tried:
<div [data-balloon]="obj.info" data-balloon-pos="up">
<input class="form-control" type="text" [id]="obj.key">
</div>
How shall I proceed?
You could simply use a pseudo-element with only CSS, to display any of your attribute:
div[data-balloon] {
float:left;
}
div[data-balloon]:hover::after {
content: attr(data-balloon);
border: 1px solid black;
border-radius: 8px;
background: #eee;
padding: 4px;
}
<div data-balloon="My data here" data-balloon-pos="up">
<input class="form-control" type="text" [id]="obj.key">
</div>
If there is nothing more in your div element, it should work fine to use the :hover on the div.
If there is something more… You may want to move your data-balloon to your input element, as “parent” selection is not possible in CSS.
Hope it helps.
Related
I have the following inside my asp.net core MVC view:-
<td>
$<input asp-for="g0" type="text" class="form-control tablecellcustom" disabled>
</td>
where I am trying to display a $ sign beside an <input> on the same line, but currently, my above code will show the $ on a separate line as follow:-
Any advice on how I can show them on the same line?
My guess is form-control has the style display:block; and width:100%
Remove the above styles or override it using custom css below
.form-control.tablecellcustom {
display: inline;
width: auto;
}
I think your code internally uses Bootsrap. This is a guess, might be wrong. If its internally using Bootstrap you can try using input group also.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input asp-for="g0" type="text" value="100000" class="form-control tablecellcustom" disabled>
</div>
I suspect your input is display block so you need to have a wrapper for your input and use flex box to achive this.
.form-control-wrapper {
display: flex;
align-items: center;
}
.form-control {
margin-left: 5px;
}
<div class='form-control-wrapper'>
$ <input class='form-control' />
</div>
The code you posted works as desired. Seems like you didn't post the CSS which is applied.
Anyway, make sure the input element has display: inline or inline-block to appear in one line with the "$" symbol before it.
You can put value in the input value.
You can set a variable in value, also concatenate the string with $ before putting it
You can also set a label for that input then style it in CSS to be in the same line
<td>
<input value={} asp-for="g0" type="text" class="form-control tablecellcustom" disabled>
</td>
I have two forms on my site but am struggling to style them differently.
I want all text areas/inputs on the website to have the same style except for one form.
So all forms on the site use this css...
input, textarea {
background-color:#eae7e7 !important;
}
How do I go about changing the background color on another form as per below?
<div class="form-group">
<input type="email" class="form-control input-sm" id="name" placeholder="Your Name">
</div>
.form-control input, .form-control textarea doesn't seem to work?
An easy way is to add an id to the form in question:
<div class="form-control" id="my-form">
Then, style the inputs in css like:
#my-form input {your-style:value;}
.form-control input, .form-control textarea
Seems that you have this kind of code :
<div class="form-control">
<input>
</div>
Your CSS selector should be like this :
input.form-control, textarea.form-control don't forget the `!important` when you apply the css property
Try:
input.form-control {
background-color: #000 !important;
}
You'll have to add !important to your css also in order to overwrite the styles applied to input, textarea. However, if possible, you should remove the !important altogether unless 100% necessary.
There are a million issues with sprites and IE8 i've read about online, however, they all seem to deal with the issue of the sprites not showing up at all. Mine is showing up, its just showing the wrong piece of the sprite. It works fine in all other browsers.
Heres the CSS
div.searchForm input[type=text] {
border: 0;
padding: 0 10px;
margin: 0;
background: url(../img/sprite.png) 0 -125px no-repeat;
background-size: 115% 235px;
width: 600px;
height: 30px;
float: left;
font-size: 12px;
color: #fff;
-webkit-appearance: none;
-webkit-border-radius: 0;
}
and the html:
<section id="secondary6">
<h1 class="hidden">Search</h1>
<div class="clearfix">
<div class="grid_4">
<nav class="grid_2 secondary">
<h1 class="hidden">Search Secondary Navigation</h1>
</nav>
<div class="searchForm">
<input type="text" placeholder="search">
<input type="button">
<input type="submit" class="hidden" >
</div>
</div>
</div>
</section>
basically you click the search button, and it displays a search bar that should be hidden otherwise. Like I said it works in other browsers.
IE8 doesn't support background-size (see https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility), so that's what you'll have to work around. Depending on your needs, you might try IE7.js (which works with other versions of IE) or a conditional comment to adjust the position of the image for IE8. Or, just make sure your raw image doesn't need to be re-sized.
What happens when You assign class or ID to particular text input field?
for example..
div.searchForm input.classInput {
/* css code here */
}
Also ...
..where is element form tag wrapper, form name, form action ?
The input fields should not reside in a document on a way You presented.. without form tag..
Which software actually generated this code for You?
Is it dreamweaver?
Basic and proper example of valid HTML input form ..
<form id="formID" name="formName" method="post" action="#">
<input type="text" name="textUno" value="" />
<input type="text" name="textDue" value="" />
<button type="submit" name="do_processing"> Go! </button>
</form>
Can we add space between the browse button and textbox for input type file ?Is that possible? Aslo can i add border color for the same textbox ?
thanks,
michaeld
Increasing spacing is not possible. Generally speaking, styling an input type="file" is extremely difficult. If you check cross-browser, you can see that different browsers render it differently. The only way to style it is to fake another element as input type="file"
Example: http://www.quirksmode.org/dom/inputfile.html
You should use css to do this:
Your html:
<input type="text" class="yourclass" name="yourname" />
<input type="submit" />
your css:
<style> input.yourclass { border:1px solid red; margin-right: 10px;} </style>
Hope this puts you in the right direction
It is working for me in Chrome.
input.file {
text-indent: initial;
}
Hi all I am currently trying to develop an HTML5 and CSS3 website. What I want to be able to do is when a user hovers over an input area of the website I want to be able to display a little pop up message next to the mouse position to display information to the user.
Is this possible, if not with HTML5 and CSS3 but using something else.
Here is a very simplistic solution I use as a base with my forms.
<style>
.help {
background-color: #FFFF73;
border-radius: 10px;
display: none;
opacity: 0.9;
padding: 10px;
z-index: 100;
}
.help_link:hover + span {
display: inline;
}
</style>
<form>
<label>Input: <input type="text" name="text" /></label> Help <span class="help">Some help here on this input field.</span><br />
<label>Input: <input type="text" name="text2" /></label> Help <span class="help">Some help here on this input field.</span><br />
</form>
The usual disclaimers apply: this is a base, will not work in IE without an external library to add advanced selectors, border-radius not supported in Firefox 3.5, etc.
<input type="text" title="info for user here"/>
You can hover over an input text field and the title will allow a tool-tip type message pop up.