Personalize the width of the columns

My SharePoint Online HTML code is as follows:

<div sortable=""
     sortdisable=""
     filterdisable=""
     filterable=""
     filterdisablemessage=""
     name="Responsable"
     ctxnum="14"
     displayname="Responsable"
     fieldtype="User"
     resulttype=""
     sortfields="View={6ae319f0-c398-4d0a-b737-b3214732035b}&amp;SortField=Responsable&amp;SortDir=Asc"
     class="ms-vh-div">

I attempted to modify it using jQuery with the following code:

$("input[title='Responsable']").css({
'width':'400px',

});

Alternatively, I tried this jQuery code:

$("div[name='Responsable']").css({
'width':'400px',

});

In addition, I experimented with CSS using the following code:

.ms-vh-div [DisplayName='<Responsable>']
{
width : 1000px !important;
}

Unfortunately, none of these attempts proved successful. How can I effectively adjust the width of this div element?

jqueryhtmlcss

Answer №1

To ensure that your second code functions correctly, make sure to:

1. Include a closing </div>.

2. Insert the jQuery library before the script code.

3. Wrap the code inside $(document).ready({...});

Take a look at the snippet below:

$(document).ready(function(){
  $("div[name='Responsable']").css({'width':'400px'});
});
div{
  background:red; /* to show you that width is actually increasing */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div sortable="" sortdisable="" filterdisable="" filterable="" filterdisablemessage="" name="Responsable" ctxnum="14" displayname="Responsable" fieldtype="User" resulttype="" sortfields="View={6ae319f0-c398-4d0a-b737-b3214732035b}&amp;SortField=Responsable&amp;SortDir=Asc" class="ms-vh-div">1</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Comparing iPad and Desktop Devices

Working on the responsive site sandbox.mercomcorp.com, I encountered an issue where the CSS meant for an iPad device is affecting the desktop CSS. Shouldn't the iPad have its own separate media query from the desktop? Here's a snippet of the CSS: ...

ioscssipadresponsive-design

What is the best way to customize the appearance of the material-ui select component using styled-components instead of material-ui classes in a React

I've been facing some challenges while trying to style my material-ui select component using styled-components instead of material- classes. The version I am working with is material-ui/core 4.12.3. When I use the old makeStyles component from materi ...

cssreactjsselectmaterial-ui

Placing a moveable object in a designated spot for dropping at the desired location

I've been attempting to clone and drop a draggable object at the exact position within a droppable area where the drop event takes place. While I have come across examples online that demonstrate appending draggables to droppables, they all tend to re ...

javascriptjqueryhtmlcssjquery-ui

What is the best way to extract the frameset from a frame window?

Here is a code snippet to consider: function conceal(frameElem) { var frameSet = frameElem.frameSet; //<-- this doesn't seem to be working $(frameSet).attr('cols', '0,*'); } //conceal the parent frame conceal(window.pa ...

javascriptjqueryhtmldomframes

Add a variety of input values to a div in designated spots

Objective: The aim is to allow the user to connect form fields with specific locations within a content from another div, and then add the text entered in individual input fields to those corresponding locations. Here is the link to the fiddle HTML: < ...

javascriptjqueryhtml

Choosing a class using Jquery through a For loop in Javascript

I have a group of images with a class applied to them. I am attempting to create a for loop that will iterate through the elements of this class. In Python, you can use "for element in thing" and I was curious if there is something similar in JavaScript. A ...

javascriptjquery

Retrieve the following item belonging to a specific class immediately after the current selection

On my website, I have multiple comment sections scattered throughout. For example, you can check out one of them here: This particular site is dedicated to questions and answers. As you navigate through the page, you will notice a Grey "Write a reply..." ...

jquery

Why does the IMG keep loading every time the web page is refreshed?

I am experiencing an issue with my html page where the background images are not reloading when I refresh the page, but the logo image is. The background images are called through an external CSS file, while the logo is used with an <image> tag. Wh ...

htmlcss

Tips for adjusting the color of multiple <a> tags?

One issue I am facing is the color of the .row a element impacting my contact link, making it white. Despite attempting to change it to red, the color remains unchanged, but upon hovering it turns green. .row a { color: white; text-decoration: non ...

htmlcss

Is there a way to create a new prettyphoto window by clicking on a link within the original prettyphoto window?

I have an HTML table that is dynamically constructed on the server side using AJAX. The table is displayed using prettyphoto, everything works fine up to this point. However, the last column of the table contains a link that should open an image using pret ...

phpjavascriptajaxjquery-pluginsjquery

Changing Images with Button Click in Javascript

I am facing an issue with my buttons that should swap images once clicked. The first two buttons work perfectly, but for the third and fourth buttons, the images do not disappear when clicking another button. Below is the current code in the document head ...

javascripthtmlimagebutton

The preventDefault() function is not functioning properly on the <a> tag

As a JavaScript beginner, I decided to create an accordion menu using JavaScript. Although I was successful in implementing it, I encountered a bug in my program. In this scenario, uppercase letters represent first-level menus while lowercase letters repr ...

javascriptjqueryhtmlcss

Utilize getJson to retrieve external information and showcase it in a string format

There is a JSON file located at . I have the intention to load and display this JSON file by accessing it. To do so, I use the following code: $.getJSON( "http://codio.io/hugolpz/Cat-is-smart/data/dict.json", function( json ) { console.log("This step ...

jqueryjsongetjson

Quickly view products in Opencart will automatically close after adding them to the cart and redirecting the

I've integrated the product quickview feature into my OpenCart theme, which opens a product in a popup. However, when I add a product to the cart from the popup, it doesn't update on the main page until I refresh. I'm looking for a way to re ...

javascriptphpjqueryajaxopencart

What is the best way to ensure that the same information is included on every page of

Currently developing a dynamic website where certain components such as the fixed header, menubar, and footer are common across multiple pages. What is the best way to include these fixed components on every webpage? I am utilizing JSP and JavaScript for ...

javascripthtmlcssjsp

Disorganized jQuery Animation

Looking for some help with an animation I have on my website. The animation is supposed to smoothly move in and out when the mouse cursor hovers over it, but as you can see, it's a bit messy. This project involves HTML, CSS, and jQuery <!DOCTYPE ...

jquerycsshtmlanimation

I keep encountering an issue when trying to load the website <a href="linktext.com">linktext.com</a> using SQL and PHP

I recently encountered an issue while trying to retrieve data from an SQL database on a webpage using PHP. The process was interrupted whenever there was a hyperlink present in the SQL text data, such as linktext.com. I attempted to use HTML special chara ...

phphtmlsqlhyperlink

Using CSS to resize an element with both dimensions while maintaining its

Is it feasible to preserve a 1:1 aspect ratio on a div element using the CSS resize property? This particular illustration lacks an aspect ratio. Do you have any recommendations? ...

htmlcssresizeaspect-ratio

The fixed div width suddenly switches to 100% without warning

I'm struggling with a basic design issue. My goal is to align the purple div next to the yellow div. Both of these divs are nested inside the white div, and the white div is enclosed within the blue div. When I float the yellow and purple divs to the ...

htmlcsscss-float

The collaboration between delegate and :not(.myClass) is ineffective

How can I select all ul li items that do not have the .roundabout-in-focus class? $("ul").delegate("li.roundabout-in-focus", "click", function() { $(this).css({position:'absolute',height:'300px',width:'400px',le ...

jqueryclassdelegatesevent-handlingclick