i am using typeahead using twitter bootstrap and angularjs .its showing autocomplete suggestions as shown in below screenshot.but i want to show big cities name in different lines.for example London Borough of Harrow in two lines using twitter bootstrap typehead .How to acheive that ??any help is appreciable i am using http://angular-ui.github.io/bootstrap/ .
Just put a <br> tag where you want the line to break.
you can have template for this
<input id="id" type="text" name="name" ng-model="binding" typeahead-min-length="0" uib-typeahead="x as x.name for xyz in alphabet" typeahead-popup-template-url="url/to/template" typeahead-editable="false" autocomplete="off" typeahead-on-select="yourMethodCall()" ng-change="yourMethodCall()">
in your template file i.e. some_template.html
<div class="design class" aria-hidden="{{!isOpen()}}">
<div class="container" ng-repeat="match in matches">
<div> your design here... </div>
</div>
</div>
and boom you are done
Related
I'm using the
U.S. Web Design System (USWDS)
in a project I'm working on, and I'm struggling with something that seems superficially like it should be quite simple: How can I align form labels so they appear to the left of their corresponding inputs, instead of above them?
Some other CSS libraries call this a horizontal form but I've also seen it referred to as "inline" fields.
According to this answer it's possible to achieve the result I want using modern CSS Grid layout, but so far I haven't figured out how to make that play nicely with the USWDS styling, which does not use CSS Grid.
Can anyone help me to either:
Create a horizontal form using some combination of USWDS components and utility classes, or if that's impractical...
Produce a horizontal form by overriding the USWDS styling with custom CSS, but without causing too much conflict or breaking with the standard?
Below is a simplified snippet of my HTML:
<link href="https://cdn.jsdelivr.net/npm/uswds#2.8.0/dist/css/uswds.min.css" rel="stylesheet" />
<form class="usa-form">
<div class="usa-form-group">
<label class="usa-label" for="somefield1">Sample label</label>
<input class="usa-input" type="number" name="somefield1" value=0 />
</div>
<div class="usa-form-group">
<label class="usa-label" for="somefield2">Another label</label>
<input class="usa-input" type="number" name="somefield2" value=0 />
</div>
</form>
You can use flex on the usa-form-group to get them positioned next to each other as shown in this Code Sandbox, with some other minor touchups to the element margins https://codesandbox.io/s/nostalgic-moon-q7i7f?file=/styles.css
I am attempting a dynamic form generator based on Angular's Dynamic Forms template using Angular 7 and I'm running into a css issue. I am using Bootstrap 4.0 and I hope it's not an issue where I need to go back to 3.0 (I had a prior issue that involved that, but correct re-coding got it to work in 4.0). If so, please let me know.
Now, here is the way that my app works correctly for my end product. My code to generate the drop downs is:
<div class="row">
<div *ngFor="let question of questions" class="col-md-6 form-group">
<label for="{{question.key}}">{{question.label}}</label>
<span [ngSwitch]="question.controlType">
<select *ngSwitchCase="'dropdown'"
[id]="question.key"
[formControlName]="question.key"
[className]="question.fieldClass">
<option *ngFor="let opt of question.options" [ngValue]="opt.value">{{opt.name}}</option>
</select>
</span>
<span class="help-block error" *ngIf="isFormTouchedAndInvalid(question.key)">{{question.label}} is invalid</span>
</div>
</div>
When this gets rendered to the screen, the drop downs are aligned correctly, with the correct widths, as you can see:
Now, if I follow Angular's method, my main code block will now become:
<div class="row">
<app-question *ngFor="let question of questions" [question]="question" [form]="form"></app-question>
</div>
And my app-question component has the following code:
<div [formGroup]="form">
<div class="col-{{question.colType}}-{{question.colWidth}} form-group">
<label for="{{question.key}}">{{question.label}}</label>
<span [ngSwitch]="question.controlType">
<select *ngSwitchCase="'dropdown'"
[id]="question.key"
[formControlName]="question.key"
[className]="question.fieldClass"
>
<option *ngFor="let opt of question.options" [ngValue]="opt.value">{{opt.name}}</option>
</select>
</span>
<span class="help-block error" *ngIf="isFormTouchedAndInvalid(question.key)">{{question.label}} is invalid</span>
</div>
</div>
When the form renders to the screen it looks like this:
As you can see, the column widths are gone. I'm certain it has something to do with the div tag holding the FormGroup attribute, but that is required for the component to compile and work. I've tried adding it with a span tag, adding the col-md-6 class to the same tag as FormGroup, but I get the same, incorrect CSS rendering.
Is this another Bootstrap 4 issue where I may need to go down to Bootstrap 3 for this to work? If not, what is going on and how can I get the page to correctly render like the first image and yet still be able to use the app-question component in my code?
I believe that the problem is that Angular renders app-question component as a tag <app-question></app-question> and your div tags inside of it have styles relative to that app-question tag, but not the parent <div class="row">. So if you add a class col-md-6(for example) it will cover 50% of the app-question tag, but not the row one.
So if you want the styles to work, you should add the classes here
<div class="row">
<app-question *ngFor="let question of questions"
[question]="question"
[form]="form"
class="col-md-6">
</app-question>
</div>
As an alternative, you can change your app-question component decorator to make it an attribute.
#Component({
selector: '[app-question]'
})
And then use it to any tag you like
<div class="row">
<div app-question
*ngFor="let question of questions"
[question]="question"
[form]="form"
class="col-md-6">
</app-question>
</div>
Let's say I have HTML like this:
...
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="invalidCheck">
<label class="form-check-label" for="invalidCheck">
Agree to something
</label>
</div>
<div class="invalid-feedback">
I am outside of `form-check`!
</div>
</div>
...
I want to force to show the <div class="invalid-feedback">... without using JavaScript (want to use Bootstrap CSS only). And I know I can use CSS classes like was-validated or is-invalid, but invalid-feedback is outside of form-check. Is there an easy and simple way to show invalid-feedback by adding Bootstrap related CSS classes?
I found one solution:
<div class="invalid-feedback d-block">
Now I am visible!
</div>
But I feel like it's a hacky solution. Please advise!
Use display classes to display it manually for example d-block
use it like so
<div class="valid-feedback d-block">
or
<div class="invalid-feedback d-block">
Find more in documentation
There are better ways.
1)
Look into a was-validated class, that you can set on the form like so
<form action="..." class="was-validated" method="POST" novalidate>
When set on the form it displays validation feedback and also colorcodes the input field.
Just add it conditionally on your form, when validation failed on the server side.
2)
Or you can use some JavaScript to be in control of what is displayed. You can add this class dynamically
$('form').addClass('was-validated');
and you can also dynamically check if the form is valid like so
if ($('form').checkValidity()) {...
One of my web designer given template for making bootstrap switch.I compiled it and rendered on top of page.it's displaying checkbox.
template Code:
<script id="switchTemp" type="text/x-handlebars-template">
<div class="span16 mr1 headerToggleDiv" style="height:42px;">
<div class="switch switch-square pull-right" data-off-label="1" data-on-label="2"><input type="checkbox" id="switchBox"/></div>
</div>
</script>
using this, I tried in the following way.
$('#switchBox').wrap('<div class="switch switch-square pull-right has-switch" />').parent().bootstrapSwitch();
getting small with default names(on,off),like in the following way.
I want in the following way.
I want 1,2 instead of on,off as a labels.
can anyone help me.
Thanks
Please remove the script tag and use the below code to get 1 and 2 for On and Off.
<div class="make-switch pull-right" data-on-label="1" data-off-label="2">
<input type="checkbox" id="switchBox"/>
</div>
You can use this plugin for your work:
http://www.bootstrap-switch.org/
I copied prepended input from twitter bootstrap examples but it does not work properly. What is the problem?
<div class="input-prepend">
<span class="add-on">#</span>
<input type="text" placeholder="Username" id="prependedInput" class="span2"/>
</div>
http://jsfiddle.net/jGbFt/
You are trying to use code from bootstrap 2.3.2 and linking to the bootstrap 3 css file, you can change your css to link to
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
and it will work.
Fiddle