i'm new to Angularjs Material so maybe this is something obvious yet it seems i can't figure it out.
i have a multiple choice drop down menu which shows only 4 options when initially clicked on and the rest can be viewed/accessed by scrolling down. I'm trying to expand that view to another static number (e.g. to fit 8 options without scroll).
i found very similar question asked before:
Make multiple-select to adjust its height to fit options without scroll bar
however, it seems not to have any effect neither with "size" nor "ng-size"
here is my example:
<md-input-container>
<label>Providers</label>
<md-select ng-size="10" ng-model="vm.selectedProviders" ng-change="vm.prov()" multiple>
<md-optgroup label="Providers">
<md-option ng-value="provider.namep" ng-repeat="provider in vm.providers">{{provider.namep}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
Looking at the documentation of md-select, there doesn't seem to be an attribute that specifies the number of options to show.
So the other possible way is to change the maximum heights set by default in AngularJS Material. They're set like this:
md-select-menu, md-select-menu md-content {
max-height: 256px;
}
For me, it displays 5 options by default (not 4). So, I added this to my CSS:
md-select-menu, md-select-menu md-content {
max-height: 385px;
}
And it made all md-select tags fit 8 options instead of 5. The number doesn't have to be the same for you, so play with the height until you're satisfied.
Hope that helps.
Related
I'm using md-autocomplete from Angular Material: here
It seems the dropdown's width goes with the input field's width. If an item's text is too long, there is ellipsis.
However, I want to show full text of an item, while keeping the input field's width relatively short. That is, the dropdown's width should expand with its content.
I tried inspecting the styles of md-autocomplete's elements, but couldn't find any style that does the trick. Any idea?
EDIT:
Here are the style I ended up having:
.md-autocomplete-suggestions-container{
overflow-y:scroll
}
.md-autocomplete-suggestions-container .md-virtual-repeat-scroller{
position:static
}
.md-autocomplete-suggestions-container .md-virtual-repeat-sizer{
height:0 !important
}
.md-autocomplete-suggestions-container .md-virtual-repeat-offsetter{
position:static
}
However there is one more issue. The overflow-y:scroll always shows the vertial scroll bar even when not needed. If I change it to overflow-y:auto, the vertical scroll bar when present will create ellipsis. How do I solve this?
For anyone still facing the problem of autocomplete values being cropped because the panel width is only as wide as the field, the good news is that it has now been fixed, woohoo!
Angular Material Release 6.4.0 (2018-07-16) introduced the following feature,
autocomplete: allow panel to have a width value of auto (#11879) (8a5713e)
So now it's possible to just add the property panelWidth with the value auto and the panel will grow to fit the values.
<mat-autocomplete panelWidth="auto">
<mat-option value="myValue">Now an option with a long label will still be readable<option>
</mat-autocomplete>
You can use css to style md-virtual-repeat-container.
However, that would style every instance of md-virtual-repeat-container that you may have on your site (ie, md-autocomplete and md-virtual-repeat).
Unfortunately, there isn't an option to adjust individual md-autocomplete dropdowns at the moment. I created a ticket and pull request to hopefully solve this issue. Fingers crossed that this will be included in one of the future releases of Angular Material.
Best of luck!
You need to set class on your md-autocomplete element so you can target it in css. See this example
<md-autocomplete class="autocompletable"
md-min-length="0"
...
placeholder="US State?"
md-menu-class="autocompletable-contents">
<md-item-template>
<table>
<tr>
<td><span md-highlight-text="ctrl.searchText"
md-highlight-flags="^i">{{item.ok}}</span>
</td><td>Foo</td>
</tr>
</table>
</md-item-template>
<md-not-found>
No states matching "{{ctrl.searchText}}" were found.
<a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
</md-not-found>
</md-autocomplete>
And then in css you need to do this
md-autocomplete.autocompletable{ width: 200px; }
.autocompletable-contents{ }
EDITS: Tested with materials 1.0.9
I know it very late but in materials 1.1.9 you can add an attribute md-menu-class on the md-autocomplete directive.
The class you add will reported on the .md-autocomplete-suggestions element in the virtual repeat. So you be able to customize the css for this autocomplete only.
exemple :
<md-autocomplete ... md-menu-class="search-field-autocomplete">
will generate
<ul class="md-autocomplete-suggestions search-field-autocomplete" ... >
<li md-virtual-repeat="item in $mdAutocompleteCtrl.matches" ...
so you can customize with css like :
.md-autocomplete-suggestions.search-field-autocomplete {
li {
color: red;
}
}
I'm trying to build a Bootstrap dropdown button where the only dropdown option is a form field containing textual input accompanied by a button, such as:
+----------+---+
| (Button) | V |
+----------+---+-----------+
| [_<text input>_] | (Go!) |
+--------------------------+
Items in parenthesis are clickable buttons
Item in brackets is a text input field
The above ascii diagram shows the behaviour I would like if the dropdown toggle were clicked on
The Problem
I'm having considerable trouble getting the width of the dropdown to actually fit the form field. My attempts so far have them sort of matching up but not really; the form field is slightly larger than the bootstrap dropdown width which looks somewhat unpleasant.
Problem Reference: http://jsfiddle.net/3z44e5va/2/
I suspect that the auto-resizing capabilities of the Bootstrap dropdown don't apply to forms, but rather solely to list elements?
I'm ardently hoping that someone has tried to implement something similar and can shed some light on a recommended path forward.
Thank you in advance!
Just reset the row class's margin. Right now it has the default -15px for the margin-left and margin-top.
.row{
margin:0px;
}
http://jsfiddle.net/e4pxamho/
I have a dropdown menu made using an HTML select tag. I know that there are 152 options, but this large number forces some of the options off of the webpage view on most reasonable size monitors if I were to make the size 152. I tried setting the max-height of the select to 100% guessing that this would limit the size to the maximum number that can fit in the div. However, for some reason I do not understand, it still displays all 152 options with some below the screen view.
<select name="school" size="152" style="max-height: 100%;">
...
</select>
Is there a way to have a select tag display as many options as it possibly can fit onto the screen ( 100% height ) listed out, but force you to scroll to get to any options that would be displayed below the screen ( past 100% height ) ?
If you can limit the required support to IE9+, you can use viewport units (vh) to force the select to always be exactly the height of the viewport, using this CSS:
select {
display: inline-block;
height: 100vh;
}
You also have to set a size attribute of at least 2 on the select itself. As long as you set a reasonable fallback size option on the select, it will work in a limited fashion on older browsers, which will simply ignore the 100vh value and render the select at it's default height.
That's it! The only real drawback is that the list will always be the height of the screen, it won't automatically shrink if there are fewer items.
Working fiddle showing it in action.
I would say no without some sort of jQuery replacement plugin. I've just checked Firefox and also Safari and FF sets a height on the opened list and safari just goes to the bottom of the browser window, both by default.
Try Chosen.js, it really is good and then you can style it from there: http://harvesthq.github.io/chosen/ It even provides options search and other cool features.
I'm trying to make a custom grid-based theme for my wordpress site. One thing I want to do is make it so that the vertical spacing between posts in the same column is automatically collapsed, so that there is no empty space between them even if the posts are different heights.
For example, on this site the grid is collapsing how I want it to. However, on this site, the posts are arranged in horiztonally aligned rows and there are spaces between each row.
Is there a name for the technique that is used to make posts arrange themselves as in the first example site? I'm at least looking for a term that I could Google for to learn how to do it ... but even better would be a code sample that would show how to make a grid that auto-arranges in this manner.
Thanks!
This is known as a dynamic grid or perhaps Pinterest-like grid. It was popularized by Pinterest.
Essentially, you cannot do this with CSS and HTML alone. This type of grid needs to be handled with some Javascript or server-side processing. I would suggest going with Javascript and checking out one of the many jQuery plugins which do exactly what you want (note that the first site you linked to uses a plugin for their layout):
http://masonry.desandro.com/ (what the first site you linked to uses)
http://www.wookmark.com/jquery-plugin
http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/
http://yconst.com/web/freetile/
Any of these should do the trick.
Masonry has you set the container width and spacing between blocks using CSS. You specify the width of columns you want in Javascript. The calculation of the block width and spacing will determine how many columns there are in the container.
Wookmark and BlocksIt have similar configuration options. They let you specify the container width and then the block width. Between that and the offset (distance between blocks) you could have it arranged such that you end up with 3 columns of the same width.
Freetile out of the box doesn't support same-width columns (one of its features), however you would be able to accomplish the same thing with a little CSS and/or modifying the plugin directly.
The main part here is getting one of these plugins set up and working. Once that is in place, you'd only need to adjust your CSS to your liking. Each of these plugins provide working examples as well as code samples and documentation. A simple implementation of Masonry would look like this:
HTML:
<div id="grid-container">
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
</div>
CSS:
#grid-container {
width: 940px; //width of your container
}
.post {
margin: 10px; //spacing between each block/post
}
Javascript:
$('#grid-container').masonry({
itemSelector: '.post', //selector for each block
columnWidth: 300 //width of your columns
});
Each block post will be 300px wide with 10px of margin all around. You'll end up with 3 columns, each column with 10px of margin between them.
Each of the plugins listed is licensed in such a way that it's free for personal/commercial use (see each plugin for their respective licensing), so no worries there.
I've developed one page using jCarousel within jQuery ui Tabs.
Following page is what I got:
http://knowledge.teldap.tw/knowledgeFB/my_creation/?fid=668330535
Problem is:
If you click the 3rd tab (only one item), you'll find nothing unless you click the left arrow to navigate. It's weird because one the 1st tab ( more than one items) everything is normal and visible.
Can anyone find out what I've missed? Because I've struggled on this for several hours.
Thanks!
The problem is the width of your carousel image has not been adjusted properly
In your jquery,put scroll 1
jQuery('#listelements').jcarousel({
scroll : 1,
And also adjust the height of the container
.jcarousel-skin-tango1 .jcarousel-container-horizontal {
width: 1200px;
height:630px;
margin-left://adjust margin left here
}
You may have a look on this carousel example