In my asp.net MVC app, I'm using a HTML text input, while I apply a style to format currecy value and I want it to RIGHT align so that I also apply style.
But the cursor does not appear in text box? What is the possible reason and please provide the solution?
HTML
<input type="text" class="OnlyMoney" />
Script
$(document).ready(function () {
$("input[type=text].OnlyMoney").live('keydown', currenciesOnly)
.live('blur',
function() { $(this).formatCurrency(); });
});
CSS
.OnlyMoney { text-align: right; }
Note: If I change above style "text-align: left" then cursor is visible in text box.
I got the answer from here. this solved my issue.
Just style your input like this:
caret-color: #333333;
i faced a similar issue and adding padding solved my problem. Just give some padding right to your .OnlyMoney class and check
CSS:
.OnlyMoney { text-align: right; padding: 0 2px 0 0; }
Related
If you have the Last Pass extension installed in chrome it displays a ... on the right side of certain input fields.
I was wondering: Is there a way to hide this with css?
You can also hide the icon by adding this attribute to the input element:
data-lpignore="true"
I figured it out!
I placed this in my input field styles:
background-image:none !important;
background-attachment:none !important;
padding-right:0 !important;
border:1px solid #ABADB3 !important;
Which had an effect, but something was still visible. Placing this in my global styles got rid of it completely:
div[id^=__lpform_] {
display: none;
}
To suppress the icon for an input field like below:
<input type="tel" id="cc-number" autocomplete="off">
I used below css:
img[id^='__lpform_cc-number_icon'] {
display: none !important;
}
input {
background-image: none !important;
}
data-lpignore="true"
^^ no longer works I guess. I am not sure, as it didn't work in my case.
As of 2022 the LastPass icon is placed as a sibling to the input field, so I added this rule to my input container and it worked. 😎
div[data-lastpass-icon-root] {
display: none;
}
I've also faced the same issue, As I am using Telerik RadCombobox and RadTextBox, Last pass icon is displaying in all the server controls.
Tried using below css: jst paste it in the aspx page
div[data-lastpass-icon-root] {
display: none.
}
Its working fine.
RadCombobox having icon lastpass
Radcombobox removed icon using above css
Update NOV 2021
I have noticed that all LastPass widgets got class css-1obar3y.
div.css-1obar3y {
display: none!important;
}
Works perfectly for me
I am attempting to style a Kendo UI DropDownList control to be essentially invisible until you click on it; I have almost succeeded, but the code I've produced has some "twitching" side effects.
The goal is simple; I want to have some text, and then following it is the drop down list; The drop down list should look like whatever line of text it is in, and clicking that word will present the options.
This sample does that, but it has some problems.
The text isn't showing up lined up with its preceding text
Clicking the text makes the drop down appear, but it displaces the other text
You can see a working jsBin here
jsBin
But here is my actual .less code.
.transparent(){
background: transparent;
border: 0;
padding: 0;
margin: 0;
text-indent: 0;
}
.k-dropdown-wrap {
.transparent;
.k-input,
&[class^="k-state-"] {
.transparent;
}
}
[data-shadows="true"] {
text-shadow:
1px 1px 1px rgba(0,0,0,.5),
3px 3px 3px rgba(255,255,255,0.5);
}
HTML
<div class="small" data-shadows="true">
(small) Preceding Text
<em>
<input data-role="dropdownlist"
data-auto-bind="true"
data-value-primitive="true"
data-text-field="ProductName"
data-value-field="ProductID"
data-bind="value: selectedProduct,
source: products"
/>
</em>
</div>
<div class="h1" data-shadows="true">
(large) Preceding Text
<input data-role="dropdownlist"
data-auto-bind="true"
data-value-primitive="true"
data-text-field="ProductName"
data-value-field="ProductID"
data-bind="value: selectedProduct,
source: products"
/>
</div>
Are either of these things that can be fixed? They've been baffling me for a bit, now.
I have finally discovered an answer to this, as it took a bit of plumbing to come to what was eventually a pretty simple solution.
First, I had to set the KendoDropDownList containers to have display: inline; to make sure it rendered on the same block. This is done via the .k-dropdown-wrap class.
.k-dropdown-wrap {
.transparent;
display: inline;
.k-input,
&[class^="k-state-"] {
.transparent;
display: inline;
}
}
This is done to make sure that the actual drop down list itself remains the same way no matter what it's interactive state.
Next, I have to set the actual .k-dropdown class to have display: inline and set its vertical-align to baseline.
.k-dropdown {
display: inline;
vertical-align: baseline;
}
And then lastly, I wanted to make sure that none of this changed while the actual dropdown was selected, so I have to change the .k-dropdown .k-select class to have no display.
.k-dropdown .k-select {
display: none;
}
We can also get rid of the fact that the actual drop down itself is transparent (since we still want it to be skinnable) with the class .k-list-container
.k-list-container {
background: #fff;
}
You can see the fixed and working demo here;
jsBin
Major thanks to the Telerik Support Staff for helping me step by step through this one.
I want to use a standard set of buttons on a website regardless of what is written in them (i.e. submit, pay, go, spell correct) but for some reason I can not get the sprite image to show up. My codes is as follows:
HTML:
<div id="iconic">
Place Sprite button here <span><a class="button" href="#">Test</a></span>
</div>
CSS:
span.iconic a:link
span.iconic a:visited
{
display: block;
background-image:url('images/an_nav_btn.jpg');
width: 150px;
height: 45px;
}
span.iconic a:hover
{
background-position: 0 -50px;
}
span.iconica a:active
{
background-position: 0 -100px;
}
Any suggestions on how to get this to display with the text on top (in this case it will have the button with the word "test" on it.
Thanks in advance.
According to your posted css you are attempting to manipulate a link inside a span with the class of "iconic"... and that doesn't work with what you have in the html:
to get you on the right track, try
replacing all the span.iconic's
with #iconic span's
#iconic span a translates to "all <a>'s inside a <span> inside any element with the id of 'iconic' "
In CSS:
. is used for to prefix class names
# is used to prefix IDs.
Your element is a DIV, and you're specifying a SPAN in your CSS. You've got both of these mixed up.
The CSS declaration for <div id="iconic">
would be:
#iconic {
...
}
You may want to consider looking at Font Awesome, that handles a lot of this for you.
input.icon
{
border: 0;
cursor: pointer;
margin: 0;
padding: 0;
width: 16px;
height: 16px;
text-indent: -1000em;
}
input.edit {
background: transparent url('/edit.png') no-repeat center top;
}
On an element like:
<input type="submit" class="icon edit" onclick="...." />
It renders fine in firefox, without the text on the image also. In IE it shows the text of the value attribute.
Why is that?
Actually i'm not even setting the value attribute and it is defaulting to 'submit query'.
Also, I thought my CSS could be more specific by doing:
input.icon {
...
}
input.icon .edit {
...
}
But that didn't work for me not sure why, so I changed the 2nd definition too:
input.edit {
..
}
Why didn't input.icon .edit work?
Could I just as well put these styles on a div element? What's the difference?
You've got a few questions there. For the first one. I'm not seeing the issue in IE8:
http://jsfiddle.net/rfYrq/
I do not see the text in IE8.
Question 2: "Why didn't input.icon .edit work?"
The meaning of input.icon .edit is, any element with the class of edit within an input element with a class of icon. What you really wanted was any input with both the edit and icon classes. That would be like this:
input.icon.edit
Question 3: "Could I just as well put these styles on a div element?"
Yes. If you are overriding the style of the button with your own css and apparently overriding the functionality of the button with an onclick, you can just use a div or a span or some other element depending on your situation.
I have followed instructions verbatim using border:none and background:transparent, but a border still shows in the my text areas. I am using a background image to customize the look, but can not seem to remove the border.
website in question
http://www.officeyoganyc.com/
markup
<div class="fieldHolder">
<div class="attributeinput1"><input type=text name=email value="email" size="16">
<script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script></div>
</div>
css
.fieldHolder
{
width: 137x;
height: 24px;
background: url(http://www.officeyoganyc.com/themes/zen/zen/images/textarea.png) no-repeat;
margin-left: 209px;
margin-top: 162px;
}
.attributeinput1
{
border: none;
color: #000000;
background: none repeat scroll 0 0 transparent;
color: #000000;
height: 22px;
margin-left: 5px;
margin-top: 5px;
width: 170px;
}
This selector:
.attributeinput1 {
Only styles the <div>. You want the <input /> inside the <div>:
.attributeinput1 input {
By the way, the input tag is self-closing:
<input ... />
Your site might look funky in IE if you omit the />, as it might be treated as the beginning of a block element.
Also, one more thing (just a nuance in HTML), the language= attribute in the <script> tag is depreciated (i.e. unsupported and old). You can safely omit:
language="Javascript"
in your <script> tags.
If you use Google Chrome or Firefox, there is a really useful tool you can use. In Firefox, it's called Firebug. In Google Chrome, it's called something like Inspector.
They both allow you to "inspect" the webpage's layout and see what CSS properties affect what elements.
Here's what I mean. Look at the right-hand-side:
I used this to confirm that your CSS wasn't being applied properly. To activate it, right click on any part of a webpage and click "Inspect".
Hope this helps!
You have too many attributes for your background and border definitions.
This should work.
.attributeinput1 input {
border:0;
background:none;
}
If not then try
.attributeinput1 input {
border:0!important;
background:none!important;
}