I was trying to remove the line after title (highlighted in attachment) when collapse, I am not able to do it.
I tried to use the border:0, which removes only the border on expand. Is there a way to remove this?
{
xtype : 'fieldset',
border : 0,
title : '<b>Starting point</b>',
name : 'startingPt',
items : [{...}]
}
I am using extjs 4.2 On FF
Looks like it can't be done through javascript. as the border-width is given important tag in scss file, it is overriding the 0. It has to be done through additional css.
Below snippet FieldSet.scss file
{$prefix}fieldset-collapsed {
padding-bottom: 0 !important;
***border-width: 1px 1px 0 1px !important;***
add the below css:
.x-fieldset-collapsed{
border-width:0 !important;
}
Related
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";
}
nav {
padding : 10px 10px 10px 10px;
background-image : url("This PC/Pictures/motivationportfolio.jpg");
}
li
{
padding : 10px;
}
div
{
text-align : justify;
margin : 20px;
}
p
{
text-indent : 15px;
}
This code is not inserting background image to my navigation bar.you can check the entire code in http://codepen.io/Supreja/pen/zKERvd.
I have also tried giving the online URL . Even that doesnot work. I am working online ,so how to know my current directory ?
That should work just paste a valid URL:
For instance:
background-image : url('http://www.verypdf.com/wordpress/wp-content/uploads/2011/11/clip_image00455.jpg');
well , you need to know where is the path of your image first.
for example you have images folder and CSS folder .
and this style is in the CSS folder , then the path should be like that
../images/iamgename.jpg
this two dots (..) make you back one step then enter images folder and choose your image
url("../Pictures/motivationportfolio.jpg");
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;
}
FriendFeed offers a widget with some CSS customization possible. But it seems you can't remove the border (the blue big one around all cotent)? The widget has a URL like
http://friendfeed.com/embed/widget/FOOBAR?v=2&num=30&hide_logo=1&hide_comments_likes=0&hide_subscribe=1
where FOOBAR is a user name.
In the CSS try for v3:
#friendfeed.widget { border: 0 !important;}
or this for v2:
.friendfeed.widget { border: 0 !important;}
If you also want to remove the logo at the top, add:
#friendfeed .logo img { display: none; }
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