Default search not working if I use select with mode multiple in a loop. other all working fine. anything wrong with my code?
for (let i = 0; i < items.length; i++) {
<Select
mode="multiple"
size={'large'}
style={{ width: '100%' }}
placeholder={<Icon type="search" style={{ fontSize: 13 }} />}
onChange={this.handleChange}
>
{this.createOptions(items[i].default_values)}
</Select>}
Briefly expline - I am trying to create a filter block with different fields like select, input etc with from a JSON data. In this scenario, I need to iterate both select box and options based on the data. One thing I noticed that the last select box from the iteration working as expected, so I think I need to bind the options along with an appropriate select box or some approaches like this, but I don't know how to do this.
I think what you need to loop are the <options /> tags, not the <Select />
<Select
mode="multiple"
size={'large'}
style={{ width: '100%' }}
placeholder={<Icon type="search" style={{ fontSize: 13 }} />}
onChange={this.handleChange}
>
for (let i = 0; i < items.length; i++) {
return this.createOptions(items[i].default_values)
}
</Select>
Related
I am making a react native health app in which the user can select tags to describe certain symptoms they are facing. I am trying to let the user create their own tags, at the moment the user can enter tags but cannot select them. Is there a way to allow them to select text inputs?
I have already tried wrapping touchable opacity around it but when I press the text input the cursor just focuses on the word (wanting me to edit the word).
I have also tried editable = {false} this removes the ability for the user to enter a text input completely. Is there a way to allow the user to input a value once and then disable the text input (non-editable)?
Or If I used Button instead of TextInput is there a way for the user to enter the title of the button so it can act as a tag?
Here is how I have allowed users to create text inputs
addTextInput = (index) => {
let textInput = this.state.textInput;
textInput.push(
<TextInput
style={styles.textInput}
onChangeText={(text) => this.addValues(text, index)}
editable={true}
/>
);
this.setState({ textInput });
}
removeTextInput = () => {
let textInput = this.state.textInput;
let inputData = this.state.inputData;
textInput.pop();
inputData.pop();
this.setState({ textInput, inputData });
}
and this is what my current tags look like:
on the picture when the user presses the plus a new tag/TextInput is created, what I want is when the user presses it, it should be able to change color or the like.
here is the code for the plus button:
<View style={{
flexDirection: 'row',
flexGrow: '1',
flexWrap: 'wrap',
width: Responsive.width(300)
}}>
{this.state.textInput.map((value) => {
return value
})}
<TouchableWithoutFeedback onPress={() => {
this.addTextInput(this.state.textInput.length)
}}>
<Image
style={{ marginLeft: 8, width: 38, height: 38 }}
source={require('../../../assets/plusButton.png')}
/>
</TouchableWithoutFeedback>
{/* <Button title='Get Values' onPress={() => this.getValues()} /> */}
</View>
<View style={styles.row}>
<View style={{ margin: 10, top: Responsive.height(75) }}>
<Button onPress={() => this.removeTextInput()}>Remove</Button>
</View>
</View>
I had a similar problem and solved it with a TouchableOpacity over a TextInput. Using zIndex and absolute positioning you can expand the TouchableOpacity over your text input and transform it in a button, the TouchableOpacity must have a 100% opacity.
You can control with { condition && } your logic to make it behave like a button or a TextInput.
export default function App() {
const [m,setm]=React.useState(false);
return (
<View>
<TouchableOpacity style={{zIndex:10, position:'absolute', width: '100%', height: '100%', opacity:'100%'}} onPress={()=>{setm(!m)}} />
<TextInput style={{zIndex:1,backgroundColor:'#fbb',color:'#000'}} value={m}/>
</View>
);
}
How to remove default tooltip from a menu item in a collapsible state with sidebar? It seems like the same question asked in the ant design GitHub also, but no response. Code and screenshot below.
<Menu.Item key="profile">
<Link to={`${baseConfig.page.profile.url}`}>
<span className="isoMenuHolder" style={{color:'#ffffff'}}>
<i className="icon-admin" />
<span className="nav-text">
Settings
</span>
</span>
</Link>
</Menu.Item>
Take it out with css
.ant-tooltip {
display: none;
}
Not sure if my workaround helps you or not but I have a collapse/expand button within the Menu and it displays the color of the button as the tooltip. So i removed the Menu.Item and the tooltip disappeared
<Menu
mode="inline"
theme="light"
inlineCollapsed={this.state.menuCollapsed}
className="CollapseButtonMenu"
>
<Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
<Icon type={this.state.menuCollapsed ? 'menu-unfold' : 'menu-fold'} />
</Button>
</Menu>
since the new changes on antd (> 4.23.3), the <Menu.Item /> component was deprecated, with the new API they provide a way to make the tooltip disappear is to define the title attribute as null or as an empty string on the items list like:
const items = [
{
key: "0",
title: "", //this makes the tooltip disappear
label: "Any Label"
}
];
I have a single-page web-app built with knockout.js and jQuery Mobile.
The view-model initialization (i.e. the ko.applyBindings() function) takes about 7-8 seconds. During this time, the page shows blank.
$(document).ready(function () {
ko.applyBindings(viewModel);
})
Is there a way to show the JQM loader in the meantime, or to show a kind of "splash screen", to give to the user a feedback that the "page is loading"?
Note that it seems to me that the solution proposed by #Jeroen is also good together with the default page transitions of jQuery Mobile, at least as I can see in this jsfiddle.
To be honest, the tip proposed by #Omar seems to me to have better integration with JQM, and I will try in the future to combine both answers, with a writeable computed observable to switch the JQM loader on/off.
Keep it simple! Show a loading overlay in your html by default, but use a visible: false binding of some kind. That way when the applyBindings call is done the UI will hide the overlay.
For example, suppose this view:
<div id="main">
<div id="loading-overlay" data-bind="visible: loading"></div>
Some content<br />
Some content
</div>
And suppose this view model:
vm = { loading: ko.observable(true) };
Then calling this:
ko.applyBindings(vm);
If for whatever reason it takes 7 secs to load, the loading-overlay will be shown until the UI is updated.
This approach is great if you have a client side DAL or some single point where you run Ajax calls, because you can follow this pattern:
vm.loading(true)
Ajax call with callbacks for success and failure
On callback do vm.loading(false)
Knockout will handle the overlay visibility for you.
See this fiddle for a demo, or check out this Stack Snippet:
vm = { loading: ko.observable(true) };
ko.applyBindings(vm);
// Mock long loading time:
window.setTimeout(function() {
vm.loading(false);
}, 5000);
html { height: 100%; }
body {
position: relative;
height: 100%;
width: 100%;
}
#loading-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url('http://img.cdn.tl/loading51.gif') white no-repeat center;
opacity: 0.75;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div id="main">
<div id="loading-overlay" data-bind="visible: loading"></div>
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
<input type='text' value='cant edit me until overlay is gone' /><br />
<button>can't press me until overlay's gone!</button><br />
Some content<br />
Some content<br />
Some content
</div>
I am trying to customize the look and feel of the checkboxes in my ASP.NET MVC site, using a technique like the one detailed here: http://cssdeck.com/labs/css-checkbox-styles
They work great except when placed in a form. When using the #Html.CheckBoxFor() method, MVC adds an extra hidden checkbox, apparently to make sure that a value is submitted to the form POST when the checkbox is not checked: asp.net mvc: why is Html.CheckBox generating an additional hidden input
When the extra hidden checkbox is on the form, my custom checkbox does not work. I click it but it does not toggle between the states. If I remove the extra hidden checkbox, then it works, but I guess I'll run into problems submitting the POST.
Here is the final html:
<div class="kbcheckbox">
<input checked="checked" data-val="true" data-val-required="The Approved field is required." id="UserEdit_IsApproved" name="UserEdit.IsApproved" type="checkbox" value="true">
<input name="UserEdit.IsApproved" type="hidden" value="false">
<label for="UserEdit_IsApproved"></label></div>
</div>
And here is the css I am using (uses scss)
.kbcheckbox {
width: $checkbox_size;
height: $checkbox_size;
position: relative;
input[type="checkbox"]{
visibility: hidden;
}
label {
cursor: pointer;
position: absolute;
width: $checkbox_size;
height: $checkbox_size;
top: 0;
left: 0;
border-radius: $control_corner_radius;
border: 1px solid $control_border_color;
/*#include box-shadow(1px, 1px, 1px, 0, $control_border_color, inset);*/
/*#include box-shadow(0px, 1px, 0px, $control_background);*/
background: white;
}
label:after {
opacity: 0;
content: '';
position: absolute;
width: $checkbox_size * 0.62;
height: $checkbox_size * 0.25;
background: transparent;
top: $checkbox_size * 0.2;
left: $checkbox_size * 0.1;
border: 3px solid black;
border-top: none;
border-right: none;
#include transform(rotate(-45deg));
}
label:hover {
background: darken($control_background, 10%);
}
input[type=checkbox]:checked + label:after {
opacity: 1;
}
}
Any ideas?
Use the following in your css. You want all your elements to be modified.
input[type = checkbox]:checked ~ label:after {
opacity: 1;
}
Here is the fiddle
You can solve this problem by wiring up an event when the checkbox is checked to change the value on an MVC hidden field instead, essentially doing the same thing without using the MVC helper
#Html.HiddenFor(model => model.UserEdit.IsApproved, new { #id = "chkIsApproved" })
Here is your HTML then
<div class="kbcheckbox">
<input checked="checked" data-val="true" data-val-required="The Approved field is required." id="UserEdit_IsApproved" name="UserEdit.IsApproved" type="checkbox" value="true">
<label for="UserEdit_IsApproved"></label></div>
</div>
Then just use some jQuery to wire up the checked property with the hidden field
$('#UserEdit_IsApproved').change(function() {
$('#chkIsApproved').val($(this).is(':checked'));
});
As long as the MVC hidden field is somewhere, the value will be posted to the controller. It is a little extra work, but it should get you the result you want.
My solution is somewhat hacky but you can just move all hidden fields before the checkboxes using jQuery
$(".checkbox > input[type=checkbox]").each(function( key, checkbox ) {
var hidden = $(checkbox).siblings("input[type=hidden]");
$(hidden).insertBefore($(checkbox));
});
I am using jquery Mobile 1.0.
I have this html code.
<label for="slider" class="ui-hidden-accessible">
Input slider:
</label>
<input type="range" name="slider" id="#(Model.QuestionNo)_slider" value="25" min="0" max="100" />
Its rendering like this:
But I want to remove the red marked part. I want to show only slider part.
How can this be done?
If you just want to get rid of the up/down arrows, you can wrap the input in an element with a specified width/height and overflow : hidden:
$(".ui-slider-input").wrap($('<div />').css({
position : 'relative',
display : 'inline-block',
height : '36px',
width : '45px',
overflow : 'hidden'
}));
Or as Frederic Hamidi stated, you can just hide the element all together and only a slider will be visible.
Here is a demo of the above code: http://jsfiddle.net/EWQ6n/1/
Also you can hide the input element with CSS (which is nice because you don't have to time the execution of the CSS like you do with JS):
.ui-slider-input {
display : none !important;
}
Here is a demo using CSS: http://jsfiddle.net/EWQ6n/2/
Update
Instead of using the !important keyword, you can also make a more specific CSS rule so it is used over the jQuery Mobile classes. An example would be:
.ui-mobile .ui-page .ui-slider-input,
.ui-mobile .ui-dialog .ui-slider-input {
display : none;
}
input.ui-slider-input {
display: none;
}
You could hide the input control manually:
$("#yourPage").live("pageinit", function() {
$(".ui-slider-input").hide();
});
If you only want to get rid of the up/down arrow use type="text" data-type="range"
<input type="text" data-type="range" name="slider" id="#(Model.QuestionNo)_slider" value="25" min="0" max="100" />
I wanted to do this too, but I also wanted the space to go away. I accomplished this this way (I'm using a range slider):
<div data-role="rangeslider" data-mini="true" class="no-number">
<input type="range" name="Morn" id="Morn" data-mini="true" value="720" min="0" max="1439">
<input type="range" name="Night" id="Night" data-mini="true" value="10800" min="0" max="1439">
</div>
Notice I added the .no-number to the div.
Then in css:
/* Used to remove the number next to the slider.*/
.no-number .ui-slider-input
{
display : none;
width: 0px;
}
/* Used to remove the space where the number was. */
.no-number .ui-rangeslider-sliders
{
margin: 0 5px; !important
}
I'm doing this all as part of a bigger issue, which is that I'm trying to use a range slider for time instead of numbers, so I replaced those elements with a heading I can change with a function to display the time.
This may not be the perfect choice, but I didn't see where to get the space back anywhere, so I thought I would post it here.
When you do it using CSS approach, you may break the input filed of other. So adding the class="ui-hidden-accessible" class to the input to hide it.
Remove this class="ui-hidden-accessible" from label.
Your approach is correct. But you need to add class="ui-hidden-accessible" to input not on the label.
Your code should be like this:
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="#(Model.QuestionNo)_slider"
value="25" min="0" max="100" class="ui-hidden-accessible"/>
Check this SAMPLE DEMO
<input type="range" name="slider_sodio" id="slider_sodio" value="0" min="0" max="3" step="1" class="ui-hidden-accessible" />
but look that anoy offset
.ui-slider-track {
margin: 0 15px 0 68px; ----> change to 10
}
You Can Remove Input Slider As Below :
input.ui-slider-input {
display: none;
width: 0;
}
.ui-slider-track {
margin: 0 15px 0 15px !important;
}