Develop Reference

How to Change Form Field Width in Sharepoint?

I am new to coding and really new to javascript and have been left with the task of trying to maintain a SharePoint form that was created by someone else. I am not too familiar with SharePoint Designer or Javascript.
All I need to do is change the width of a form field in a SharePoint List. Here is the code I tried to come up with...pretty sure it's not even close.
$('select[id^="Metric_x0020_Name"')("<style>=width: 602px;");

Using jQuery
$('#Metric_x0020_Name').css('width', '602px');
Maybe try using CSS to adjust the styling? It would look like this
#Metric_x0020_Name{
width: 602px;
}
Put this after the SharePoint specific styling. You may need to increase the specificity of the CSS if this isn't overwriting what currently exists. In Google Chrome you can check to see what styling is used by right clicking the element and then inspect.

Form input field not clearing. Where is this "inner-editor" Shadow DOM coming from?

Here is the simple form I'll be working from in this question...
<form method="get">
<input type="text" value="test">
</form>
It works fine here or on jsfiddle. Notice how if you click "Run code snippet" and click in the field then the text remains in the field along with the cursor?
However, on my custom WordPress website, the field's value is behaving like a placeholder value. Hopefully these images will demonstrate what I mean by that.
When I click in the field the existing text disappears...
... and when I click away from the field it reappears...
You can see from the form HTML above that the field has a value assigned and does not have a placeholder. My first thought was there must be some placeholder value being assigned dynamically at runtime via javascript. However, Safari's web inspector shows this...
It appears that it's not a placeholder but some Shadow DOM code being added, and that new code is making it function like a placeholder. To view the Shadow DOM code I enabled Shadow DOM in Chrome's web inspector. This is what I found.
When the field isn't highlighted the Shadow DOM shows this...
When I click in the field to highlight it the Shadow DOM shows this...
It appears that something is creating a shadow root and adding this div to it...
<div id="inner-editor"></div>
Then it's setting the innerHTML of that div to "" or "test" based on the highlight state.
I don't work with the Shadow DOM much and I'm not sure how to determine where this code is coming from. I've searched my entire code base through the web inspector and done several different recursive grep (e.g. grep -r "inner-editor" *) from the root of my project to try to find any code in the css, javascript or php that might be adding this Shadow DOM code at runtime. There are no instances of "createShadowRoot" or "inner-editor" or "parent-focus" or "parent-active" or "text-active" anywhere in my project. I'm not sure if these might be coming from the browser code itself or through some obfuscated code from one of the js libraries I'm using like jQuery, or a dynamic browser rewrite of some library code.
How can I get this text field to behave normally on my site rather than like an empty text field with a placeholder value?
Thank you for taking the time.

After spending hours disabling and enabling wordpress plugins, swapping out jQuery library versions on the site and dealing with the accompanying theme compatibility issues, I finally found the offending line of code in my theme's jquery.main.js file. Here it is...
// clear inputs on focus
function initInputs() {
PlaceholderInput.replaceByOptions({
// filter options
clearInputs: true,
clearTextareas: true,
clearPasswords: true,
skipClass: 'default',
// input options
wrapWithElement: false,
showUntilTyping: false,
getParentByClass: false,
placeholderAttr: 'value'
});
}
replaceByOptions calls several other functions but the fix is available in the Boolean settings above. Changing clearInputs and clearTextareas to false fixed the problem. I hope this helps someone else experiencing the same issue.

Mysterious div being appended to hyperlinks

We run a Ruby on Rails 3.2 web application that uses a standard mix of rails and jquery.
Recently, we noticed a strange div element appearing in our production code. It seems to only show up when we render views with strings that also contain hyperlinks.
Here's an example:
We have a string in our view, that we want rendered as HTML:
"Try to search <a href='/search?q=hiring'>hiring</a>"
When we render the page in production though, we get the following:
"Try to search <a href="azarvuttcexyytzq.html" id="qqqqtra" rel="file">trufarwdstrzyzdyw</div>."
We're not sure why but the following div is being appended to our link:
<div style="display: none;">trufarwdstrzyzdyw</div>
What's strange is that we don't think that the file azarvuttcexyytzq.html exists on our servers, and we also found out that "file" is not an acceptable rel value for a hyperlink's relation attribute.
So, where could the div be coming from?
One thought is that it is coming from some analytics library in our system, since we're using Google Analytics. But we can't seem to confirm that idea or rule it out.
Does anyone know of a library that causes behavior like this?
Any help or insight would be appreciated.

