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>
...
Related
I haven't seen instructions for this anywhere - but I managed to put regular dropdown and mega menu in the same navbar. However, if the drop down menus are on the right side of the megamenu, it doesn't work (the dropdown menu items are not visible), But if the dropdown menus are on the left of the megamenu button, then everything works.
Anyone know a solution for this?
I am trying add a button (to open the side panel) , but for some reason it shows up on the top left of the page. I want it to appear on the middle (right side) so when the user clicks on it the panel displays. I also want the current content on the page to zoom in when the side panel opens so the user is able to see both panel and the current content.
descripition of what you want talk
<div>
<button mat-button (click)="left.open()">Field Definitions</button>
</div>
what is the correct CSS to?
I believe you're looking for this, it's an example provided in the Angular Material Documentation.
There are several ways to position the sidenav toggle button, you can either use CSS Flexbox or just add float: right property to the button. I would choose the first method combined with the use of mat-toolbar.
I am new to semantic UI (and web development in general) and am looking to implement a design like this:
So to be clear: The bar with icons is always there, the labels for the icons appear only when the mouse is over the menu bar somewhere; label rectangle hoovers over the site content and it does not stretch from top to bottom.
Can anyone give me a tip on how to accomplish this?
Menu/icon bar can be a sidebar that is always visible I guess:
<div class="ui visible left thin sidebar borderless vertical icon menu">
<a class="item">
<i class="search icon"></i>
// Would like label text here
</a>
..etc
</div>
But I don't see anything that can help me with the labels/popup and preferably have the definition of that text in the same item.
Any help greatly appreciated!
As nice as Semantic UI is, we now decided that it not the right framework for us. We are building an technical application, not a regular website, which is all custom design and we would run into issues like this all the time. #Michael: thanks for answering!
I have a text box and when you click on it, a dropdown menu will appear with a list of strings, and when you click on a string, that string will be put in the text box.
I need help with creating some simple css code to align and resize the dropdown menu that appears on click, to match the size of the text box!
this is the code of the text box and the dropdown menu:
<div class="row">
<div class="col-xs-12 max300"
uib-dropdown is-open="vm.descriptionDropdownOpen">
<textarea name="description" class="form-control"
ng-model="vm.presence.description"
ng-click="vm.toggleDescriptionDropdown()"
autofocus>
</textarea>
<ul id="descriptionDropdown" uib-dropdown-menu>
<li ng-repeat="descr in vm.loadedDescriptions"
ng-click="vm.presence.description = descr.text;
vm.descriptionDropdownOpen = false;">
{{descr.text}}
</li>
</ul>
</div>
</div>
I gave the generated list in the dropdown menu a ID for the css ("descriptiondropdown") and the text box and the dropdown menu look like this:
image
the white box you see it s because I edited the entries of the list, but you can see in the background the dropdown menu size and above it the text box size, I'd like them to have the same width and to make the dropdown menu start aligned with the box, not on the left of it.
And for last, if you have some tips on how to affect also the font size and spacing between the entries in the dropdown list for the CSS code would be awesome, thank you
I added a media query at 1180px wide for horizontal viewing on tablets so that the navigation menu items don't wrap to a 2nd line, but instead displays the toggle button. However when clicking the toggle where it displays the main menu, that menu has several dropdown sub-menus. At this width, when clicking on a menu item to see a sub-menu,those choices are displaying over toward the far right instead of immediately under the main menu choice - See the image. Yet it acts just fine under 767px wide. Since I am not sure how menu items get aligned to begin with when showing the mobile menu, I am not sure what is causing this or how to correct it. Thanks in advance.