I'm using React and gotten the above with
<Nav bsStyle="tabs">
<NavItem active>Nav Item 1</NavItem>
<NavItem>Nav Item 2</NavItem>
{this.renderAdvancedSettingsButton()}
</Nav>
But this gives a warning about unknown props as Button is not meant to be nested inside Nav.
What's the proper way to do this? If i set Nav's css to float:left, the thin line will end at the last NavItem instead of the entire width, and other components apart from the button will move to the right of the Nav bar.
Related
I am trying to use the use Parent Menu Item As Toggle For Submenu using the code mentioned here. Doesn't seem to work for me. Any help?
Code for mobile menu
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?
I am using react bootstrap in my component. When I used dropdown menu it did not take the full width of its container. After a lot of searches, I solved the issue by adding the justified property to the button group, but it increases the size of the drop button only. How can I increases the size of list also and is there any way to add images within the dropdown menu options?
this is my code
<ReactBootstrap.Col sm={6} smOffset={3}>
<ReactBootstrap.ButtonGroup justified>
<ReactBootstrap.DropdownButton
title={this.state.dropDownTitle}
id="bt1"
onSelect={this.dropDownSelected}
>
<ReactBootstrap.MenuItem eventKey="Online" >Online</ReactBootstrap.MenuItem>
<ReactBootstrap.MenuItem eventKey="Away" >Away</ReactBootstrap.MenuItem>
<ReactBootstrap.MenuItem eventKey="Available" >Available</ReactBootstrap.MenuItem>
</ReactBootstrap.DropdownButton>
</ReactBootstrap.ButtonGroup>
</ReactBootstrap.Col>
in this image you can see that the ul list is not as per the width of dropdown button
I'm using meteor + bootstrap.
My nav is at the bottom of the page and the logginButtons are in the navbar.
The dropdown drops down, below the end of the page.
Is there a way to make it drop up, on top of the navbar ?
The pattern is my background, under firefox's window.
The Bootstrap document states it clearly that
Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup to the parent.
You will see a working example if you follow the link.
The Semantic UI Dropdown documentation gives examples of dropdowns that open to the left and right. However, all of the examples given show a parent dropdown that opens downwards, with the items of that dropdown being themselves dropdown which open to the left or the right. I am trying to create a vertical menu, each element of which is a dropdown that opens to the right. The vertical menu itself should not be a dropdown. I have tried many combinations of arranging the menu, right, dropdown classes and I simply cannot get it to work. Is it possible?
OK, I've discovered that Semantic will do this automatically if you place your dropdowns in a vertical menu:
<div class="ui vertical menu">
<div class = "ui dropdown item">
<span class="text">Prompt</span>
<div class="item">...</div>
...