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

Stringified HTML code showcased

When working with Angular, I have encountered an issue where I am calling a function inside an .html file that returns a string containing a table element. My goal is to convert this string into HTML code. I attempted to use [innerHtml]: <p [innerHtml ...

htmlangulartypescript

The top section of the page is not properly aligned with correct bootstrap spacing and margins, leading to a

Inspiration theme: Porto (The work items on the right are aligned with the top of the viewable portion of the page) when selecting 'view all' on the left menu. Website using the Porto template: DMMBlitz (The work items on the right are NOT alig ...

htmlcssbootstrap-5

Adjust the JavaScript variable upon pressing the "c" key

I'm trying to figure out how I can toggle the value of variable x in JavaScript when the key "c" is pressed. Specifically, I want x to change from 0 to 1 when "c" is pressed and revert back to 0 when it's released. I have already defined and name ...

javascripthtmlcssvariablesfrontend

JavaScript Application - Problem with Universal Windows Script

I recently built a website utilizing material design lite for the aesthetics: Here are the scripts included: <script src="./mdl/material.min.js"></script> <script src="Scripts/angular.min.js"></script> The necessary .css fi ...

javascriptcsswindows-10-universalmaterial-design-lite

Guide to making Bootstrap collapsible panels with full-width content that do not affect neighboring columns

I'm currently working on a responsive grid that displays items with expandable details when clicked. My issue is that when one item expands, the elements next to it collapse down, which is not what I want. I want all items to stay at the top and have ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilizing jQuery to highlight and customize portfolio items with odd numbers

I'm currently trying to rearrange the module header and portfolio image for odd-numbered portfolio items. Feel free to check out my sandbox here. I thought the code below might do the trick, but it's a no-go. jQuery(document).ready(function($){ ...

jquerycsscss-selectorsjquery-selectorschildren

Attempting to extract information from a webpage that contains multiple data tables, but encountering an issue where only the first table is successfully scraped

For my current project, I am attempting to extract data from basketball players' profiles on Basketball-Reference. Each player page on B-R contains several tables of valuable information that I need to access. However, when trying to extract the table ...

pythonhtmlbeautifulsoupxml-parsinghtml-parsing

Ways to implement a personalized button in place of jquery ui buttons

Is there a way to replace the standard jQuery dialog buttons with custom images? I have created new buttons in Photoshop with a .png extension and would like to use them instead of the default dialog buttons. I think this can be done through CSS, but if y ...

jquerycssjquery-dialog

I'm having trouble getting my if statement to function properly with a random number

I'm currently working on creating a natural disaster sequence for my game, and I'm using Math.random to simulate different outbreak scenarios. However, I've encountered an issue at the end of my code where an if statement is supposed to trig ...

javascripthtml

Change the border color of radio buttons when clicked

When one of the radio buttons is clicked, it should give an outer border with color. When the other radio button is clicked, it should give an inner border that surrounds the image. <!DOCTYPE html> <html> <head> ...

jqueryhtmlcss

Tornadofx highlight selected row with CSS

I am attempting to modify the background color of a selected row and apply the same change to a listview. When I use cell{backgroundColor += Color.BLACK}, it successfully changes the color, but it does not retain the selection color as intended.I have al ...

csskotlintornadofx

Angular's table data display feature is unfortunately lacking

Below is a simple HTML code snippet: <div class="dialogs"> <div id="wrapper" > <p>{{createTestingConstant()}}</p> <ng-container *ngFor="let one of contacts"> <p>{{one ...

htmlcssangulartypescriptvisual-studio

personalize auto-suggestions in AngularJS

Here is a link to a custom search implementation using autocomplete in angularjs. Is it possible to modify this so that the matching starts from the first character? HTML <div ng-app='MyModule'> <div ng-controller='DefaultCtrl& ...

javascriptjqueryangularjssearchautocomplete

The nb-install mixin is not recognized

While working with angular5, I encountered the 'No mixin named nb-install' error when running npm start or serve Module build failed: undefined ^ No mixin named nb-install Backtrace: stdin:13 in E:\mrb_bugfixes& ...

cssangularscss-mixinsnebular

What is preventing jQuery from returning a string or text value?

index.html <button id="fetchGroupers">Fetch Groupers</button> <script type="text/javascript"> $(document).ready(function () { $("#fetchGroupers").click(function () { $.ajax({ type ...

asp.netjqueryajaxpost

Adding a panel dynamically with Bootstrap incorrectly

I have been using the Collapse panel in Bootstrap and it was working perfectly when implemented statically. However, I encountered an issue when trying to add it dynamically. HTML <form> <div class="form-group" > <label for="c ...

javascriptjqueryajaxtwitter-bootstraptwitter-bootstrap-3

Insert a new row into a sortable table with paging functionality

I'm facing an issue where adding a row dynamically to a tablesorter table with a pager removes all other pages. I'm looking for a solution to either add the row without affecting other pages, or remove the pager from the table and revert it back ...

jquerytablesorterpager

Combining an input box and label on a single line with the help of Bootstrap

Hi, I'm Sonal and I'm currently utilizing a Modal on my website. Within this Modal, I am looking to create a form with labels and input boxes displayed on the same line. Below is the code snippet I am working with: <a data-toggle="modal" hre ...

htmlcsstwitter-bootstrap

What is the best way to display data from an Excel spreadsheet on my website?

I'm faced with a challenge in my Excel spreadsheet- I have a mix of numbers and text that I want to turn into graphical representations on a webpage. I'm considering using Python or PHP to achieve this as HTML alone doesn't seem up to the ta ...

pythonphphtml

Is it possible to use a TypeScript Angular (click) event with an object property as the value?

Seeking assistance in creating a dynamic error card featuring various error messages along with a retry button. Below is a snippet from my TypeScript object: errorCard: any = []; if(error) { this.errorCard.errorMessage = "Oops, please try again"; ...

htmlangulartypescript