I tried to modify Controls.Input size in Websharper, by using Enhance.WithCssClass unsuccessfully. The max-length in the css was applied to the whole control, and not to the Input markup.
How can I apply different lengths to different Controls.Input controls?
The CSS class indeed applies to the container. To style the actual input using Enhance.WithCssClass "myClass", you need to apply the style to the input inside myClass:
.myClass input {
width: 300px;
}
Related
I want to disable text input in the "basic-select" component, from the "vue-search-select" package
because there are already ready-made styles for it, and I would not want to create a separate customized select
is it possible? Tell me please
I guess there is no explicit API to disable text input because this package is going to make a "searchable" select component. The text input can be hidden using CSS, however.
.search {
display: none;
}
/* or even better */
.ui.search.dropdown > input.search {
display: none;
}
However, you should be careful about the selector you choose. Depending on your project, it might have some side effects. It might be better to add a custom class to the component and use it as follows:
.my-custom-class .ui.search.dropdown > input.search {
display: none;
}
I searched a lot, but every solution was to include some constant CSS class names into the page, and use the Column's ClassNameGenerator to set the proper classname on the cell/row.
Now this might be a good solution when the developer can decide on formatting a cell, however when a user can decide (especially with a script written as cell renderer) how a cell will look like, it is not possible to use the ClassNameGenerator.
So question is, how can I format the cell/row background programmatically, not using any CSS? I can provide custom component as cell value. So it's fine to render a label with icon, or just icon, or a checkbox, however coloring this rendered component is not enough, since this is smaller than the cell itself, making it look really ugly. I need to access the root element of the cell, and color it using getStyle().set("background", "xxxx"). How to achieve this?
Thanks!
You can use a TemplateRenderer.
For example:
Grid<Person> grid = new Grid<>();
grid.setItems(people);
grid.addColumn(TemplateRenderer
.<Person>of("<b>[[item.name]]</b>")
.withProperty("name", Person::getName)
).setHeader("Name");
Checkout this tutorial for more information: https://vaadin.com/docs/v14/flow/components/tutorial-flow-grid
OK, finally I solved. I use a template renderer with a proper template structure. I modified the cell style in a way, that my renderer DIV fills the entire cell (removed any padding/margin from the original cells)
<dom-module id="grid-style" theme-for="vaadin-grid">
<template>
<style>
[part~='cell'] ::slotted(vaadin-grid-cell-content) {
padding: 0px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
--cellopa: 255;
}
[part~='cell'][aria-selected~="true"] ::slotted(vaadin-grid-cell-content) {
--cellopa: 0;
}
</style>
</template>
</dom-module>
I also added some simple CSS declarations to one of the main CSS:
vaadin-grid-tree-toggle flow-component-renderer {
width: 100%;
height: 100%;
}
vaadin-grid-cell-content flow-component-renderer {
width: 100%;
height: 100%;
flex-grow: 1;
}
This way the rendered DIV fills the whole cell and I can color it's background.
Now the problem comes with the selection, since the selection is not visible any more. For this you find the --cellopa variable set to 255 normally and set to 0 for selected cells.
Now when I define a background-color on the div, I use rgba and I set the alpha to the var(--cellopa) variable, like this for example rgba(255, 0, 0, var(--cellopa))
Now when the row is not selected, the cellopa is 255, so the background is visible, when I select the row the cellopa is set to 0, so the background of the DIV gets transparent, and the row selection color on the row is visible. This is super fast, and changing the selection does not cause any glitch, and also the previous coloring state is restored properly.
I also managed to get around with the treegrid and managed to color even the hierarchy column fully using a special template for the hierarchy column with some padding taking the level into account.
I have a new template LandingPage3Template.
layoutSlots: {
LandingPage3Template: {
pageFold: 'Section2B',
slots: [
'Section2A',
'Section2B',
'Section2C',
'Section1',
'Section3',
'Section4',
'Section5'
],
}
}
I just wanted to give styles for the slots. Can someone help me to write a custom CSS style to align it properly?
I am using the below-mentioned code but it is not working.
%cx-page-layout {
// my code here
width: 10%;
}
thanks for asking at our SO channel.
The CMS page template name (i.e. "LandingPage3Template") and slots positions (i.e. "Section2A") are mapped to CSS classes in the Spartacus DOM. This means, that you can use pure CSS rules to create the layout.
Page slot position names are not necessarily unique cross all pages (i.e. "Section2A" might also be used in other page templates). But since page slots are nested inside the page template, you can create css rules for page slots that are used inside a given page template.
The following CSS rule shows how you can create a rule for "Section2A" inside "LandingPage3Template".
.LandingPage3Template .Section2A {
width: 10%;
}
While this is valid css and scss syntax, in scss it would look like:
.LandingPage3Template {
.Section2A {
width: 10%;
}
}
Please note that the percentage before a selector (i.e. %cx-page-layout) refers to a so-called placeholder selector. This is used in Spartacus for optional CSS, so that only when the placeholder selectors are used, the CSS ends up in the final CSS. You can read more about the CSS setup in Spartacus at https://sap.github.io/spartacus-docs/css-architecture/.
In some cases is common to use same values in different properties, for example (is just an example to show purpose) the following nested rule:
.button-link
{
height:40px;
a
{
line-height:40px;
}
}
The idea is that to vertically center button text line-height and height should be equal.
Is there a way in LESS to "assign a value taken from a diffent property"?
I know that I should use a LESS #variable but in this case is not the same thing and need extra code. Instead should very interesting and useful if I should edit only button's height and then LESS will replaced the same value to line-height
UPDATE:
Another example could be the following:
.button-link
{
color:white;
background:black;
&:hover
{
color:black;
background:white;
}
}
In which "hover" status should invert color and background-color comparing to default state.
This is possible starting with v3 of LESS! Here is the documentation on it.
The example use case they provide ends up with the background-color getting the same value as the color property when compiled:
.widget {
color: #efefef;
background-color: $color;
}
You can´t :(. What i usually do is:
#buttom-height = 100px;
#a-link-height: #buttom-height;
and use that variables in your less declarations. Its a dummy example, i know, but imagine calculated data values from other variables or complex dependencies, proportional paddings/margins... that´s the way i learnt from Bootstrap LESS code.
I have template binded with the listview in windows store application which I am developing using html5 and javascript. I have a requirement to change the size of the listview item programmatically. Basically I have a input type range on my page. User will change the value of the input and according to that value I should be able to change the size of the listview item programmatically.
Any help or pointer will be much appreciated.
Thanks in advance!
I know this is old, but I have just spent hours doing extensive tests (because I didn't feel like switching to grid mode) and I found a very simple way that would allow you to have items of any height without them overlapping,I though I would share it, all you need to do is add this to your css:
.win-listview .win-listlayout .win-container {
height:auto;
}
You can set the size of the items in a listview using the class set on the item in the template. You can:
Define different classes for the different sizes you want
Define the sizes in CSS. Example:
.small {
height: 150px;
width: 150px;
}
.large {
height: 300px;
width: 300px;
}
Set the appropriate class on the template item:
var templateItem = document.querySelector("#regularListIconTextTemplate .regularListIconTextItem");
WinJS.Utilities.addClass(templateItem, "large");
Refresh the listview:
element.querySelector("#listView").winControl.forceLayout();