In my Reactstrap dropdown, I want the dropdown menu to have a fixed length and text be wrapped inside dropdown menu item. How can I do that? The below shows the current code and it's result.
<DropdownMenu right style={{position: "absolute"}}>
<DropdownItem style={{maxWidth: "30vw",wordWrap: "break-word"}}>
kdddddddd ddddddddd dddddddd ddd ddddddddddddd dddd dddddd dddddddd mmmmmmmmmmm mmmmmmmm
</DropdownItem>
<DropdownItem>
</DropdownItem>
</DropdownMenu>
Related
i want to create an app that have 2 FlatList:
For example:
Header with 2 choises "TOP 10" , "TOP20"
if i click "TOP 10" i want to see the list with top10, if i click "TOP 20" i want to see a list with top20.
Can someone help me please?
Problem:
I have an ion-select and in the controller when the user does something, I populate the ion-select with 1 value and make that value the selected value. The ion-select does not show that the value has been selected, but the [(ngModel)] has the correct value. When I open the ion-select it shows the value in the list and it is selected, when selecting the value in the list again it goes over the ion-select label.
How can I populate the ion-select with a value and make the populated value the selected value so that it shows on the ion-select as a selected item?
Screenshots:
The Make has value of CHEVROLET but it does not show as selected by ion-select:
When tapping on ion-select, it shows the CHEVROLET as selected and CHEVROLET goes over the Make label:
HTML:
<ion-item>
<ion-label position="floating">
<span class="required">* </span>Make
</ion-label>
<ion-select [interfaceOptions]="global.compactAlertOptions" id="make" [(ngModel)]="global.valuation.vehicle.make" name="make" #makeRef="ngModel" required>
<ion-select-option *ngFor="let make of makes">{{make}}</ion-select-option>
</ion-select>
</ion-item>
<ion-label *ngIf="makeRef.touched && makeRef.invalid && makeRef.errors.required" class="error">Make is required</ion-label>
Controller:
Modal Controller (the Make gets set in a popup modal):
this.global.valuation.vehicle.make = this.vehicleDetails.VehicleMake;
Populate the ion-select options in parent controller:
this.makes = [this.global.valuation.vehicle.make];
This generally happens when the value in ngModel is set before <ion-select-option> options are loaded on the DOM.
You will have to explicitly delay setting the value to ngModel until the <ion-select> and options are loaded on the DOM.
You can achieve it by adding a setTimeout in your component file and assign the ngModel value in the callback of setTimeout.
It seems to me that this has to do with some custom css that you are using on the template. Since when you use floating for a select is exactly the same as when you use stacked, Since the select is going to expand on the ion-item anyway. This floating works best with ion-input.
In your case, if the option was not selected, the select should be empty and the label above it. but it is on the item furthermore on the baseline of the select. When you select the option it will show in the baseline on the select left aligned.
like this:
If you remove the floating you will see what I mean.
it should show like this:
It will be easier to understand the issue if you just provide the CSS bits that are messing with the alignment of the elements.
My guess is that you have some styles that only reduce the ion-item and don't deal with alignment and positioning of the inner elements.
I am trying to create a list of dropdowns which can be reordered by dragging them. For drag and drop i am using react-sortable-hoc. Here i am attaching a working sample. Link for sample
To reproduce the issue, Select value in first dropdown by mouse or keyboard. after that drag that element (first dropdown) and drop it at 3rd or 4th position then you observed that dropped dropdown will not persist the value. Selected value displayed at first element. What could be the cause for this? How can i fix it?
You need to pass onSortEnd handler to your srotableContainer as props
<List items={this.state.items} onSortEnd={this.onSortEnd}/>;
I also suggest you add a key on your Item
<Item key={item} data={item} index={index} />
Here is the forked sandbox where it is working:
https://codesandbox.io/s/adoring-raman-l72xw?fontsize=14
I am using react-native-zss-rich-text-editor for rich text editor and it displays the editor as shown in the below image,
As shown in the image there are two sections title and body.I would like to have only body section in editor.
Hence, Is it possible to remove the title section?
yes it's possible to have one section, just remove the title section by passing the attribute hiddenTitle and set it to true.
<RichTextEditor
...
hiddenTitle= {true}
...
/>
gtk.Label(....) gives a label as a clickable link if the label-text is formatted as a link (text within a "a href-tag"). It is then automatically shown in blue and underlined. (How) can I change the style, e.g. remove the underlining and change the color?
Python 2.7.4, Windows7, gtk 2.24.10.
You can use a span tag to set text attribute.
Suppose label's text is:
GNU
now change it to:
<span foreground="blue" underline="none">GNU</span>
Here is the screenshot: