0

I have created a custom list on which both date and time needs to be captured on two specific fields. To comply with existing custom formatting on the new and edit forms, I need to re-size the three date and time input boxes to be the same total width as one standard input box.

I'm not an experienced coder but have managed this on the new form (see Image 1 below). However, when I apply the same code to the edit form the date input box resizes as it should, but the two time input boxes don't (see Image 2 below). I can't figure out why!

I've also attached my code snip below. If someone more experienced could let me know if I've made a schoolboy error, it will be a big help. Apologies for the poor quality images by the way. Thanks.

Image 1

Image 2

<style>

.ms-dtinput .ms-input {
 width: 180px;
}

</style>

<script type="text/javascript">
    
$(document).ready(function() {
   
$(".ms-dttimeinput").find("select")[0].style.width="80px";
$(".ms-dttimeinput").find("select")[1].style.width="50px";
$(".ms-dttimeinput").find("select")[2].style.width="80px";
$(".ms-dttimeinput").find("select")[3].style.width="50px"
    
    });
    
</script>
3
  • Probably the selector(s) you are using that work on the New form are different on the Edit form. I would re-inspect the Edit form and see if it uses different CSS or a different HTML structure, and adjust your code accordingly. Additionally, you could probably do everything you need to do just using CSS (like you do for the date picker), you probably don't need to use jQuery to make those adjustments. (Hint, look into the :nth-child() selector.) Mar 5 at 14:48
  • Thanks Dylan. Really appreciate the advice. Thank you. I had planned to use CSS for both input fields but applying CSS to '.ms-dttimeinput' didn't seem to work. So a colleague helped me go down the jQuery route. I think I may just have identified the issue - but I'm not sure how to fix it ! An existing CSS snip, which is setting all other input fields to a width of 350px, appears to be being overridden successfully by my code snip on the new form but not on the edit form. This is leading to the time input fields re-sizing on the new form but not the edit form. Any ideas how to resolve that?
    – Matt
    Mar 5 at 15:02
  • Resolved now thanks Dylan. Apparently there wasn't a Javascript library referenced on the edit form (I'm no Javascript expert - I hope that's the right terminology!). Amending '$(document).ready(function()' to 'jQuery(document).ready(function()' in my snip has resolved the problem.
    – Matt
    Mar 5 at 17:08
0

From the OP's comments

I had planned to use CSS for both input fields but applying CSS to '.ms-dttimeinput' didn't seem to work. So a colleague helped me go down the jQuery route.

First, let's look at the "New" form. I am looking at the default SP 2013 forms, you say you have a custom form, so you may need to do some inspection of the HTML to see if it is structured any differently in your situation, if so, you may need to make adjustments to any answers I come up with.

Looking at the way SharePoint renders the date and time inputs (in the New form), it looks like it renders the whole thing as a mini-table, and the .ms-dtinput and .ms-dttimeinput classes are actually applied to table cells (<td> elements), which may be difficult to control the width of directly. Then, it seems that the .ms-input class is applied to the small text box that is for the date portion of the date/time. We can see the <select> elements for the time portion, but unfortunately it seems that SharePoint doesn't add any classes there we can take advantage of.

screen shot of html structure of date time input table

The pure CSS you use to control the width of the date picker works because

.ms-dtinput .ms-input { /* style */ }

is basically saying "find all elements that have a class of .ms-dtinput [which is the <td>] and then find any child elements inside that have a class of .ms-input [which is the actual <input>] and apply this style to them."

When you say that using a plain CSS selector of .ms-dttimeinput did not work to change the width of the <select>s, of course it didn't, the .ms-dttimeinput class is on the <td> element that holds the selects.

Now, your jQuery code of

$(".ms-dttimeinput").find("select")

is saying something very similar to your CSS that targets the date textbox. It's saying: "find all elements that have a class of .ms-dttimeinput [again, the <td>] and then traverse down through the children and 'find' any <select> elements."

You can express this in pure CSS the same way you set up the selectors for the date textbox: specifying a selector for the parent, followed by a space (indicating to then look at children at any depth), followed by a selector for the children:

.ms-dttimeinput select { /* style */ }

The problem you are going to run into here is that that selector will target both the hours and the minutes <select>s, and you want them to be different widths.

You are solving that problem in your jQuery by using an indexer to apply different styles to each of the different elements found by jQuery:

// this is actually going to find multiple elements, because
// it is saying "find _all_ .ms-dttimeinput, and then find
// _all_ child <select> elements

$(".ms-dttimeinput").find("select")

// this says "only use the first one of that whole collection you found"

$(".ms-dttimeinput").find("select")[0]

Originally in my first comment, I hinted that you might be able to use the :nth-child() pseudo-class selector to target the individual <select> elements, but looking back again at the HTML, there seem to be some <label> elements mixed in there, so it might be clearer and more effective to use the :nth-of-type() psuedo-class selector.

Using that, you could do

.ms-dttimeinput select:nth-of-type(1) {
    width: 80px;
}

.ms-dttimeinput select:nth-of-type(2) {
    width: 50px;
}

What that is saying is: "find all elements with a class of .ms-dttimeinput [the <td>], and then apply this style to only the first <select> child element" (in the case of nth-of-type(1)).

Now, looking at the "Edit" form.... I actually don't see any difference in how the default date/time input is rendered in the "Edit" form vs. the "New" form, it's still the same mini-table, with the same classes on the <td> elements, etc. So I'm not sure exactly why your solution is not working on the "Edit" form.

1
  • Hey Dylan. Thanks for the information. That's all really useful to a newbie coder like myself! As mentioned on my second comment to your last reply, tweaking the JQuery snip resolved the issue on the edit form. So I got to where I needed to be in the end. Thanks for taking the time to help though. It is much appreciated.
    – Matt
    Mar 6 at 15:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.