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")
Related
Vaadin flow theming and styles confuse me. Is there a way to disable it and apply natural css. I know how to reference a css file inside vaadin, and use setClassName but I would prefer to use ordinary css style for components.
Thank you
You can override the default lumo styling by providing yours. For instance, to remove the background color from a ComboBox, I can target the input as follows in a CSS file named vaadin-combo-box.css:
[part="input-field"] {
background-color: var(--lumo-base-color);
max-width: fit-content;
}
To set the colors for a disabled button, you can target it as follows:
filename: vaadin-button.css
code:
:host([theme~='primary'][disabled]) {
background-color: red;
}
And you get the following:
To change the primary color or any other global styling, explore your styles.css file.
For a better understanding, take a look at this video https://vaadin.com/learn/training/v14-theming
Like with all other styling you need to check the states / attributes of the component while the specific state is active and check the DOM - only caveat would be that you need to add those style in the specific files like vaadin-button.css to be applied inside the shadow DOM.
Setting the width of select2 using css is overridden by the javascript call of the select2
// javascript
$(function() {
renderSelect("select");
});
# HAML example (Rails)
= select_tag "countries", options_for_select(#countries), class: 'some-ignored-css-class'
related: How to control the width of select tag?
The problem isn't javascript, the issue is that you're not preserving the CSS.
The only way to set the width is to use CSS. Even your JS sets the CSS (.width):
The difference between .css(width) and .width() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). They both set the CSS "style" element
A better way is to either set the CSS on a "container" element, or make sure you're persisting the CSS whenever you call the renderSelect function:
Container
#app/assets/stylesheets/application.css
.container select { width: 50px; }
#app/views...
.container= select_tag "countries", options_for_select(#countries)
Using a container will allow you to set the CSS on the container, removing the need for the class on the select itself. Whilst it means adding a container div, it will give you the most autonomy.
--
JS
The alternative will be to change the renderSelect function to take the class of the current select & append it to the new element.
Since I don't know your renderSelect function, I can only provide that level of suggestion.
A solution is to javascript again
// javascript
$(function() {
renderSelect("select");
$("div#s2id_countries").width(300);
});
# HAML example (Rails)
= select_tag "countries", options_for_select(#countries), class: 'some-ignored-css-class'
ahh, Javascript, the cause of, and solution to, all of life's problems
(any improvements?)
I have a div element which has 3 classes:
<div class='captcha_article captcha_email captcha_register'></div>
How can I target the third class for example, without affecting the style of the other two classes in the div?
Also, if I were to have 4 classes, how to target the last one without using last-child property ? Would :nth-child apply here?
You misunderstand CSS.
You can add styles to the captcha_register class by doing this in your CSS file.
.captcha_register {
// Attributes go here
}
Depending on where this is placed in your CSS file will determine if any of the style attributes adding to the captcha_article and captcha_email classes will be affected.
For example:
.captcha_article {
height: 200px;
}
.captcha_register {
height: 100px; // This will override the height of 200px on the div
}
UPDATE
If each class is suppose to represent a different web page then adding them all to the same element might explain why you are seeing unexpected results. It might be better to combine the styles that appear in all classes into one reusable class, lets call it .page. Then on each page you use this you can modify it with another class, if it needs to be modified.
I'm making a few changes to a site and want to change the width of the container to go across the whole page. I'm a bit of a noob so not sure if I've don't it correctly, but want the width to be 3000px. I have the option of container id and container class. So basically what CSS do I put in which box?
The theme I am using is Porto by Spyropress. But looking for some CSS help:)
Thank you very much!!
In the CSS style page (or code) where you have the container, you should write the following line:
width:3000px;
The most straightforward answer would be to use the style="width: 3000px;" definition instead of the id or the class (even if it is not a really clean choice).
If you have no chance to add a style and you have called a CSS, you can do it by id or by class, depends on how often you will have Elements with 3000px width (single time go for id, multiple times go for class). In general classes and id link the parts in your CSS with your html definitions (named-links). They do not serve you with direct CSS, this is done by the style="" Element.
Some Code:
#some_id {
width: 3000px;
}
.some_class {
width: 3000px;
}
And some additional info about general css (because it is much more than just id's and classes if I think about the cascading part): http://www.cssbasics.com/
I have an ApEx report where i need to customize the css width of columns differently. For this I'm using the CSS Class attribute in the report:
The CSS Class assigned is as shown: WideColumn
And in the HTML header for the application page :
<style type="text/css">
.WideColumn {
min-width:100px;
}
</style>
This is not taking effect. In fact whatever css attributes are assigned, do not take effect.
I do not want to use the CSS Style section to specify 'display:block;min-width:100px;' due to certain limitations.
What is it that I'm missing out in the column attributes?
I've tried CSS Class within quotes too: 'WideColumn' Please suggest.
The custom row template can not deal with the CSS class definition. The CSS under "Column formatting" normally generates a span element with a class set to it, not the td element. Setting the "Element CSS class" for the element itself will not always help aswell. If your column type is a "Standard Report Column" then no extra html is created.
You also have no option of providing a substitution string in the template itself to create some output.
You could
add an extra column in the source query which will contain a class.
Use the column header in the row template to add this custom class.
alternatively use the class column in the html expression of the
column you want to change. Similar to standard output, you could use
<span class="#CLASSCOL#">#MYCOL#</span> to generate that html.
target the generated column with CSS. For instance, if your template
generates th elements and a headers attribute on td elements
(like in standard reports), you can target those columns much more
easily than fiddling with classes or html expressions. You might need
to adapt the template but it should be generally beneficial.
You can do this with some Javascript using the jQuery library built into APEX.
(WARNING: My Javascript isn't the world's most elegant!)
This worked for me:
1) In the "Function and Global Variable Declaration" attribute of the page create this function:
function setColWidths(colId) {
var maxWidth = 0;
$('th#'+colId).each (function (index) {
w = $(this).width();
maxWidth = Math.max(maxWidth,w);
});
$('th#'+colId).each (function (index) {
$(this).width(maxWidth);
});
}
2) In the "Execute when Page Loads" attribute of the page call the function for each column:
setColWidths('COL01');
setColWidths('COL02');
setColWidths('COL03');