Develop Reference

How to hide this button using JavaScript?

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

Why does .css('fontSize') produce different results in Edge?

Consider this code (also in a fiddle):
document.getElementById("span").innerHTML += $('#input').css('fontSize');
span input {
font-size: inherit;
}
input {
font-size: 15px;
}
<span id="span" style="font-size: 30px;">
<input id="input"/>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
In Chrome and Firefox, the .css('fontSize') will return 30px, in Edge and IE it's 15px. Why does it do that? The DOM Explorer in Edge even shows the 15px in strikethrough, and therefore should take the inherited 30px as the fontSize:
And the input is rendered with a 30px font, so IE/Edge is picking it up for rendering purposes.

Update: The bug below is now fixed; FremyCompany says he/she is a program manager from the Edge team and the fix will reach customers in early 2017.
It looks very much like an IE and Edge bug. Not having found it, I reported it.
Here's an update to the snippet that sees what IE/Edge is telling jQuery via getComputedStyle or currentStyle:
var input = $("#input");
console.log("jQuery: " + input.css('fontSize'));
if (window.getComputedStyle) {
console.log("getComputedStyle: " + getComputedStyle(input[0]).fontSize);
}
if (input[0].currentStyle) {
console.log("currentStyle: " + input[0].currentStyle.fontSize);
}
span input {
font-size: inherit;
}
input {
font-size: 15px;
}
<span id="span" style="font-size: 30px;">
<input id="input"/>
<span id="size"></span>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
For me, IE11 returns 15px from both getComputedStyle and the Microsoft-specific currentStyle property (it's reassuring that they do at least say the same thing):
So it's not a jQuery bug, it's a Microsoft bug when reporting the size via JavaScript (looks like when inherit is the governing rule), even though it's rendering it correctly.
I tried to find a way to make this a grey area, but couldn't think of anything. For instance, according to the spec, having an input inside a span is entirely valid.

Before I get to the real answer I'd like to dig a little into details.
What is this piece of code doing?
.css();
In the jQuery Docs they tell us:
Get the value of a computed style property for the first element in
the set of matched elements or set one or more CSS properties for
every matched element.
Furthermore:
The .css() method is a convenient way to get a computed style property
from the first matched element, especially in light of the different
ways browsers access most of those properties (...)
So what does computed mean?
MDN Docs:
the computed value of a CSS property is computed from the specified
value by:
Handling the special values inherit and initial, and
Doing the computation needed to reach the value described in the "Computed value" line in the property's summary
Ok, now that part is clear too. Let's get to the real answer:
According to Specifics on CSS Specificity there are css-rules with more 'weight' than others have on an HTML element.
Here is the actual order:
Style Attribute
ID
Class, Pseudo Class Attributes
Element
According to that rules your input should've taken the inherited 30px from the Style attribute.
So what is happening in IE11/Edge?
IE11 and Edge are both computing the CSS Rules wrong. If you change your CSS into only this:
span input {
font-size: inherit;
}
It is starting to work. With the information gathered I am assuming that the JavaScript - Engine of both is computing the real CSS value instead of following the CSS rules order.
I've tried to either change the ID and putting a class on the input but still no luck.
I can remember that IE11 and Edge had some problems with inherited CSS and pseudo classes, maybe it is related to that?
Regards,
Megajin

Select2 4.0.0 - change inputbox height

whenever I use select2, the empty box is just one line high.
When input is added, the box expands accordingly, but always just the exact amount needed.
How can I change it so my input box is at least 100px high, even if empty? In some cases, I expect the box to be 100px or even higher when filled, so it looks really dumb in my layout, if the box is just 16px high in the first place.
The HTML element to which I'm applying select2() is a Select element with "multiple=multiple" (I need multiple inputs eventually.)
I googled a lot, and also searched in this forum, but nothing worked so far.
I tried including something like this in my custom css file:
.select2-container .select2-choice {
min-height:100px !important;
}
But it didnt't change anything. Maybe those tipps are for older versions of select2? I'm using 4.0.0.
How can I enlarge the box?
Solution:
I added this to my css. It's all about getting the css selectors right (which indeed seem to have changed, recently). I extracted their names by inspecting my HTML output.
.select2-container .select2-selection--multiple{
min-height:100px;
padding-bottom: 50px;
}

.select2-selection.select2-selection--multiple {
min-height: 100px;
}
Tested on the examples page.

I would just pad the select2-choices container a bit so you can still have a dynamic height but be sure that the element can never make contact with the bottom of the container. You can also put the min-height here I think.
.select2-container-multi .select2-choices {
padding-bottom: 4px;
min-height: 26px;
}

How to align jQuery UI selectmenu with buttons?

I've been struggling with this for a while (I'm really not experienced with jQuery UI).
I'm trying to implement a jQuery UI that has a selectmenu next to some regular buttons. For some reason I can't understand, the selectmenu is mis-aligned; it's way higher up on the page than the buttons.
Here's what it looks like:
I'm not sure if this is a bug or not, it sure looks very wrong to me. I've been struggling for quite a while now but haven't been able to figure it out.
The markup is really very basic so I don't think it's very helpful to include it here., but it's all here: http://jsbin.com/afixij/10/edit?html,css,js,output. Widen the Output to see all three elements (the selectmenu, and the buttons Foo and Bar) on the same line.

