I need to create a button beside header text like this for sorting.
The requirements are:
the button and the header text should be in a group to be aligned together
when I click on the button up_arrow, the list will be sorted (in the picture it is not sorted :D), and the icon changes into down_arrow for sorting in the opposite order.
How can I do this?
If you're happy with the default indicator's look and behaviour the following code should be sufficient:
//Set up QTreeView, add model etc...
tree_view->setSortingEnabled(true);
QHeaderView* header = tree_view->header();
header->setSortIndicatorShown(true);
If you would like to customise the behaviour of the sorting, have a look at QSortFilterProxyModel.
To style the indicators you could perhaps use Qt's Style Sheet:
QHeaderView::down-arrow {
image: url(down_arrow.png);
}
QHeaderView::up-arrow {
image: url(up_arrow.png);
}
Related
I have a form which contains multiple input widgets like textbox, dropdown, textarea, suggestbox, radiogroup and multiselect etc
The input widgets are by default in disabled state.
When I click on a button all of them get enabled.
I would also like their text-color to change when I click on that button.
Note: I dont want to change the widget's label color. Only the value color.
How to do it in code for each? If you could give one example for each widget i.e textbox, dropdown, multiselect,radigroup etc
Looking for a generic solution.
Say you want to change your text box text red when you click the button. add a class to your styles tab like
.red{
color: red;
}
then say you have text box called textbox1 in the onclick event of your button put the following code:
widget.root.descendants.textbox1.styles = ['red'];
same for all the other types
To give you an idea I was testing with TextBox and worked but with TextAreas the Input or Value did not change, as well as the other multiselect and radioGroup options it did not take the css as expected.
When you click on the text box and from the CSS Page Style you start typing "." you will find different options for the widget selected. Using TextBox there is an Input option so you create a Global Style like this one.
.color Input{
color:teal;
}
This will change the Input of the TextBox, the same as if you do with Label, just use the same css class just change the option you want to modify. .color Label {}.
Also to apply the change to the widget just create a function like this one.
function textBoxColorChange() {
app.pages.NewPage.descendants.TextArea1.styles = ["color"];
}
And create an OnClick event to a button to make the change.
With the other widgets I don't have the time to keep testing but I hope this helps to get the idea. Greetings.
Haven't coded in years, and started to play around with Google App Maker last week. As the title suggests, I have a couple questions.
I'm trying to figure out if there's a way to dynamically change the color of a button upon click. Right now I have the button changing enabled status to false on click, and using CSS style to change the color of disabled buttons to gray. Is there a way to do this without disabling the button?
Is there a way to wrap text in a button? Right now I am overlaying a Label on the button with the correctly styled font, but would ideally like to have that text be from the Button, as the space the label takes up is not clickable.
Thanks in advance for any help!
add some lines to your page or global styles this
this should let you wrap text.
.app-Button {
white-space: pre-wrap;
}
Say you want to change your button blue when a Boolean value gets changed to "true" in your data source.
add a class to your styles
.blue{
background: blue;
}
then select your button and in the property editor>Display>styles click the drop down and select binding
set the binding to
=#datasource.item.**YourBooleanItem** === true? ['blue']:[]
Clarification there are two steps
Define a CSS class
Add the Class to the "styles" property of
your widget.
The Answer above uses a "binding" but also means that you've got to have an Item with this binding which you may not want.
I wanted a 'decimal' button to be orange when it was active. So on the Page I created a DecimalActive property. I used the onAttach event to set this property to false.
I created a CSS Class (local to the page) named Orange and Normal
.Orange {background:orange};
.Normal {background:white};
Then the following is my onClick
onClick(widget,event)
{
widget.root.properties.DecimalActive = !widget.root.properties.DecimalActive;
widget.styles = widget.root.properties.DecimalActive ? ['Orange'] : ['White'];
}
The challenge was figuring out exactly what AppMaker wanted in the styles []. I don't think it puts applied styles in this array. At least they didn't show up when I console.log(JSON.stringify(widget.styles);
I have verified that this does work (Dec 2019)
I think this answer is clearer and if someone wants to bind it the color change they still can.
I want to remove the blue highlighting that occurs when you mouse over the column header in a grid.Panel column header in ExtJS 4.2.2.
I have successfully changed every other aspect of the CSS using tdCls, baseCls, and manually adding my own classes. I have tried targeting the problem by making CSS classes with the ".x-header-over" or ".x-column-header-inner-over" names. However, these do nothing.
Essentially, I do not want the headers to be clickable or have any affordances that they are. I have turned mouseover off (ie made false) to remove this affordance on the grid itself, but it does not apply to the header.
One option would be to set sortable:false and menuDisabled:true like so in the column configuration itself:
{text: "Name", width:120, dataIndex: 'Name', sortable:false, menuDisabled:true}
This will disable the actions themselves. As far as the CSS highlight goes, if you want to do this for all grids in your application, you can set:
.x-column-header-over {
background:none
}
This will disable the hover background that Ext tacks on when you hover over the element.
Hope this helps!
I am using AnythingSlider, but I want to change its buttons to be displayed at the left side of images instead of at the bottom.
I believe have to change <ul>'s list-style:none; I tried changing in different positions, but I cannot figure it out how to change position of buttons to be on the left side and show vertically, something like this.
Here is my CSS
Check out this demo. It uses the appendControlsTo option to completely move the slider controls. You'll have to add your own css styling (see the demo).
$('#slider').anythingSlider({
// A HTML element (jQuery Object, selector or HTMLNode) to which
// the controls will be appended, if not null
appendControlsTo: $('#nav'),
// Go to https://github.com/ProLoser/AnythingSlider/wiki/Navigation-options#wiki-navigationformatter
// for details on how to set up this navigationFormatter option
navigationFormatter: function(index, panel) {
// This is the default format (show just the panel index number)
return "" + index;
}
});
For more information about the appendControlsTo option, check out the wiki documentation
On some of my pages I am setting focus on a first input element:
$(':input:visible:first').trigger('focus');
If the first input element is a checkbox or a radiobutton it receives a focus fine but that's not clearly visible, so it's label is not highlighted and screen reader doesn't recognize that, too, i.e. it doesn't read out that field. Is there any way using JQuery to make focus on checkbox or radoibuttons more pronounced?
Can't you assign a suitably clear css class to it?
$(':input:visible:first').focus(function() {
$(this).addClass("superClear")
})
.blur(function() {
$(this).removeClass("superClear");
}).focus();
Also, this might be helpful:
How do I style (css) radio buttons and labels?