I have a Select component with a a few options.Right under the Select menu I have a button. Because of the button when I click on the Select to prevent overlap my dropdown menu automatically goes to the top the component. I want to have an overlap, but I don't know how to set a placement of bottomCenter for dropdown in Select. Is it possible to do that without fully overwriting the dropdownRender? Thank you.
My code
return (
<Select mode="multiple" allowClear style={{ width: '100%'}}
placeholder="Search here" onChange={handleChange}>
{children}
</Select>
)
Try this prop: dropdownAlign={{ offset: [-40, 4] }}
For recent version of ant design Dropdown prop should be align={{ offset: [-40, 4] }} It's not in the document but could be found here
Related
in my rspec feature I try to check a checkbox with it related label because the input is hidden. My label contains link (<a> tag), so every time I use check('user[agree_terms]', allow_label_click: true) it never checks the box but instead open the link contains in the label.
Here's my view generated from ERB
<p class="col boolean required user_agree_terms">
<input name="user[agree_terms]" type="hidden" value="0">
<input class="boolean required" required="required" aria-required="true" type="checkbox" value="1" name="user[agree_terms]" id="user_agree_terms">
<label class="boolean required" for="user_agree_terms">
<abbr title="required">*</abbr>
J'ai accepté les <a target="_blank" href="https://somelink">Conditions Générales d'Utilisation</a> et la <a target="_blank" href="https://somelink">Politique de Confidentialité</a>
</label>
</p>
Here's my spec
# I tried both but its behave the same way : open the <a> tag
find('label[for="influencer_agree_terms"]').click
check('influencer[agree_terms]', allow_label_click: true)
Do you know another way to check that box ?
By the way the UI on browser work correctly when I click the label.
When you tell Capybara to click on an element it clicks in the middle of that element which in this case is where you have the conditions link, so that takes the click before the label element. One option would be to specifically click on the abbr element, which is in the label but away from the link
find('label[for="influencer_agree_terms"] abbr').click
Another option would be to take advantage of the fact that allow_label_click supports specifying offsets for the click location
check('influencer[agree_terms]', allow_label_click: { x: 10, y: 10 })
Depending on the setting of Capybara.w3c_click_offset that offset could be from the center or from the top left corner of the label element so adjust the values as necessary. Technically you can do the same thing when calling click
find('label[for="influencer_agree_terms"]').click(x: 10, y: 10)
but it's generally better to use check when dealing with a checkbox
By default capybara #click method will click in the middle of the element, right where my link is located.
Fortunately #click has offset option as follow #click(x: 0, y: 0).
So to check a box with the help of its label containing link :
find('label[for="influencer_agree_terms"]').click(x: 0, y: 0)
I am trying to change the background color of a select drop down when disabled.
I was testing with: .ant-select-disabled .ant-select-selection{background-color: red} with no luck.
For example, on regular inputs I got it to work: .ant-input:disabled{background-color: red}
This is for VueJS
Hi you can use styles in the Select drop down
<Select
style={
backgroundColor: "red",
}
>
.....
</Select>
You can use dropdownStyle prop on Select to style it.
you can use this; this works for me.
.ant-select-selection-item{
background-color: red;
}
I am working with Select2 library (version 4.0.1), but I have strange position of the dropdown of the select. You can see on the image below.
You can see that select2 dropdown overlaps the select area and I can see in the example in the documentation that it should appear at the bottom of the select. Here is my code
<select class="select2">
<option>--Select--</option>
<option>Sample Page</option>
</select>
<script>
jQuery(document).ready(function() {
jQuery('.select2').select2();
});
</script>
Any ideas why this is happening?
In the select2 initialization, add the parent element.
If you are using a jquery modal, do not use the modal ID alone, go a level deeper and keep it as dropdownParent, else it will take the whole screen as its position relatively.
var dropdownParentEl = $('#addModal > .modal-dialog > .modal-content')
selectBoxElem.select2({
dropdownParent: dropdownParentEl,
})
I want my dropdown to be relative within the modal-content, so i kept it as my parent, you change according to its requirement.
I have an accordion that displays items I have entered values from some input items - e.g., if I select a date, the accordion displays the selected date etc.
sample screen - top portion is the accordion with selected values and the bottom portion is where I enter the values
Date: Sep 20 2013 | Customer: MLJJ
Date : ______
Customer : _________
I have a div that pops up when a user clicks on the input field for date. I wanted to do the same for the read-only text in the accordion. But the top portion of my date slider is hidden by the accordion. I have tried setting the z-index to some very high values, but to no avail. Is there a way to accomplish what I am trying to do. Thanks in advance.
Code Snippets
function positionMe(myTextBox) {
var mybox = myTextBox;
$("#popup").show();
$( "#popup" ).position({
of: $( mybox ),
my: "left top",
at: "left bottom"
});
}
popup is a div
<div id="popup">
<div class="input">
<div>
<input type="text" id="timeslice" size="5" />
</div>
</div>
</div>
I solved it myself -
I appended the popup div to the accordion element and then positioned it. That seems to show the popup.
$("div#top-criteria").append($("div#popup"));
positionRight('div#top-criteria');
Thanks
I apologize if the question was a bit vague.
I am trying to build a List that has a checkbox and an icon, so I decided to use a Split button List. Now I have 2 issues with the List:
The Checkbox appears in a box within the list item, I want it to be "flat", i.e. NO box around
The click causes the entire box to become blue, I want only the checkbox to get ticked
Can you help me with that?
I posted some example code here: http://jsfiddle.net/JY6EV/2/
//edit 2012/06/14
It seems that having a checbox on a listitem alway nests a button. As a workaroud I could add an icon (data-icon="check") but this does not work either.. any suggestions?
PS: I want to mimic the gmail list on iPad/iPhone:
with my (faked) jquery mobile list:
What I tried so far: http://jsfiddle.net/JY6EV/8/
I know this is an old thread, but I recently had to do the same.
Since the solution of the second image is not present, I made it myself.
The list items:
<li>
<a href="#" class="custom">
<input type="checkbox" name="cb1" id="cb1" />
<label for="cb1">checkbox 1</label>
</a>
</li>
The css:
.custom {
padding: 0;
}
.custom > div {
margin: 0;
}
.custom > div > label {
border-radius: 0;
border: 0;
}
Does this work?
http://jsfiddle.net/JY6EV/10/
Using the Gris layout for positioning but you will still need to tweak the look and feel