Semantic React Dropdown with search prop prevents styling - semantic-ui-react

I'm changing the color of a dropdown's caret with
.myclass .ui.dropdown {
color:transparent!important;
}
This hides the caret, as expected, however not when I send the prop 'search' to the Dropdown component.
Has anyone faced this?
I've tried these alternatives
.myclass .ui.dropdown.search
.myclass .ui.search.dropdown
.myclass .ui.search
I also need to change it this way, rather than with icon=null, because I want to show the caret on hover with
.myclass .ui.dropdown:hover {
color: white!important;
}
Thanks in advance.

Answering my own question, shouldn't have given up so quickly. Leaving the post up for others:
SOLUTION:
.myclass .ui.dropdown i {
color:transparent!important;
}
.myclass .ui.dropdown:hover i {
color:white!important;
}
Although this doesn't explain why the search prop changes things, it works.

Related

How to invert the legend's on-click--behavior on XY chart in amcharts4?

I have this issue. The default behavior of XY amchart is to load all data, and on legend click - hide the current selection. Is it possible to revert this behavior?
Like, if I select a legend- to hide all the other elements from the chart and leave the current selection.
The grammar may be strange with the help of a translator because of the weak English.
chart.legend.itemContainers.template.togglable = false;
The code above deactivates the basic behavior of the legend.
chart.legend.itemContainers.template.events.on("hit", function(ev) {
let targetName = ev.target.dataItem.dataContext.name;
chart.series.each(function (item) {
if(targetName != item.name){
item.disabled = true;
}
});
});
The code above is an event when you click the legend.
I don't know if it's the answer you want, but I wrote it down...

How to relate to button created in SFML-IMGUI?

Hello I want to create some buttons with SFML-IMGUI and after that relate to them in some way for example to change text. How can I do this? I dont see any ID attribute. I create button using this code.
ImGui::Begin("Button");
Button("Click me");
End();
I dont see any example in documentation :/
Imgui buttons don't use any id or callbacks. Instead, the ImGui::Button("Clikc me") will return a boolean which is true if the button was clicked. (here is an example)
ImGui::Begin("window");
if (ImGui::Button("Click me")) {
// onButtonClick();
}
ImGui::End();
for more read https://github.com/ocornut/imgui/tree/master/docs and seeimgui_demo.cpp it has some better examples on how to use it.

SwiftUI: append menu entry to group "View" after "Enter Full Screen"

I'd like to append a new menu entry right below "Enter Full Screen", but I am failing to find the right CommandGroupPlacement property.
CommandGroup(after: .<what needs to be put here??>) {
//my buttons here
}
Attempting to override "View" results in just another group with the same name (see image).
CommandMenu("View") {
//add button here
}
Shoutout to Majid Jabrayilov for his blogpost on this: https://swiftwithmajid.com/2020/11/24/commands-in-swiftui/
To find a solution to my above issue though I still had to think a bit around the corner–what does work is this:
CommandGroup(before: .toolbar) {
Button("Foo") {
}
}
This works, because the toolbar menu entry is located within "View" (even thought I don't have a toolbar in my app, the placement still works nonetheless...)
You said you were looking for the proper CommandGroupPlacement so for your case (relative to full screen mode), you would technically want CommandGroupPlacement.sidebar. CommandGroupPlacement.toolbar works because toolbar options live in the View menu, though you have none set.
/// Example in a CommandsBuilder
CommandGroup(after: CommandGroupPlacement.sidebar) {
Button("New View Action", action: { print("After sidebar menu options") }).keyboardShortcut("s", modifiers: [.command, .option, .control, .function]
}
This should also come in handy for others. The Apple documentation that corresponds to this: CommandGroupPlacement

Flexigrid + IE9 height:auto

The problem is very elemental.
If you go to http://flexigrid.info/ with IE9, and explore the 'example 2' section, and the columns resize over the visible place, that it will activate the horizontal scrollbar. And you hover the rows, you experience growing up the Flexigrid size. I don't experience IE7 and IE8, only IE9. This problem has by height: auto configurate. I didn't find solution yet. Please help me!
Actually, the solution that #Szenti posted will only work for 1 flexigrid on the page, if there are multiple, it will only takes the height value of the 1st bDiv it founds and apply the fix to all.
My revised version I think will apply to situations where there are many flexigrids on the page at one time.
ie9Fix: function() {
var bDivH = $(this.bDiv).height();
var bDivTH = $('table', this.bDiv).height();
if(bDivH != bDivTH && p.height=='auto') {
$(".bDiv").css({height: bDivTH + 18});
}
},
I had this same issue. Thanks #Szenti for the Answer, however, once this was in place I then had flexigrid resize issue when the results in the table where regenerated via AJAX. This occured in latest Chrome, Firefox and IE7/8.
So I added a (some would say dirty) browser sniff into the mix.
Global var:
var ie9 = false;
if ($.browser.msie && parseInt($.browser.version, 10) == 9) {
ie9 = true;
}
Then where #Szanti's method is called I just wrap it in:
if (ie9) {
this.ie9Fix();
}
Now works a treat in all browsers.
The solution:
You have to edit the flexigrid js. Append the g object with this:
ie9Fix: function() {
if($(".bDiv").height() != $(".bDiv table").height() && p.height=='auto') {
$(".bDiv").css({height: $(".bDiv table").height() + 18});
}
},
You have to call ie9Fix function in 2 places
In the g.dragEnd() function last row (this.ie9Fix();)
In the g.addRowProp() you have to write a new event:
.mouseleave(function(){
g.ie9Fix();
})
That's it!

QML text scroll

I am using C++ and QML to create a nice interface.
I would like to have a "console view", where plenty to text is printed through time.
However, when the text of a text item or webview content grows, the view does not "scroll down".
How can I make the text on the bottom of the text/webview item always stay visible ?
I have tried playing with flickable and the_webview.evaluateJavaScript + window.scrollTo , but I could not get them to do what I want.
This seems a fairly simple piece of UI, but I am having serious troubles to do it with QML.
Thanks for you answer.
Yeah I'd use a Flickable containing a Text object. Whenever you add text to the Text, check its paintedHeight, and adjust the Flickable's contentY if it's got any bigger.
Maybe you should consider using a ListView and have the messages as items in the view. Then you could use ListView::positionViewAtEnd.
funkybro answers inspired my final solution:
function scroll_to_bottom() {
flickabe_item.contentY =
Math.max(0, webview_item.height - flickabe_item.height);
return;
}
Thanks !
My solution to this was to vertically flip both the content and Flickable. This way the text ends the right way up and is naturally anchored to the bottom of the flickable area.
It might be more efficient too since the transform is handled by OpenGL behind the scenes.
Flickable {
id: flick
anchors.fill: parent
contentHeight: text.height
Text {
id: text
width: parent.width
transform: Scale { yScale: -1; origin.y: text.height/2 }
}
transform: Scale { yScale: -1; origin.y: flick.height/2 }
}