I looking for a seating plan generator to add to my site. My seating information needs to come as an object. And I want to render the seating plan according to that. Is it possible to render something like below?
I have tried react seat picker too. but spaces between seats are not taken
the issue was in my CSS file commenting the blank attribute will fix the error.
div.seat {
background-color: green;
}
div.seat--reserved {
background-color: rgb(209, 7, 7);
}
div.seat--selected {
background-color: blue;
}
.seat-picker {
margin: auto;
}
.seat-picker__row {
}
.seat-picker__row__number {
}
/* div.blank {
display: none;
} */
Related
So I'm having an issue with Ace editor where certain autocompletions have doubled icons like so
I am creating a custom autocompleter like so:
const customCompleter = {
identifierRegexps: [/[a-zA-Z_0-9\.\$\-\u00A2-\uFFFF]/],
getCompletions: (
editor: Ace.Editor,
session: Ace.EditSession,
pos: Ace.Point,
prefix: string,
callback: Ace.CompleterCallback
): void => {
var completions: any[] = [];
completions.push({
value: "custom",
className: "iconable"
});
if (prefix == "custom.") {
RList = ["custom.Base64Decode",
"custom.AnotherMethod",
"custom.Method3",
"custom.TestingFunction"
];
RList.forEach(function (w) {
completions.push({
value: w,
className: "iconable"
});
});
}
callback(null, completions);
}
}
langTools.addCompleter(customCompleter);
So when I'm pushing to completions i add a className of "iconable". The CSS file then looks like this:
.ace_iconable:after {
font-family: "Font Awesome 5 Free";
content: "\f1b2";
display: inline-block;
padding-right: 10px;
padding-left: 10px;
vertical-align: middle;
font-weight: 900;
}
Not sure why this would be the case, but if anyone has run into this before please let me know!
Thanks
Looks like you can actually just change the css a touch.
You can use .ace_iconable:last-child:after and it will stop the icon being duplicated.
Looks like multiple spans are used when the autocomplete is picking up on a completion which starts halfway through a word. (E.g. User types "a", autocomplete suggests "bad")
This means that the icon would be displayed twice.
I have data and each row/user is formatted something like this:
{
first: <string>
active: <bool>
}
I wish to apply a background color to the entire row if active property is false. Currently I have this, to try to get style applied to every row
rowClassName = (rowData) => {
return {'greyed' : true}; //will be {'greyed': !rowData.active} but this is for demonstration
}
<DataTable value={this.props.users.toJS()} //in render
selectionMode="single"
selection={user}
onSelectionChange={this.props.dispatch.editAccount}
rowClassName={this.rowClassName}
>
<Column field="first" header="First" filter={true}/>
</DataTable>
.greyed{ //in css
background-color: red;
}
which is only applying the style to every other row (see picture)
Any ideas on what I should try? i posted this question on the primeFaces forum 3 days ago and never got a response: https://forum.primefaces.org/viewtopic.php?f=57&t=58605
I just ran into this problem while trying out PrimeReact. My issue turned out to be that the default selector that sets the row background was more specific than my own.
This is the default:
body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
background-color: #f9f9f9;
}
so just having
.specialRowColor { background-color: 'blue' }
is not specific enough to override the default. Instead I needed to do this in my css:
.p-datatable .p-datatable-tbody .specialRowColor {
background-color: blue;
}
Solved by overriding the css like this
.ui-datatable tbody > tr.ui-widget-content.greyed {
background-color: #808080;
}
i want to customize the color of md-switch without writing alot of angular/js if possible
here how i want it
i was able to get the first , mainly becuse the main theme is solid gren and i used this to make the body of the switch light green
<md-switch ng-change="$ctrl.updateAsset($ctrl.asset,
'disabled')" ng-model="$ctrl.asset.disabled"></md-switch>
md-switch.md-checked .md-bar {
background-color: rgb(212, 255, 186); //light green
}
how would i change the head color (round)? how would i change the color of both head and body of the switch when the switch is off?
What you call the "head" is an element with class md-thumb; the bar, as you note, has class md-bar. Both are colored by their background-color property.
The md-checked class is active when the switch is "on".
md-switch .md-thumb {
background-color: darkgrey;
}
md-switch .md-bar {
background-color: lightgray;
}
md-switch.md-checked .md-thumb {
background-color: darkgreen;
}
md-switch.md-checked .md-bar {
background-color: lightgreen'
}
Obviously you should use the exact colors you want.
You could simplify the above if you're using SASS or LESS, and you may want to look at custom theming if you're planning to change more than this one component.
Edited to add:
To reverse the direction, use the transform property, e.g.
md-switch .md-thumb-container {
transform: translate3d(100%, 0, 0);
}
md-switch.md-checked .md-thumb-container {
transform: translate3d(0, 0, 0);
}
Add vendor prefixes as necessary for your browser support requirements.
I'm going to create a less code that will give different background-color to element depending on it's class. This will be for list of attachments, so class name is based on attachment extension.
I do support some typical extensions:
.label{
&.label-pdf{
background-color: #c70000;
}
&.label-doc, &.label-docx, &.label-odt{
background-color: #157efb;
}
&.label-xls, &.label-xlsx, &.label-calc{
background-color: #069e00;
}
&.label-ppt, &.label-pptx, &.label-odp{
background-color: #9e3c15;
}
&.label-jpg, &.label-png, &.label-gif, &.label-png, &.label-ttf{
background-color: #95009e;
}
}
but the problem is with some unusual extensions, or even files like: jpg, jpeg, doc, docx, this is why I would like to use expression from CSS. In pure CSS I could use:
.label.[class^="label-"]{
background-color: rgba(0,37,100,0.4);
}
And put this code at the beginning so other classes could override this one.
But unfortunately this sign ^ (I suppose) is breaking my Less compilation. I have been trying to do something like this:
~".label.[class^='label-']{
background-color: rgba(0,37,100,0.4);
}"
AND
.label{
&.~"[class^='label-']"{
background-color: rgba(0,37,100,0.4);
}
}
But still not working. So is it possible to use this selector?
It is not working because your syntax seems to be wrong and not because of any issues with Less.
The below code is invalid because of the . present between the label and the class^="label-"]. Attribute selectors do not require a . before them. It is necessary only for class selectors.
.label.[class^="label-"]{
background-color: rgba(0,37,100,0.4);
}
The correct version would be the following:
.label[class^="label-"]{
background-color: rgba(0,37,100,0.4);
}
and so in Less terms, if you want nesting, it would be as follows:
.label{
&[class^='label-']{
background-color: rgba(0,37,100,0.4);
}
}
.label.[class^="label-"] { /* this won't work */
background-color: rgba(0, 37, 100, 0.4);
}
.label[class^="label-"] { /* this will */
color: green;
}
<label class='label-a label'>Label A</label>
<label class='label-b label'>Label B</label>
Another thing to note is that the ^= is a starts with selector and so when your element has more than one class, the class that resembles label- should be the first class in the list and not the label. If we make the label as the first class then (like seen in below snippet) it won't work because then the class doesn't start with label-.
If the first class in the list is indeed label then you should consider using the *= (contains) selector. But be careful when using the contains selector because it will sometimes select unintended elements like those with class label-not, not-label etc.
.label.[class^="label-"] { /* this won't work */
background-color: rgba(0, 37, 100, 0.4);
}
.label[class^="label-"] { /* this won't too */
color: green;
}
.label[class*="label-"] { /* this will */
border: 1px solid green;
}
<label class='label label-a'>Label A</label>
<label class='label label-b'>Label B</label>
I have same problem. I use this in less file.
[class^="customForm-"] { ... }
But for my HTML it does not works.
<div class="form form-01 customForm-radioList">...</div>
The problem is in tha fact that string "form form-01 customForm-radioList" does not starts with "customForm-" it starts with "form".
Solution
Use contains selector W3 school.
[class*="customForm-"] { ... }
I have a list of html items and I need to select every 3 over 3. (1,2,3,7,8,9,13,14,15 e.t.c)
Please suggest me, is it possible to do using css nth-child selector and what formula should be in parentheses? Or only way is JavaScript?
Hooray! I've found the solution! Thanks for your answers!
My version is:
.item:nth-child(1+6n),
.item:nth-child(2+6n),
.item:nth-child(3+6n) {
/* styles */
}
Are all the elements of the same type? You might be able to use :nth-of-type(3). :nth-child selects children of children too if I am not mistaking.
What is your scenario(purpose)? There are many way to archive it ~
Here is one way use override technique:
li:nth-of-type(n+13) {
color: green;
}
li:nth-of-type(n+10) {
color: red;
}
li:nth-of-type(n+7) {
color: green;
}
li:nth-of-type(n+4) {
color: red;
}
li:nth-of-type(n+1) {
color: green;
}
I have write a simple demo with SCSS here:
https://jsbin.com/gihuki/1/edit?html,css,output