I am using Angular SlickGrid and want to center or right-align the text in the column headers. Not all columns the same way.
I figured out, there is a headerCssClass property in the column definition, but all the way I tried, this style never seems to get applied.
For the column-definition:
{
id: 'sourceNumber',
name: 'SourceNumber',
field: 'SourceNumber',
sortable: true,
width: 150,
headerCssClass: 'text-right',
cssClass: 'text-right'
},
In the CSS file:
.text-right {
text-align: right;
}
It works fine for the cell contents. But the text in the header is still left align.
What am I doing wrong?
For aligning grid cell, I typically use the Formatters that I created for that purpose alignCenter and alignRight (see all Formatters in the Formatters - Wiki), you could also use the extra CSS class like you did.
If you keep the extra CSS class, then there's an extra float: left on the .slick-column-name class that you will probably have to cancel out and that is probably what is blocking (or cancelling) your CSS. However I must say, it's on the left for a reason, it's not ideal to move it to a different position (especially on the right) because you might conflict with the header menu & sort icons (you will for sure if you align right)
.slick-column-name {
float: none;
}
Also note that the column definition name property also accepts HTML code (it might not be documented though), but even then you will probably have to cancel the float first
this.columnDefinitions = [
{ id: 'firstName', field: 'firstName', name: '<span style="color: blue">First Name</span>' },
];
Lastly, you should also take a look at all the SASS variables (which also have CSS variable equivalent names), you can see all the variables in this _variables file, there's a lot of variables available but it doesn't seem to include any for the header alignment (we can add variables for that in the future), there's also this CSS Styling - Wiki that has info in that regard.
Please note that I'm the author of Angular-Slickgrid
If you have sorting turned on, then the issue would be the float attribute of the slick-column-name/slick-sort-indicator. It prevents the alignment.
add the following to styles.scss
.slick-column-name { float: none; }
Related
In the Vuetify data table, when the header is long, the sorting arrows appear under the header. I am trying to get the sorting arrows in the header to always appear on the same line as the header.
Here is my data table:
<v-data-table
:headers="headers"[![enter image description here][2]][2]
:items="truncatedRows"
:items-per-page="5"
class="elevation-1"
></v-data-table>
What I'm getting:
What I'd like no matter the length of the headers:
.v-data-table-header th {
white-space: nowrap;
}
https://github.com/vuetifyjs/vuetify/issues/10164
In the headers Array item's object, you can add a width value, e.g width: 6rem.
You could also add another key/value pair here to add a custom CSS class via class: 'my-header-name'. This would allow you to further customize the display, such as using display: flex; align-items: center which works kind of nicely depending upon your expectations.
Utilizing and experimenting with these methods, you should be able to get close to what you are looking for.
None of the existing answers worked for me, unfortunately, so I did the following instead:
.v-data-table-header th .v-data-table-header__icon {
display: none;
}
and then added my own <v-icon> arrow inside the header slots.
My code:
myTextItem = new TextItem();
myTextItem.setHint("Some text");
myTextItem.setShowHintInField(true);
myTextItem.setHintStyle("myTextItemHint");
My css:
.myTextItemHint {
color: gray;
}
My Problem:
My issue is that I can have that setShowHintInField(true) set OR my css getting applied, but not both.
I found more info about this on the link: http://forums.smartclient.com/showthread.php?t=14463 but I cannot come up with a common style / place for it, that would make the trick while the hint is inside the field.
My question:
What kind of css would I need in this case and how I tell the field to use it?
What I have tried:
With that setShowHintInField(true) line and without. Both cases: half of the solution is there. Not both halves.
FormItem has method setCellStyle() to set the style of specific cell.
Use
myTextItem.setCellStyle("myTextItemHint");
your CSS will look like this:
.myTextItemHint, .myTextItemHint input {
color: gray;
}
Override other properties also if needed
.textItem,.textItemFocused,.textItemDisabled,.textItemDisabledHint,.textItemError,.textItemHint
For more information on CSS, Please have a look at skin_styles.css that is already shipped along with standard skins in SmartGWT.
I am trying to do basic CSS with rally components. Currently I am working on getting an xtype 'rallybutton' to be inline with an xtype 'rallyiterationcombobox'. I am using a CSS file that successfully updates / changes other pieces of the app whose class name I have set manually, but the preset classes on the rally components seem to not be editable with my css file. I am using Chrome's debugger to look up the class names on each of these components - the rally button has multiple class names depending on where in the html you look: x-btn or x-btn-inner, the rallyiterationcombobox has these: x-form-text, x-form-trigger-wrap, x-form-item-body, and a few others.
I'm trying to use a CSS function that looks like this:
.[buttonClass], .[comboboxClass] {
display: inline;
}
with different combinations of names for classes referring to the button and combobox. [When I put the class names in, I do delete the brackets]. Any help would be appreciated in showing where I'm going wrong!
It turns out that the two components I was using, rallyiterationcombobox and rallybutton, were placed into two different containers in my app. Ext does some magic behind the scenes trying to place each component in their own section of the page, so trying to put them inline with each other was causing problems. To fix the situation, we put both components into the same container and formatted from there. Inside each component definition we used the following code
cls: 'className'
to create a class named 'className' which can then be referred to within the css file. Inside the css file we used the code
.className1 {
float: left;
display: inline;
}
.className2 {
float: left;
display: inline;
margin-left: 10px;
}
to set each component in the same line [horizontally], with both components aligned on the left of the app and the component with 'className2' 10 pixels to the right of the component with 'className1'.
I am trying to override the default widget layout in Dexterity, where label, description, and entry area are on three separate lines:
Name
The person's name
[________________]
I'd like instead to have fields appear in a table with the form:
Name: [_____]
with "The person's name" appearing (if at all) only when someone hovers over the area.
I'm able to override plone.app.z3cform.templates.macros.pt successfully using z3c.jbot; however, changes to the file plone.app.z3cform.templates.widget.pt have no effect I can locate. (See update just below.)
All the templates I find ask each individual widget to render itself, as a single unit with label and descriptive text, AFAICT using a view called ##ploneform-render-widget, but I'm unable to find any page templates associated with that view. Can anyone suggest where such templates would be?
[Update: Note that templates.py in plone.app.z3cform includes the following, which probably means that z3c.bjot is bypassed:
# The widget rendering templates need to be Zope 3 templates
class RenderWidget(ViewMixinForTemplates, BrowserView):
index = ViewPageTemplateFile('templates/widget.pt')
class RenderSingleCheckboxWidget(ViewMixinForTemplates, BrowserView):
index = ViewPageTemplateFile('templates/singlecheckbox.pt')
So, if that is the problem, what must be done to make this compatible with z3c.jbot?]
Thanks.
OK, Martijn Pieters has provided what I'm sure is good advice -- do this using css and perhaps Javascript.
Let me share what has worked for me; hopefully people will point out where I'm using old stuff, where I'm being inappropriate, etc... But this is a starting point:
On my local machine, I create a file named project-css.css with the following contents:
.z3cformInlineValidation {
float: left;
position: relative;
display: inline-block;
background: red;
}
.z3cformInlineValidation label {
float: left;
width: 15em;
background: yellow;
text-align: right;
}
.z3cformInlineValidation div {
display: inline;
}
.z3cformInlineValidation input {
float: left;
background: pink;
}
.z3cformInlineValidation input[class~="int-field"] {
background: purple;
width: 2em;
At least on my browser (not IE), this has the effect of putting input fields (an element of type input inside of an element of class z3cformInlineValidation ) after right aligned labels, at a column beginning about 15 em spaces into whatever box encloses the labels and input fields. The integer input fields, which are marked by zope/plone/z3cform/dexterity/? with the class "int-field," are reduced in size so they don't extend across the box. The "background" attributes are just there to see what's going on, and can be removed.
Go to the zope management interface, select portal_skins, select custom, select "File" from the drop down list near the "Add" button at top right, then click "Add." On the resulting screen, use project-css.css as your "id" and upload the file project-css.css
Go to the zope management interface, select portal_css, scroll to the bottom and fill in the "id" field with project-css.css. Then click "Add".
The CSS will then rearrange all Dexterity default form output, I believe.
To restrict it so that it is only used by my form, I've found a condition statement included in the portal_css for project-css.css like this to work (there are no quotes around the complete expression)
python: request.URL.endswith('end_of_applicable_url')
I'm sure there are more appropriate ways, and I would be grateful if someone would point them out.
As when I last visited Zope/Plone, I find the capabilities tantalizing, but the documentation, while MUCH improved, still seems to leave out one or two of the little magic things that a beginner needs to get rapidly up to speed, probably because they are so obvious to those who use the product on a day to day basis.
I am using a webGrid and would like to be able to change the width of the columns. I am using the following code for the style but it seems to have no affect.
webGrid.Column(columnName: "TRP_Comments", header: "Comments",style: "width:500px;"),
Is this not what style is suppose to do?
Thanks
Bruce
The style property doesn't set the style attribute but the class attribute. Yeah, I know, WTF. The designers of the WebGrid component must have been mentally disturbed at the moment they choose the name of this optional argument. The whole dynamic and optional arguments stuff they put into this component makes me hate it like hell and never use it in any application.
Anyway, you could define a custom CSS class in your separate CSS file:
.comments {
width: 500px;
}
and then assign this class to the corresponding <td> elements:
webGrid.Column(columnName: "TRP_Comments", header: "Comments", style: "comments")