I'm setting up Algolia instantsearch.js and I want to replace the default search box submit button icon.
The docs show to style the icon color using the widget class name, but I can't figure out how to replace the svg icon with another svg.
This is the default code that Algolia generates for the submit button icon:
<button class="ais-SearchBox-submit" type="submit" title="Submit the search query."><svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 40 40"> <path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"></path> </svg></button>
Widgets in Algolia's InstantSearch.js come with a predefined rendering. You can style them, but if you're unhappy with the actual rendering (i.e. what HTML is generated for a widget) then you have to create your own.
When it's about customizing an existing widget, which is your case, there's a smart mechanism they provide that is called "connectors".
They've basically decoupled the widget's behaviour/logic from its rendering. Different connectors provide the logic for each search component and widgets bring a UI on top of those connectors.
So in your case, you need to look at the documentation on connectors and go ahead with using a connectSearchBox connector to create your own searchBox widget.
Which InstantSearch are you using? In the React InstantSerach v5 you can replace the image in the default SearchBox without creating your custom Searchbox:
<SearchBox
reset={<img src="/reset.png" alt=""/>}
/>
Here is the supporting documentation:
https://www.algolia.com/doc/api-reference/widgets/search-box/react/#widget-param-submit
Related
I have a form that has a combination of fields of various types.
But it also has some static text intermixed.
I would like to render all the fields (static text and interactive) using the same visual layout.
I, essentially, want <TextField variant='standard' disabled={true}/> but not greyed out, and not disabled.
I could just use a pair of <Typography> tags, but I'd rather not duplicate the implementation that's already available in material UI.
I am using latest material-ui/pickers v4-alpha7.
Is is possible to show action buttons for the DateRangePicker. I know that they are shown by default for MobileDateRangePicker but can not find the solution for the regular DateRangePicker.
function BasicDateRangePicker() {
const [selectedDate, handleDateChange] = React.useState<DateRange>([null, null]);
return (
<DateRangePicker
startText="Check-in"
endText="Check-out"
value={selectedDate}
onChange={date => handleDateChange(date)}
renderInput={(startProps, endProps) => (
<>
<TextField {...startProps} />
<DateRangeDelimiter> to </DateRangeDelimiter>
<TextField {...endProps} />
</>
)}
/>
);
}
Br, Igor
From their current docs:
Date/Time pickers experience is extremely different on mobile and desktop. Here is how components will look on different devices. The default DateRangePicker component is responsive, which means that Mobile or Desktop mode will be rendered according to device viewport.
You can either use the DateRangePicker - which will be responsive, or decide that you prefer to force specific behaviour by using MobileDateRangePicker or DesktopDateRangePicker.
Source: https://mui.com/components/date-range-picker/#responsiveness
There is no prop that you can pass to the DateRangePicker to force using the mobile version in order to show the buttons (you can just use the MobileDateRangePicker if you need it to work this way).
Cannot mention minimum value and need to customize the arrow button
<NumericTextBoxComponent
validateDecimalOnType={true}
format='n2'
placeholder="Applied"
enabled={this.props.overApplied}
change={this.props.handleOverApplied}
value={this.props.added.value}
/>
Query-1: Setting minimum value
If you want to set minimum/maximum values in NumericTextBox, Please refer to the below range validation online sample,
<!-- Initialize Numeric Textbox -->
<ejs-numerictextbox id="numeric" min="10" max="100" value="15"></ejs-numerictextbox>
Sample : https://ej2.syncfusion.com/aspnetcore/NumericTextBox/RangeValidation#/material
Query-2: Customizing arrow buttons
To customize the arrow buttons to different icons, you can refer to the below how-to documentation page,
https://ej2.syncfusion.com/aspnetcore/documentation/numerictextbox/how-to/customize-the-spin-buttons-up-and-down-arrow/
Note:
We assumed that you are using ASP.Net Core and Provided the above information. If you are using different platform, the same links are available in that platform itself.
Is there any way to decoratively define the List width in the HTML.
I know I can do it
var autoComplete = $("#autoComplete").data("kendoAutoComplete");
// set width of the drop-down list
autoComplete.list.width(400);
but I want to do it in HTML only.
I have already tried:
data-list-width="400"
When you create an autocomplete in Kendo UI, it creates a second HTML element (a wrapper) for the drop down options. This element is given as id the id of the original one plus -list.
You can define a CSS style for this newly created wrapper as:
#autocomplete-list {
width: 300px !important;
}
You need to use !important otherwise the value calculated by Kendo UI has prevalence over yours.
Example in this JS Fiddle: http://jsfiddle.net/OnaBai/n55w8/
I got the answer from telerik today:
Currently, the width of the popup element can be set only programatically.
Salam!
The .width(400) is not a configuration setting, it is jQuery width method, so you can't set width for your autocomplete decoratively.
If you use MVVM framework in your project, maybe Custom binding help you to add a custom binding like <input id="autoComplete" data-bind="listwidth: 400" /> for your autocomplete.
See this demo if you want to use custom binding.
Is there any way to highlight the CDATA component in a .mxml file?
I have Eclipse and Flash Builder 3.5 and the flex components are highlighted, but the CDATA isn't. It contains action script.
Sorry, I meant syntax highlighting. For example:
<mx:Canvas ... >
<mx:Script>
<![CDATA[
private function foo():void {}
]]>
</mx:Script>
I don't think so, but your Outline View should allow you to click on any script tags to highlight them. Unfortunately you can't give them different ID's, so splitting your code among different blocks doesn't help much.