I am not a developer but, I was trying to create a SharePoint list for online tracking of all open items in our team site. I was able to get the following code to standardize the font and font size for the columns through the below code
{
"$schema":"http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType":"div",
"style":{
"font-weight":"bold",
"font-family":"Trebuchet MS",
"font-size":"13px",
"font-size-adjust":"0.58"
},
"txtContent":"#currentField"
}
For two columns containing significant text content, I wanted to limit the maximum row height and introduce vertical scroll bar but, am unable to understand what will be the code and how to add it to the above written code .
Any help or guidance will be highly appreciated.
Thanks in advance.
Running the new code as proposed by #Thriggle did not reduce or modify the row-height of the column.
FURTHER EDIT
JSON code is being added in the List Settings section and choosing individual columns.
--
Kind Regards,
Nilotpal
You can add style properties to define how the cell should display.
The key additions to your style block would be "overflow-y":"auto" and "max-height":"50px" (replacing 50px with whatever maximum height you desire).
Your updated JSON for the advanced column formatting would look something like this:
{
"$schema":"http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType":"div",
"style":{
"font-weight":"bold",
"font-family":"Trebuchet MS",
"font-size":"13px",
"font-size-adjust":"0.58",
"overflow-y":"auto",
"max-height":"50px"
},
"txtContent":"#currentField"
}
Edit for clarity, here's where you'd add that JSON:
On the list view, click the view selector and choose to format the current view
Instead of applying the formatting to the entire row, add it to the desired column.
Click the link to enter "Advanced mode"
Paste in your JSON declarations and hit the Preview button to see if it works
Alternatively, you can go to the list settings page, then to the settings for the specific column to which you want to apply the formatting, and add the JSON to its Column Formatting setting. This will apply to all views of the list instead of just to the one view.
For all those reading this question, please note the key point of using JSON code formatting feature is that it will be available in "Modern" view of the SharePoint list. The coding shared in the ongoing conversation will provide the desired impact only if the SharePoint list is being viewed in the "modern" OR "new" experience.
Related
The Goal
I want to have a v-data-table that is editable and looks "nice".
The problem
Adding a v-text-field to make it editable also increases the row-height to a very eye unpleasing level
Original view:
With v-text-field inputs
The quesion
How can I decrease the row height to resemble the one without v-text-fields.
As a Bonus
Because I am quite new to this whole Front-End-Development-Kind-Of-Thing, how would I go about it identifying what is causing this "height issue"?
PS: I've tried to add a JSFiddle but I cant even seem to be unable to figure out how to display the v-data-table correctly...
The basic draft can be found here
Is it necessary for your table to be editable within the columns? How do you decide when to pass data back via request to your Backend? After the user left a field?
If it is not necessary to have the edit option within the table, I would just use the action buttons you already have in your table to trigger a modal in which you can edit the fields. This also allows you to have proper form control before a user can submit a request. There is also a Vuetify Codepen with an example how to do this Codepen
If it is necessary you should implement the v-data-table as v-data-iterator which is essentially the same functionality-wise, but allows for complete control over the look. https://vuetifyjs.com/en/components/data-iterators/
As to how to identify the problem with the v-text-field height you have to use your browser dev tools. You would then realise that the input has default paddings and margins but also a whole lot under the hood. It e.g. allocates space for error messages to pop up and for a label to go above the field.
And how to fix your JSfiddle you can read in the getting started section of the vuetify documentation under CDN https://vuetifyjs.com/en/getting-started/installation/#usage-with-cdn.
you can use the "dense" property for Lower height of v-data-table inputs
https://vuetifyjs.com/en/components/data-tables/#dense
I am trying to hide columns in a rhandsontable rendered in a Shiny app. I believe that in the current version it can't be done as explained here. However Handsontable does have a Hidden Columns plugin. I am not conversant with how to add plugins. If someone can show me, that would be great.
I am trying a css based approach but that's also failing. In my ui.R, I render the table using rHandsontableOutput("CargoListData"). This table CargoListData has 19 columns and I wish to hide the 18th column. It's a timestamp that I don't wish to display to the user, but I do need it in calculations when the user edits the table and saves it.
I have been trying to hide the column using some css code in my styles.css file of the Shiny app :
#CargoListData > * > td:nth-child(18) {
display: none;
}
However this has no effect on hiding the column. What am I doing wrong?
Since all else failed, here's something I discovered which handles this problem at least for now. My rhandsontable has 19 columns and I wish to hide the 17th to 19th columns. Specifying colWidths as 0.1 (and not 0) solves this.
hot_cols(colWidths = c(rep(150,16),rep(0.1,3)))
I am kind of a Newbie in nattable, I want change the alignment of first header column in nattable to the left and the rest remain on the right, I know that alignment is generally defined like this:
this.cHeaderHAlign = HorizontalAlignmentEnum.RIGHT;
Is it possible and How can I do it?
From your code snippet it looks like you are referring to theme configurations. But without going into details how this can be done using themes you need to understand how the basics are working.
In general you need to add a custom label to the first column in the column header and then apply a style object with the needed alignment for that label.
Have a look at the NatTable - Getting Started Tutorial to get an idea how this can be achieved.
I am creating an SSRS report in SSRS report builder 3.0. I currently have a table where the rows have a Data Bar inside of the cells. I cant figure out how to get the data label to center on the row. I tried selecting center under the Data Bar "Custom Attributes for "bar label style" and also under the Data Label under "position". Both seem to just center the label on the Data Bar itself not on the row.
I'm under the reputation limit or i would post an image of what I'm talking about.
Image link of current configuration http://imgur.com/lmvl9dI
I realise that this is an old post, but I stumbled across this forum searching for an answer to the same question. Unfortunately, I have to agree with Christopher, in that there is no way around the issue (that I know of).
However, I have used a very simple workaround that displays the data bar and values neatly, and thought it may be useful for others.
Quite simply, I have added another column to the right of the data bar, and have entered the same field. I have then removed the borders between the two textboxes, so that it displays the data bar to the left with the values aligned to the right.
While this does not provide an answer to the question as such, I hope that it may help others with the same problem in the future.
I suspect, unfortunately, that what you seek is not possible. The reason being that the label is a part of the bar. The label is defined for the entire series, and for each label, it is positioned relative to the bar itself. Relative to either the start or the end or the middle of the bar, but not relative to the chart's container.
What I imagine you wanting is to define something that is centered in the cell itself, which would have to be a direct component of the cell (e.g., placeholder, entered text). Unfortunately, when using a databar, you cannot add anything else into that cell.
The Problem in Hand:
I want to make a form designer where user can drag and drop fields of different type and design the layout too, some what similar to wufoo form builder but here the layout is limited to single column whereas I want to make something where user can make the layout as they want.
I understand how to do in single column view, but could not understand how to achieve multiple column layout eg: row 1 there could be 3 elements, row 2 one element stretched to full length, row 3 there could be just 2 elements etc.
What I tried:
I have tried with jquery UI sortable to make a single column layout with using div where new elements can be dragged and repositioned.
Any suggestion on how to proceed further will be helpful
I have tried searching StackOverFlow and google but could not find any link on a similar topic. If anyone could point me to the same, it will be also helpful.
When you reorder elements on wufoo form builder, you can only drag'n'drop up or down. Remove that restriction and as soon as one element is dragged across a certain threshold, it "belongs" to the next column. If the "old" column was the first or last one and the line that the element was moved over was to the "outside" of the form, add a new column there, until the maximal number of columns is reached.
If the used drags the last element of a column into another column, remove the now empty column on element-drop.
You could also remove the dynamic adding/removing of columns and juist have a button ("remove column" & "add column") to do it by code.
An example for the dropping in another column can be found here: http://jqueryui.com/sortable/#connect-lists
Hope this helped!
Edit:
http://jqueryui.com/sortable/#portlets and http://jqueryui.com/sortable/#empty-lists also have elements that you could look into. Good luck! Sounds like a nice project. Can we see any progress or beta?