If there is no developer who has done this (intentionally or otherwise) by appending a div with a random hyperlink in your application, then there is a high probability that your application server, some library or a gem you are using is compromised. It would be good to do an audit of your code/server and ensure that you are using the original version of all the gems and libraries and no malicious code is otherwise included in your app code.

We had the exact same issue, although intermittently, and it was Distil networks injecting in our case. To verify we took Distil out for the site and it worked like a charm!
Although, have yet to find how to get it working with Distil, will update the answer if/when we do

We had the same issue, our application behind Distil as well as in other comments.
If you use Distil, read this:
https://help.distilnetworks.com/hc/en-us/articles/235705127-Optimizing-Honeypot-Links-for-Pages-with-Inline-JavaScript
In short: Add the following comment near the top of your page (and above the JS) to force Distil injection to happen there: </a> -–> You can also add any other custom, a unique comment which Distil could use to inject the honeypot link code into.

Binding ZURB Foundation dropdown plugin to dynamically-inserted element

I have some client-side JavaScript that dynamically inserts some elements into the DOM. Those elements contain the markup for a dropdown element using the Dropdown plugin:
<p>
<a
id="resource-upload-label-1234"
href="#invalid-resource-1234"
class="label alert"
data-dropdown="invalid-resource-1234"
data-options="is_hover:true"
>
Invalid
</a>
</p>
<div id="invalid-resource-1234" class="f-dropdown content" data-dropdown-content>
<h4>Invalid File</h4>
<p>
This file is not a supported file type.
</p>
</div>
The problem is that the dropdown plugin isn't detecting this new element, so it is not adding the dropdown behaviors to the new elements.
As a test, I tried hard-coding the HTML directly in the HTML source, and the dropdown loads fine in that context. So I have Foundation and the dropdown plugin configured correctly. It's just not binding the functionality to the dynamically-generated elements.
Is there a bit of JavaScript that I can run to bind the dropdown functionality to #resource-upload-label-1234? I was looking at the source for the plugin, and it wasn't evident to me how to do this.

For efficiency you can use $(document).foundation('reflow');
To be even more efficient "target the actual type of foundation item
you need to 'reflow' $(document).foundation('orbit', 'reflow');"
(I'm quoting from: http://foundation.zurb.com/forum/posts/1766-reflow)

One solution that I just found that works is to call $(document).foundation(); again after inserting the new elements.
I am not sure if this is the "right way," but it works. If anyone knows of a more appropriate solution, don't be shy, and post it as an answer!
According to a comment on zurb/foundation#3885, it appears that calling foundation() again should not cause any problems, and perhaps foundation() is designed to be used this way.

Innerhtml in a div tag not working

I'm trying to figure out an issue on a site which has just stopped working.
It's a bit tricky as I don't have server access at the moment, and it's a system I having to get my head around quickly.
basically a section of what looks like a javascript panel on a site has disappeared - and I'm trying to work out why.
I'm using firebug to try and track this down.
It seems to be anything within "innerhtml" on a tags is being ignored, if I put some content outside of innerhtml it shows!
eg
<div id="slide-browser-country-info" innerhtml="<div><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Verdana} span.s1 {letter-spacing: 0.0px} --> <p>In Spanish schools English lessons are mandatory. Good English is seen as such a key skill that many children take extra English lessons at privately-run Academia de Inglés. While you’ll need advanced qualifications and many years’ experience to find work in state-run schools, the Academias often employ less experienced teachers. It’s also worth thinking about teaching private English lessons.</p></div>">this will show</div>
Here's the problem page http://www.teflcourses.fr/tefl-jobs-abroad/
and here's an example of what it should be doing http://www.onlinetefl.com/tefl-jobs-abroad/
I can see the content is actually there in the code, so I'm just trying to figure out what could be causing innerhtml to be ignored.

You use innerHtml via javascript, not declaration like you have attempted here. Put the content within the div tags ur dynamically added with a javascript function.

`I'm trying to figure out an issue on a site which has just stopped working.`
After opening the links you've provided, I have observe how the browser display this page:
This site is not working with the latest browser.
This site was test during development with IE7 and below.
This site is working in IE6 and EI7
It seems to be anything within "innerhtml" on a tags is bieng ignored,
if I put some content outside of innerhtml it shows!
As with my observation puting the contents to innerHTML attribute is not working with the latest browser. I guess innerHTML attribute is deprecated\remove\not included\not valid with latest. But of course you can still use innerHTML as a property.
Then upon browsing on the js code, I find out that problem was cause by this.
jQuery( '#slide-browser-country-list' ).attr( 'innerHTML', cList );
This should be:
jQuery( '#slide-browser-country-list' ).html(cList);
Note: My search return more than one using this function.