I was trying to see how I can set the dropdown in the Typeahead module to have the same width as the input text and not change dynamically based on the width of the content in the drop down. I am using 1.0.0-alpha.15 of ng-bootstrap.
Just add a width to the drop-down template
From
<template #rt let-r="result" let-t="term">
<img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/' + r.flag" width="16">
{{ r.name}}
</template>
To
<template #rt let-r="result" let-t="term">
<div style="width: 350px;">
<img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/' + r.flag" width="16">
{{ r.name}}
</div>
</template>
Plunk
how I can set the dropdown in the Typeahead module to have the same width as the input text
Would probably be a bad idea imho, but if you don't want a static width, you can calculate the input string width and use NgStyle instead.
Related
I need expansion panel to show header as columns. I wanted to use grid list component for that, but when I place it the header shows empty. Any way to achieve that?
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-grid-list cols="3">
<mat-grid-tile colspan="1">Column 1</mat-grid-tile>
<mat-grid-tile colspan="1">Column 2</mat-grid-tile>
<mat-grid-tile colspan="1">Column 3</mat-grid-tile>
</mat-grid-list>
</mat-expansion-panel-header>
<p>Some content</p>
</mat-expansion-panel>
The component mat-grid-list is actually there but it's invisible because the width is zero. So applying the styles as below to the component will work.
mat-grid-list {
width: 100%;
}
I have a container that is a row if screen size is greater than "sm" in angular material
<div layout="column" layout-gt-sm="row" layout-margin="20px" >
<div id="div1" flex="80">
</div>
<div id="div2" flex="20">
</div>
</div>
</div>
When it turns to a column, I need my div2 stacked onto top of div1 but as the natural order is, divs on the left are stacked over divs on right.
How can I change this and have the div on right on the top of div1 or any other div for that matter?
You can use flex-order and flex-order-gt-sm option to get the desired result.
http://codepen.io/next1/pen/EKXedG
For more info check the offical doc Material Layout
I'm trying to change height and font size of horizontal controlgroup radio buttons dynamically with jquery mobile 1.2.1
I can change size and font, but with some values the buttons are displayed toghether with the basic radio selector as in
http://picpaste.com/Capture-94sE5bZi.PNG
http://jsfiddle.net/mauix/VVpR9/15/
<body>
<div data-role="page" id="home">
<div data-role="content">
<form>
<fieldset data-role="controlgroup" data-type="horizontal" id="btnc1">
<input name="rc" id="rca" value="on" checked="checked" type="radio">
<label for="rca">#1</label>
<input name="rc" id="rcb" value="off" type="radio">
<label for="rcb">#2</label>
<input name="rc" id="rcc" value="other" type="radio">
<label for="rcc">#3</label>
</fieldset>
</form>
</div>
</div>
</body>
<script>
$('#rca').on('click', function(){
$('.ui-radio').css('height','100px');
$('.ui-radio').children().children().css('font-size','18px');
});
$('#rcb').on('click', function(){
$('.ui-radio').css('height','60px');
$('.ui-radio').children().children().css('font-size','14px');
});
$('#rcc').on('click', function(){
$('.ui-radio').css('height','30px');
$('.ui-radio').children().children().css('font-size','10px');
});
</script>
thanks for help
jQM enhances the radio button by replacing its markup, however, it leaves the original input tag in the dom under the new markup vertically centered within the radio div. When you set the height to 100px, the enhanced button stays at the top while the input moves to the middle and becomes visible. Here are 2 options:
Don't resize the button, just change the font size and let the buttons auto-size with the font changes:
DEMO
If you need the button size changed to exact height, you can use CSS to hide the input:
.ui-radio input{
display: none;
}
DEMO
I am using jQuery Mobile. I am attempting to allow the user to change a slider value in two ways. A number, or a percentage. For example, let's say that the total of a metric is $224. So 50% is $112. Well, I want the user to be able to specify $100 manually, OR specify 50% manually.
With this said, I placed a numeric text box and a slider next to each other. The numeric text box appears larger and different from the slider's text box. One thing to note - I have removed the up/down buttons via CSS.
Try as I might, I cannot get these to display the same way. Does anyone know what classes are needed for this? Changes done on pageinit()?
To put elements side by side, use ui-grid layout. For two items, add class ui-grid-a to a div. Then wrap first with div with class ui-block-a and the other one class ui-block-b.
Demo
<form>
<div class="ui-grid-a">
<div class="ui-block-a">
<label for="numbers"></label>
<input type="number" name="numbers" id="number" />
</div>
<div class="ui-block-b">
<label for="slider-6" class="ui-hidden-accessible">Slider:</label>
<input type="range" name="slider-6" id="slider-6" min="0" max="100" value="50" />
</div>
</div>
Optional - Override width of child divs.
.ui-block-a { width: 30% !important; padding-right: 10px !important }
.ui-block-b { width: 70% !important }
For input, you need to adjust input's parent div's height by either jQuery or CSS.
Note: Slider has type=number attribute as well, therefore, you need to override the input box only which has class ui-input-text.
CSS
div.ui-input-text { height: 28px !important }
jQuery
$('[type=number]').closest('div.ui-input-text').css('height', '28px');
I'm trying to throw a list of radio buttons in a dialog for a user to select. How do I make the lists that wrap align? It would be nice to have them uniform or at least stretch out to the edge.
Any help would be greatly appreciated!
Right now I just use $("#mydiv").buttonset()
<div id="mydiv">
<div class="ui-widget-header" style="padding-top: 5px">
<input type="radio" name="slot" id="slot-1" value="1" /><label for="slot-1">7:10 AM - 7:50 AM</label>
...
</div>
</div>
Knowing the width of your dialog, you could easily apply a width to the buttons elements for them to fill the space:
.ui-buttonset .ui-button { width: <your size> }