I am trying to edit the css of a tree view model (list store), I have set everything up using this code and it works perfectly:
auto css_provider = Gtk::CssProvider::create();
css_provider->load_from_path("style.css");
Gtk::StyleContext::add_provider_for_screen
(Gdk::Screen::get_default(), css_provider,
GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
This code successfully loads in the css file and I can change certain properties of the treeview, ive tested padding and that works fine, it applies padding to each row in the liststore:
treeview.view {
padding: 20px;
}
or
treeview * {
margin: 10px;
}
But if I try to reference the name of the treeview, it doesn't work (no errors or warnings):
#m_TreeView { /* or m_TreeView.view */
padding: 20px;
}
My main goal is to apply a margin between each row, but this also doesn't seem to work (no errors or warnings), I want to apply a margin to each row but reference the specific name of the tree view as I would have multiple tree views in my application:
treeview.view {
margin: 20px;
}
Tried to access the rows and tried to access the list stores children (*):
treeview row {
margin: 10px;
}
+
liststore * {
margin: 10px;
}
But if I try to reference the name of the treeview, it doesn't work (no errors or warnings):
The name you need is not the variable name. To give a name for CSS styling, you can set it by calling
void Gtk::Widget::set_name ( const Glib::ustring & name )
Related
I'm using react-native-render-html library to display data from Django Rest Framework stored in RichTextUploadingField from django-ckeditor. As basic styling is working properly I have a problem with the <ul> tag - text is not centered with circle/square/number as shown in the image. I tried using renderersProps like:
<RenderHTML renderersProps={{ ul: { markerBoxStyle:{ paddingRight: 3, top: 5 }, markerTextStyle: { color: "red" } } }} />
But it works for specific text size. If I change the text size in style in Django admin, the element and text aren't centered again. Is there any option on how to fix it or what causes the problem?
You could add a custom CSS class to unordered list items only. Then apply your styles to that CSS class.
// this function goes through every list item in <ul> only and adds your custom class ('ul-li' in my case)
const onElement = (el) => {
const { children, name } = el;
if (name === 'ul' && children && children.length) {
children.forEach(listItem => listItem.attribs = {class: 'ul-li'})
}
}
// define your styles for your custom class
const classesStyles = {
"ul-li": {
lineHeight: '21px', // for me adjusting lineHeight did the job
}
}
// in your JSX
<RenderHtml
source={source}
contentWidth={width}
tagsStyles={tagsStyles}
... // other props you may have
domVisitors={{onElement}} // first alter your html
classesStyles={classesStyles} // then apply styles
/>
Sources:
classesstyles
onElement
I need to create a button which may contain two icons and two text label to display (on screenshots - every line such as "Email" or "Connection" is a standalone button).
From what I understood - I can't override QPushButton or QAbstractButton and I have to implement my own custom widget in order to achieve such layout. So far I'm trying to make such buttons with Qt Designer and change style of the widget using QSS and dynamic properties but for some reason stylesheet is not changing when I press the button. My code:
namespace ui
{
ViewEntryPushButton::ViewEntryPushButton(QWidget* parent)
: QWidget(parent)
, ui(new Ui::ViewEntryPushButton)
{
ui->setupUi(this);
}
ViewEntryPushButton::~ViewEntryPushButton()
{
delete ui;
}
void ViewEntryPushButton::mousePressEvent(QMouseEvent* event)
{
this->setProperty("pressed", true);
this->style()->unpolish(this);
this->style()->polish(this);
this->update();
}
void ViewEntryPushButton::mouseReleaseEvent(QMouseEvent *event)
{
this->setProperty("pressed", false);
this->style()->unpolish(this);
this->style()->polish(this);
this->update();
}
} // namespace ui
And my style sheet which I apply to the highest object in Qt Designer object view:
#ViewEntryPushButton {
background-color: transparent;
padding: 5px;
margin-left: 5px;
}
#ViewEntryPushButton[pressed="true"]{
background-color:rgb(51, 0, 255);
border-width: 3px;
border-color: rgba(255, 255, 255, 20);
border-style: inset;
}
So my questions:
1. Is my approach right or it is possible to subclass QAbstractButton and implement it like this?
2. What am I doing wrong with style sheets in this case and why style of the widget is not changing when I press my mouse?
Did you tried you change stylesheet using the setstylesheet function like this in the constructor. Well this is just another way of doing thing.
Button.setstylesheet("")
Ended up using custom widget with QStackedLayout and transparent button above all other layers, I think it is the best approach.
I created necessary labels on "low" layers of the layout and just added a button above them all with background:transparent; property in style sheets.
Also StackingMode should be set to StackAll in the layout.
I have been asked if I can modify my oracle apex interactive grid to make the row selector column wider, bold and add a title is possible. I know how to do this for a column but I am not sure it is possible for an interactive grid row selector. Any help or an example would be helpful.. Thank you
Wow, this was a tricky one. I think I've figured it out (many thanks to John Snyders!). Assuming the IG has an id of 'emp', the following should work:
Add the following CSS to the page's Inline property under CSS. This will handle the styling of the checkbox, the checkmark in the checkbox, and it will show the column's header which is hidden by default. You can remove the #emp selector if you want to target all IGs on a page.
/* Style the box */
#emp .u-selector {
border: 2px solid #000;
padding: .5px;
}
/* Style the check in the box */
#emp .u-selector:before {
font-weight: 900;
color: #000;
}
/* Show the row selector column header */
#emp .a-GV-headerLabel {
position: relative;
}
#emp .a-GV-table th {
white-space: normal;
}
Next, add the following JavaScript code to the page's Execute when Page Loads property under JavaScript.
var igRegionId = 'emp';
var widgetInst = apex.region(igRegionId).call('getViews').grid.view$.data('apex-grid');
var orgRefresh = widgetInst.refresh;
widgetInst.refresh = function() {
orgRefresh.call(widgetInst);
$('.u-vh.a-GV-headerLabel').text('Hello World!');
};
widgetInst.refresh();
Finally, add the following JavaScript to the IG region > Attributes > JavaScript Initialization Code. This will resize the column as needed:
function(config) {
config.defaultGridViewOptions = {
rowHeaderWidth: 100
};
return config;
}
I have already tried to use disabled and !enabled but it doesn't work.
Here is my QSS code :
QPushButton {
background-color:#44c767;
border-radius:5px;
border:1px solid #18ab29;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
text-decoration:none;
padding-right:10px;
outline: 0;
}
QPushButton:hover:!pressed {
background-color:#54d777;
}
QPushButton: pressed {
background-color:#30b252;
}
QPushButton: disabled {
background-color:#ff0000;
}
QPushButton: !enabled {
background-color:#ff0000;
}
The documentation refers to a disabled pseudo state but without providing more information about it.
Edit
I am using QT5.3
Remove all spaces after colons (really ALL - because it invalidates the further css text) and it will work:
QPushButton:disabled {
background-color:#ff0000;
}
Actually, both disabled and !enabled works.
CSS
.horizontalTranslate {
-webkit-transition: 3s;
}
.secondClass {
background: red;
}
HTML
<div class='box'></div>
JS
var box = document.querySelector('.box');
box.addEventListener('webkitTransitionEnd', function(evt) {
alert('Finished transition!');
}, false);
function transitionBox() {
// this works
box.className = 'horizontalTranslate';
// this does not work
// box.className = 'secondClass horizontalTranslate';
}
setTimeout(transitionBox, 100);
Why does the transition event not fire when two classes are added rather than one? I've also tried chaining my CSS selector, a la .secondClass.horizontalTranslate { ... }.
The reason is that box.className = 'horizontalTranslate'; is actually removing styling, causing the CSS transition to actually happen. But when I set box.className = 'secondClass horizontalTranslate';, the styling of the DOM node is not changing and no event is fired.
Another way to write transitionBox is this:
function transitionBox() {
box.classList.add('horizontalTranslate');
box.classList.add('blue');
}
If blue changes the styling of box, this works too.