I'm just now becoming familiar with the noUiSlider and I googled to find examples of what exists out there with different ways to use it. Unfortunately most were adding custom images instead of adding text.
Does anyone know where or have some examples of how to design the handle in a unique way using the css or js files?
All handle styling is on the class .noUi-handle. The 'carving' on the handle is done using the :before and :after pseudo elements. You could use these elements and their content property to display text.
.noUi-handle {
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #FFF;
cursor: default;
box-shadow: inset 0 0 1px #FFF;
}
.noUi-handle:after {
content: "Some words here"; /* Add something like this */
}
If the handle text has to be updated with the slider value, you could set the value as an attribute on the slider as such:
slider.noUiSlider.on('update', function(values, handle) {
this.target.setAttribute('data-value' + handle, values[handle]);
});
And then style the handle using that attribute:
[data-value0="5"] .noUi-handle:after {
content: "Text only for value 5";
}
Related
I have a QTableWidget with 3 columns. 2 of the columns have some text in them, but one of them is empty and I want it to have a background color. Also I want the cells to have borders.
If I do
int i = 0;
foreach (tableData el, data) {
//setting the first cell
ui->eventTable->setItem(i, 1, new QTableWidgetItem);
//ui->eventTable->item(i, 1)->setBackground(el.severityColor);
//ui->eventTable->item(i, 1)->setBackgroundColor(el.severityColor);
ui->eventTable->item(i, 1)->setData(
Qt::BackgroundRole,
QBrush(el.severityColor)
);
//setting the third cell
++i;
}
everything works as expected.
But if before this code I try to add a border with
QString style(
"QTableWidget::item {"
"border: 1px solid white;"
"}"
);
ui->eventTable->setStyleSheet(style);
the background is not set.
I tried with setBackground(), setBackgroundColor() (even though it is deprecated) and setData() as seen in the code, but the result is the same.
Also I tried setShowGrid(true) insted of the above stylesheet, but the border didn't show.
You can reproduce this by creating a table with 1 row and 1 column and trying to set the background of the cell, and then adding the stylesheet for a border.
Am I missing something? What else should I try?
As an alternative, can I target specific rows/cells in the styles, so I can build a stylesheet string that does what I want?
Edit:
I can have another styles in QTableWidget::item and they are applied, the problem is when I have a border.
I also tried to write the border style as:
border-width: 1px;
border-style: solid;
border-color: white;
but still no luck.
Also if I set the background from styles, it works. It doesn't work if I set it in code.
Here are the properties you need to get your table styled appropriately. Note that gridline-color is the property that defines the borders of the items, which is defined in QTableView and not QTableView::item.
QTableView
{
color: {color};
border: 1px solid {color};
background: {color};
gridline-color: {color};
}
QTableView::item
{
background: {color};
}
Obviously you would replace {color} with the appropriate colors for each property.
I guess you need to style the background and border properties
QTableView {
background-color : none;
}
QTableView::item {
border: 1px solid white;
background-color : none;
}
I am working in extjs. I want to show different records with different colors. I am loading store and retriving records in callback function
taskStore.load({
url : URL_TASK,
callback: function(records, operation, success) {
if(success) {
for(var i = 0; i < records.length; i++) {
records[i].set('Cls', 'assignedTasksCls');
}
}
}
});
For each record i am setting Cls= "assignedTasksCls", which i have defined as,
.assignedTasksCls {
background-color: #51c063;
border: 1px solid #8cd191;
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(150, 150, 150, 0.5);
height: 90%;
left: -6px;
line-height: 7px;
position: relative;
}
I want to change this class's background-color property as need to set different colors to differnt records. I can get this css via= records[i].getCls();
So how to update "background-color" of this class with each record?
The way of changing the background-color is
via JQuery
$("#YourSelector").css("background-color", "yellow");
Via Extjs
suppost you have
<div id="div1">My Div 1</div>
then
Ext.onReady(function() {
Ext.get('div1').setStyle('color', 'red');
});
for Class way use
records[i].addCls("assignedTasksCls");
records[i].removeCls("assignedTasksCls")
nice example from here
also, I found good example might be usefull for your case, please check from here
Please go through the following links,
extjs change grid cell background based on value
changing background colors of grid rows dynamically
Change background color of row
See this example, it does exactly what you need.
With jQuery one can rescind an earlier CSS setting by passing an empty string as the "setting."
E.g. After something like:
$('#foo').css('display', 'none');
...the expression:
$('#foo').css('display', '');
will essentially cancel the earlier setting.
Is there an analogous way to cancel an earlier setting in CSS?
For example, suppose I set some CSS property for an element X, how can I specify the unsetting of this same property in an X:hover directive?
Set the property to a default value (which may be "inherit"). This is probably more looking up what default values you're using, and organization, than you're asking for.
X { outline: 1px solid red; }
X:hover { outline: none; }
/* this is different than not setting { outline: 1px solid red; } on X:hover! */
Or you can not select X:hover when setting it in the first place.
X:not(:hover) { outline: 1px solid red; }
I am a newbie to CSS.Look at the pic:
http://i.stack.imgur.com/Y9X6K.jpg
Why img{border:2px,solid,red;} on the right is line-through,and in the browser the image hasn't border.
Anybody can tell me the reason?
Remove the commas because, your css statement is incorrect, hence the warning in the inspector:
img{border:2px solid red;}
A strike through a css rule in a developer tool such as in chrome means the rule is not being applied. In your case this is because your css is invalid there shouldn't be commas i.e
img { border:2px,solid,red; } /* invalid css */
img { border: solid 1px red; } /* valid css */
this expands to all shorthand css rules i.e
p { margin: 0 10px 0 10px; }
It can also mean it is being overridden somewhere else you can use !important at the end of a declaration to force the style i.e
img { background: red !important; }
Just remove those commas and make your css like this
img {
border:2px solid red;
}
multiple commas are used for define multi classes css.For more information check this link
I can't find any way to put a line between items in my list. Am I missing something?
A style sheet would be easiest, for example:
myListWidget->setStyleSheet( "QListWidget::item { border-bottom: 1px solid black; }" );
You'll want to look at some of the style sheet documentation
2 improvements to the accepted answer:
Use the color palette of the widget to achieve a uniform look across different systems.
It is necessary to restore the item:selected style when restyling item
E.g. like this:
const auto & palette = tableWidget.palette();
tableWidget.setStyleSheet(QString("QListWidget::item { border-bottom: 1px solid %1; } QListWidget::item:selected { background-color: %2; color: %3; }")
.arg(palette.midlight().color().name(),
palette.highlight().color().name(),
palette.highlightedText().color().name()));
Here you can see that the separator lines and selection color fit the default style of the widget: