enter image description here
Hello, I want to delete the space between the menu and the button, so the button and the drop-down menu will be combined. I don't know how to do this can you help me?
I can not find how can ı remove it .
You can do it by wrapping the Button inside a span element. like this:
<Dropdown placement="bottomLeft" ...>
<span>
<Button>bottomLeft</Button>
</span>
</Dropdown>
it works because Dropdown will calculate it's popup position based on the top of the element which placed directly inside the <Dropdown>, and since in the above solution, span has y-overflow, so the the popup will be shown without any space between Button and popup. You can controll the space between popup and Button by styling the span element like this:
<Dropdown placement="bottomCenter" ...>
<span style={{ display: 'inline-block', height: 27 }}>
<Button>bottomCenter</Button>
</span>
</Dropdown>
I've implemented an example Here on stackblitz you can check it out.
It would be a better way for us to help you if you share the code you wrote here.
Related
I have a form with a radio button group where on of the radio button's labels includes another (number) input.
It looks as follows at the moment, i. e. the radio button is not aligned with the rest of the label. I can't yet get my head around css-spacing, paddings, margins etc and am stuck figuring out which element should get what kind of class to center this. I would greatly appreciate any help.
Sandbox: https://codesandbox.io/s/keen-christian-s7u3c?file=/src/components/HelloWorld.vue
Code:
<b-form-group label="Radio Buttons with Inline Input">
<b-form-radio-group stacked v-model="radioValue">
<div>
<b-form-radio name="radio1" value="ONE"
>this is
<b-form-spinbutton
:disabled="radioValue === 'TWO'"
v-model="numberValue"
size="sm"
inline
></b-form-spinbutton>
not aligned
</b-form-radio>
</div>
<b-form-radio name="radio2" value="TWO"
>this is aligned</b-form-radio
>
</b-form-radio-group>
</b-form-group>
The b-form-spinbutton's height is expanding the height of its parent b-form-radio, which causes the text to be misaligned with the radio icon.
A quick workaround is to shrink the height of the spin button:
<b-form-spinbutton style="height:1.5em">
I have a semantic-ui-react form LocationSearchForm in the menu bar like below:
I put LocationSearchForm inside the <Menu.Item>
<Menu.Item>
<LocationSearchForm />
</Menu.Item>
But as you see, the form isn't getting vertically centered. Other menu.item like links, signin and signout are perfectly centered, only displaying this form has a bit problem. How can I get it vertically centered? Thanks!
You are getting space below input, because when you write,
<Form>
<Form.Field>
<input placeholder='Your City' />
</Form.Field>
</Form>
Your Form.Field getting margin-bottom : 1rem.
You need to remove margin. Simple way is inline style,
<Form.Field style={{marginBottom:'0'}}>
Or you can assign a class-name, and then write CSS for that class-name.
I have a custon class inside my react js render , it's a style to make 3 buttons inline (2 on the right and one to the left) in the same line.
But the buttons are not responsive to mobile and other screens, I tried to put the style in a custom css stylesheet but it didn't work and the buttons didn't show up inline.
Here is my CodeSandBox.
Many thanks
Please check with the property flex-wrap: wrap on parentStyle. This will make the prev and next buttons move to the next line as you resize. Similarly you can use the same property in this line <div style={{ ...childStyle, justifyContent: "flex-end" }}> as well to move the next button below the prev button if the browser is resized further
Please take a look at this, I want to put each button in new line in this case :
Small screen test
They seem to line up - what is the problem?
So here's a screenshot of a working nicely modal:
But whenever I hover or select an element inside the modal form, it acts like this :
It gets the <embed> image whenever I highlight a text or select a radio button in the <form> modal . Tried some css like z-index and the likes but didn't work. Any help are appreciated.
I have a short Ordered List that contains 2 items. Within the second Item, I want to position a button on the right. The CSS is giving me trouble so I am posting it here with the hope that someone more skilled can help.
Here's the markup:
<ol>
<li>Go here to perform an internal review.</li>
<li>When satisfied with the internal review, click the button on the right and then go to the Staging environment for a final review.<span style="width: 25%; display: block;float: right;" ><asp:Button runat="server" runat="server" ID="StageChanges" Text="Stage Changes" OnClick="StageChanges"/></span></li>
</ol>
Ideally I want the button to be inline with list element 2. The text for list element 2 should wrap appropriately. Right now the button goes below the second list element.
I tried a couple of variations, but nothing seems to work as I'd like. One variation included specifying the width of the second list element, but this removed the number 2 from being displayed (or moved it over to be in front of the button).
Thank you in advance!
Edited to add image:
When I crop your code down a bit it works splendidly. The button is being positioned inline of the second list element:
<li>
When satisfied with the internal review, click the button on the right and then go to the Staging environment for a final review.
<button>Stage Changes</button>
</li>
Keep in mind that button is one of those few form elements that gets its text from the content it wraps, not from a text-attribute.
Add CSS for list items
ol li{
display: inline-block;
}