You could just apply vertical-align:middle to the dropdown which is made up of spans to get the buttons aligned properly with the dropdown.
#speed-button{
vertical-align : middle;
}
Bin
It appears there is no option to provide a custom classname for select menu widget (It is bad if that is the case) as applying rule to a class would be much better. You could as well do:-
Apply a classname for the select
and in css provide a generic rule for any .menu-buttons
.menu-button + .ui-selectmenu-button{
vertical-align : middle;
}
Bin2

It might actually be easier to make the actual buttons (not menu) up by using
<button style="vertical-align: top"></button>
It can be inlined and creation of a custom class isn't required.

The solution I applied was to place the content I wished to be vertically aligned in a display: flex entry. For example:
<div style="display: flex; align-items: center;">
... other elements here
</div>
for more details on this display type, see this excellent discussion:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

To expand on the marked answer, there is a way to obtain the jquery object the selectmenu creates. Make sure you initialize the selectmenu first or it won't work.
$("#speed").selectmenu();
$("#speed").selectmenu("widget").addClass("fixAnnoyingSelectAlignmentClass");
CSS:
.fixAnnoyingSelectAlignmentClass
{
vertical-align: middle;
}

Styling HTML FORM elements with padding, with width 100%

I'm styling a form by using a table with fixed-width columns and I want the input elements inside the <td> to fill the container. I know the CSS box model and I know the elements would bleed through with width: 100%, but the problem is with its consistency.
<input> elements bleed through as expected but <select> elements don’t. This results in making my fields not line up properly. I've tried all properties like overflow, display, whitespace... it doesn’t make any difference. What’s with the <select> element? I can see in Firebug that they have the same box model properties with the input element, but they don’t render the same.
I’m using HTML 5 doctype and this happens both in Firefox and Chrome.
Right now, I’m fixing this using a JS function which selects all elements with class stretch and computes and sets the static width to make it fit inside the container. This perfectly lines up the elements of the form. (I had to exclude <select> elements because their widths were already okay... weird quirk.)
Is there a pure CSS solution to this? I wouldn’t want to run this function everytime a part of the page is updated, like on AJAX calls...

You could use box-sizing: border-box; on textfields and textarea's.
It solves te difference with the selectbox.

The best way is to fake the borders of the elements with a div.
<div class="formholder>
<textarea></textarea>
</div>
With this CSS:
.formholder {padding:10px;background:white;border:1px solid #ccc}
.formholder textarea {width:100%;padding:0;margin:0;background:white;border:0}
Of course, you can expand that for other fields. Some browsers might give you issues. Chrome and webkit allow you to resize textareas but if you add resize: none; to your CSS, it should disable it but YMMV.

It may help you to know the following results from various usability studies.
1) For most forms, people prefer to see the label just above the form element:
2) People find it useful if the form elements are sized appropriately to help suggest how much information is expected.
<ul>
<li><label for="firstname">First Name</label><br>
<input type="text" id="firstname" name="firstname" size="15"></li>
<li><label for="age">Age</label><br>
<input type="text" id="age" name="age" size="3"></li>
<!-- ... more list items -->
</ul>
Note: the list in this example would be styled so that it doesn't appear as a bullet-point list. Using lists in this way helps with accessibility as screen readers will tell the user how many items are contained in the list.
I thought this might be useful as it suggests that your efforts may be a bit wasted trying to layout the form in a table and stretch all inputs to the same length.
http://dev.w3.org/html5/markup/input.html#input

Not the most helpful answer, but CSS styling of form elements is pretty unreliable between browsers. A JavaScript solution like yours is the best bet.
Two reasons for the unreliability:
Some features of form elements can’t be described by CSS. The <select> element is a good example: there aren’t any CSS properties that can describe the different ways a <select> element looks on different operating systems.
Trying to work out which CSS properties should affect form elements, and how, is a rat’s nest for browser makers, so they’ve mostly left it alone. Safari is a notable exception; see e.g. http://webkit.org/blog/17/the-new-form-controls-checkbox-2/
You can argue that form elements should look the same between sites regardless of the site owners’ intentions, so that users know what they’re clicking on.
See http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/ for a deeper examination.

Say your html looks somewhat like this:
<form><table><tr>
<td><input type="text" /></td>
<td><select><option /><option /></select></td>
</tr></table></form>
How about just using the input and select for setting the width?
td { width: auto; }
input[type=text] { width: 100px; }
select { width: 100px; }
Or did I get your problem wrong?

The following CSS works for Moz Firefox, for html input elements (submit, button, text), textarea elements, and even select elements. The select elements are nearly equal length in the browser I'm trying.
table {width:100%;}
form input { width: 100%; }
form textarea { width: 100%; overflow-y: scroll; resize: vertical; }
form select { width: 100%; }