This is probably an easy fix but I can't figure it out. I am trying to style the textbox to be the same width as the listbox.
You just forgot to write ID properly,
CSS
.teststyles input#PairTextbox {
width: 80%; ^---Typo here. IDs are case-sensitive.
}
Look updated jsFiddle
You have a typo it's
.teststyles input#PairTextbox {
width: 80%
}
because PairTextbox !== PairTextBox
LIVE DEMO
you get your id name wrong in your css part.And instead of input ,you should add input[type='text'] as selector,otherwise it will effect all the input elements under the same class name.it will be
.teststyles input[type='text'] #PairTextbox {
width:80%;
}
Or you can add size attribute to your input text field.That will do .
<input id="PairTextbox" type="text" size='38'/>
for edit section:
just cut and paste the desired element and place it at the top of listItem box in your html.you should probably be able to do it by yourself .jsFiddle
Related
We are using a .Net web application from a vendor. It has a feature for user to enter JavaScript and CSS for performing some simple UI modification. They are executed when loading the application.
We want to hide a button on the web UI temporary.
In F12 developer tools, we found the id for that button.
We used this CSS script to hide the button and it works.
#ext-gen391 {
display: none !important;}
However, the id is not fixed. It changes with different groups of login users. So that CSS script is not good enough.
I am thinking of using JavaScript but not sure how to start. Can someone help?
Edit:
Thanks everyone for the input. Sorry that I did not mention that other buttons have the id starts with ext-gen too.
It seems to me that the only "unique identity" I can refer to is the button's position.
How to hide that 3rd td element? Take note that the id ext-gen391 is not fixed. It will be different for different groups of login users.
First off that small snippet of CSS you have tries to select the button based on a class not an Id. Which is why it doesn't work.
You could use CSS
[id^=ext-gen] {
display: none !important;
}
or jQuery
$('[id^=ext-gen]').hide();
but, really, the best way if you have control over what gets rendered you should try and add a more unique id/class instead.
You could try using an id matcher like this in the css:
*[id^="ext-gen"] {
}
To select all the HTML elements that ahve an id that starts with ext-gen.
This should work:
td.x-toolbar-cell[id^=ext-gen]{
display: none !important;
}
if only the number changes, see attribute selectors for more info.
try you use css class name to do that.
You could solve it by putting your Open link inside the #show div
JSFiddle
HTML
<div id="show">
Open
<div id="content">
some text...
Close
</div>
</div>
CSS
#content {
display: none;
}
#show:target #content {
display: inline-block;
}
#show:target #open {
display: none;
}
This solution was used here.
Congratulations #Mathias
I have this highlighted span in which you can type text
jsfiddle
You can click on the white area and start typing. Now when you type and you reach the and I would like it to wrap.
The HTML is not very special:
<div>
Complete the story:<br>
Once upon a time there was <span></span>. And they all die :)
</div>
<input>
To make the typing possible I use a hidden (not hidden in the demo) input field. Anyway, now when you start typing and you reach the end of the line it should wrap as follows:
I've tried things like word-wrap:break-word; but that didn't work very well. Is something like this even possible ?
You can't wrap text in an input. You could use a textarea instead. You will have to adjust your CSS for the size of the span to grow as the text spans multiple lines, by changing the height to min-height:
min-height: 20px;
See this fiddle for working version: https://jsfiddle.net/3L4bazg6/7/
I've also removed some of the styling in your span rule to get the wrap effect you are looking for.
Here's another fiddle that hides the textarea completely: https://jsfiddle.net/3L4bazg6/10/
And, here's a fiddle that does away with the textarea and the JavaScript completely and just uses contenteditable:" https://jsfiddle.net/3L4bazg6/17/
Refering to your js fiddle
Change display: inline-flex; to display: inline;
Remove height: 20px;
Add line-height
here is your updated JSfiddle
https://jsfiddle.net/sewpjeta/9/
I have button that shows a password by using fadein and fadeout. However, when the password is an empty string, the div doesn't fade-in.
Html
<div>
<div>********</div>
<div class="password"></div>
<input type="button" class="showPasswordButton" value="Show Password">
</div>
Jquery
$(".showPasswordButton", false).on("click", function () {
var passwordDiv = $(".password");
passwordDiv.text("");
passwordDiv.fadeIn(500).delay(3000).fadeOut(500, function () {
passwordDiv.empty();
});
});
Here is a JSfiddle link to play around with.
If I replace the empty string in passwordDiv.text("") with any value except whitespace, the fade-in will work. I've gotten around the issue by using a Japanese full-width whitespace character. However, I'd like to get this working without an obvious hack. Is there something wrong I'm doing here or a way to get it so passwordDiv will fade-in when the div text is an empty string?
It's working
the matter of fact is that you can't see it. Since by <div> contain nothing, hence it does not take space in the HTML.
You can see your web console and you will find that opacity of the div get changed
JUST try adding the below height and width and you can see the change
.password {
height: 500px;
width: 500px;
background-color: #ff0000; // background of the div, so that you can see the change
}
Other way is not to empty the <div> , just have a blank correct inserted in to the div , so that the <div> take some
passwordDiv.fadeIn(500).delay(3000).fadeOut(500, function () {
passwordDiv.html(' '); // inserting a blank correct , so that actually the div take some space
});
your div is empty , so you can set border or something to see effect .
.password{
width:50px;
height:50px;
border:solid 2px red;
}
DEMO
Here is the jsfiddle i have create for you http://jsfiddle.net/Tushar490/LkxLzhmt/9/
you need to add dimensions(width,height) for the div having "password" class .As you want to see that fading effect for the empty string too , you need set the dimensions as well. What happen is when you give text to that div , the div takes width:auto and height:auto .But when you don't give any text to that div then width:auto and height:auto will show you nothing and that's purely logical .
just a CSS you want , and nothing else :-
.password{
display:none;
width:100px;
height:15px;
}
Hope my answer help you !!
You can also do this for showing empty string fade in-fade out effect :-
$(".showPasswordButton", false).on("click", function () {
var passwordDiv = $(".password");
passwordDiv.html("<br>");
passwordDiv.fadeIn(500).delay(3000).fadeOut(500, function () {
passwordDiv.empty();
});
});
I'm currently implementing jQuery UI's autocomplete in my clients webshop. The problem is: the element the autocomplete resides in, has a higher z-index then the z-index of the autocomplete. I tried setting the autocomplete z-index manually, but I've got the feeling that jQuery UI is overwriting this.
In fact my question is a duplicate of autocomplete suggestion list wrong z-index, how can i change?, but since there was no answer I thought about giving it another try.
Any help is welcome!
Martijn
Use z-index and !important
.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}
While searching I found this topic (http://forum.jquery.com/topic/alternating-style-on-autocomplete). Apparently the only way to change the style of the autocomplete box is by doing it through javascript:
open: function(){
$(this).autocomplete('widget').css('z-index', 100);
return false;
},
Change the z-index of the parent Div, the autocomplete menu will have the div's z-index+1
In the CSS of jQuery UI:
.ui-front { z-index: 9999; }
Try this, you can manipulate the z-index on runtime or initializing
$('#autocomplete').autocomplete({
open: function(){
setTimeout(function () {
$('.ui-autocomplete').css('z-index', 99999999999999);
}, 0);
}
});
If you are able to enforce a higher z-index upon the autocomplete text input then this is the solution to your problem.
jQuery UI Autocomplete options list calculates its z-index value by taking the z-index of the text input it's being attached to and adds 1 to that value.
So you can give a z-index of 999 to the text input the autocomplete will have a z-index value of 1000
Taken from http://bugs.jqueryui.com/ticket/5489
<input type="text" class="autocomplete" style="z-index:999;" name="foo">
open: function () {
$(this).autocomplete('widget').zIndex(10);
}
also have a look at where you are appending the item to.
i came across this problem when i appended the autocomplete to an inner div, but when i appended the autocomplete to the body tag, the problem went away.
If you are using jquery-ui dialogs be careful to initialize the dialogs BEFORE the autocomplete or the autocomplete will be shown under the dialog.
Look at this answer jquery UI autocomplete inside a modal ui dialog - suggestions not showing?
I was facing same issue, it has been resolved by adding bellow styles:
.ui-autocomplete {
position: absolute;
cursor: default;
z-index:30!important;
}
.modal-dialog {
pointer-events:auto !important;
}
Give it a try anyway in your css (before script loading), not in firebug:
.ui-selectmenu-menu {
z-index:100;
}
In my case this works and creates z-indexes like : 100x (for example 1002)
add the following
.ui-autocomplete
{
z-index:100 !important;
}
in jquery-custom-ui.css file (or the minified one if you are using it).
For those developers that still use this plugin. Try this:
.acResults
{
z-index:1;
}
For me was enough with z-index:1, set the value you need in your case.
I must be brain dead. I'm having a hell of a time right aligning numbers in a input field.
.number {
text-align: right;
}
<input name="price" type="text" class="number" />
has no effect.
I need to use an input field since I refer to the value in JavaScript and I'm using it both for input and display.
Thanks
It could be that you have a more specific selector that overrides the text-align property of .number
To make your selector more specific, specify the element type...
input.number {
text-align: right;
}
You may have to get even more specific than that, such as...
#formId input.number { }
Yeah - text-align: right should work.
Are you sure there isn't another style or something that's overriding it?
(If you don't have it already, I'd recommend the FireBug plugin for Firefox: right-click the element in question and select "Inspect Element" - that'll tell you every style that's actually being applied, and what's overridden what.)
If you still can't get that class to override styles coming in from elsewhere, you may also want to try
text-align: right !important;