I am trying to use the intl-tel-input with bootstrap 4. However, I am not able to see the placeholder for the input at all. I tried almost all the solution available on the net on this matter but unfortunately, none worked.
This is my HTML
<div class="form-row">
<div class="form-group col-sm-12">
<label for="quote-phone" class="sr-only">Mobile Number</label>
<div class="input-group input-group-lg">
<input id="phone" type="tel" class="form-control" placeholder="Phone Number">
<div class="invalid-feedback">
Please provide a phone number.
</div>
</div>
</div>
</div>
This is my CSS
.iti-flag {
background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.0.3/img/flags.png");
}
#media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2 / 1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
.iti-flag {
background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.0.3/img/flags#2x.png");
}
}
And my JS to initialize the plugin:
$("#phone").intlTelInput({
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.0.3/js/utils.js",
allowDropdown: true
});
The only time I get to see the placeholder is when I do this:
#phone{
width:100%;
}
But it still doesn't cover the whole row obviously.
Here is the JSFiddle link.
Any workarounds to this problem?
It's because this class is making your input at 1% width:
.input-group .form-control, .intl-tel-input { width: 100%; }
If you overwrite that file, then you can see it.
.iti{ width: 100%;}
this works for me
if you are not using input-group or form-control just add below property
.intl-tel-input { width: 100%; }
Related
I'm working on an Angular 6 application where I am having a textarea. On having an error, an asterisk sign should be displayed beside the textarea on the top-right corner. The issue I'm having is on resizing the textarea element, there is a gap between the textarea element and the asterisk sign. I think I need to dynamically give the width of the textarea to the asterisk. But, I am not able to to it by CSS or get a (resize) event on it. How to go about it? Any help will be appreciated.
Sample code is given below.
demo-file.html
<div class="col-6 fix-custom-width">
<label for="dataVal"><span>*</span>Data Value</label>
<textarea id="dataVal" placeholder="Max 20 Characters" tabindex="2" type="text" class="form-control resizable-textarea" formControlName="dataVal" [ngClass]="{'is-invalid': dataVal.errors && (dataVal.dirty || dataVal.touched || submitted)}" required></textarea>
<span *ngIf="dataVal.errors && (dataVal.dirty || dataVal.touched || submitted)" class="display-inline error-asterisk">*</span>
<div class="red-color" *ngIf="dataVal.errors && (dataVal.dirty || dataVal.touched) || submitted">
<p *ngIf="dataVal.errors && dataVal.errors.required>
Required
</p>
</div>
</div>
demo-file.css
.error-asterisk {
position: absolute;
right: 0px;
top: 30px;
color: $error-message-text-color;
}
.fix-custom-width {
max-width: 100%;
}
.resizable-textarea {
max-width: inherit;
resize: both;
}
.textareaContainer{
display:flex;
}
<div class="textareaContainer">
<textarea id="dataVal" placeholder="Max 20 Characters"></textarea>
<span class="display-inline error-asterisk">*</span>
</div>
This can be easily done by display:flex; by default align-items is set to flex-start which means all element will start from top & flex by default puts elements in one after another
I am using bootstrap 3.3.7 and I want to change the text alignment to Left when col-sm-6 is reached. If this level is not reached yet then the text alignment is right. How can I do that?
Below is my div:
<div class="col-sm-6 text-right" style="padding-bottom:10px; padding-top:10px" >
<a class="BAN_ForgotPass" href="#">Forgot the password ?</a>
</div>
I have tried to add this in the script css in the header but didn't work:
<style type="text/css">
#media (max-width: 767px) {
footer .text-right { text-align:left }
}
</style>
Any suggestions?
Another question please: is there anyway to detect in javascript or jquery if col level was reached? I am asking this because sometimes we need to hide images or add somthing in some levels ...
For example: hide image x when col-sm-6 is reached. Is it possible?
Assuming you have the correct bootstrap HTML then this should work
#media (max-width:767px) {
.container .text-right {
text-align: left
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-6 text-right">
<a class="BAN_ForgotPass" href="#">Forgot the password ?</a>
</div>
</div>
</div>
To answer your second question, about hiding elements you can use utility classes in this case hidden-sm and hidden-xs
try this below code
#media (max-width: 767px) {
.text-right { text-align:left; }
}
Try this into your page with inline CSS and if works fine make external CSS
.col-sm-6
{
text-align:left;
}
if this works make a Separate CSS for each changes you want
like for image hide add below line in above code
.col-sm-6
{
text-align:left;
diaplay : block;
}
I tried to change the position of bootstrap input-group-addon when on mobile by using two input and playing with their display and visibility.
From a frontend visibility perspective I got what I want, the input is now behind the addons ... but I'm running some javascript on #input-newsearch and when on mobile it's not working. It looks like it's still looking at the first input. What am I missing or how can I solve this?
html:
<div class="input-group">
<input id="input-newsearch" class="form-control input-newsearch-desktop" type="text">
<span class="input-group-addon" id="delete-newsearch">Delete</span>
<span class="input-group-addon" id="remove-newsearch">Remove</span>
<input id="input-newsearch" class="form-control input-newsearch-mobile" type="text">
</div>
css:
.input-newsearch-mobile {
display: none;
visibility: hidden;
}
#media (max-width: 768px){
.input-newsearch-desktop {
display: none;
visibility: hidden;
}
.input-newsearch-mobile {
display: initial;
visibility: initial;
}
}
javascript:
$('#delete-newsearch, #delete-newsearch').on('click', function() {
$('#input-newsearch').val('');
});
$('#input-newsearch').autocomplete({
source:'/source.php',
minLength: 3,
...
});
Instead of using Id's as your selection I would use a class instead.
The reason it is not working as you intended is because Id's are expected to only show up once. It causes problems when you have multiple elements with the same Id and try to reference one of them.
Styles
Added the class input-newsearch
<div class="input-group">
<input id="input-newsearch" class="form-control input-newsearch input-newsearch-desktop" type="text">
<span class="input-group-addon" id="delete-newsearch">Delete</span>
<span class="input-group-addon" id="remove-newsearch">Remove</span>
<input id="input-newsearch" class="form-control input-newsearch input-newsearch-mobile" type="text">
</div>
Javascript
Changed Id selector '#input-newsearch' to the class '.input-newsearch'
$('#delete-newsearch, #delete-newsearch').on('click', function() {
$('.input-newsearch').val('');
});
$('.input-newsearch').autocomplete({
source:'/source.php',
minLength: 3,
...
});
I tried to define tokenfield on a textarea with more height but its displaying as a textbox (single line). How can I customize the tokenfield to work with a textarea?
<textarea name="f1_email" placeholder="Enter Friends's Email separated by comma" class="f1-facebook form-control" rows="10" cols="30" id="f1-referral-email"></textarea>
$('#f1-referral-email').on('tokenfield:createdtoken', function (e) {
var valid = isEmail(e.attrs.value);
if (!valid) {
$(e.relatedTarget).addClass('invalid')
}
}).tokenfield()
ACTUAL OUTPUT:
Any help or advice is appreciated, Thank you in advance.
As what stated here, tokenfield can be adjusted by it's CSS(bootstrap-tokenfield.css). Please examine and look for (input-sm, input-lg etc). This is just a hack to create a custom textarea. Then select the appropriate class in your input tag. Or if you wanted to create a custom size refer to code below:
HTML:
<div class="form-group form-group-xl">
<input type="text" class="form-control" id="my-tokenfield">
</div>
CSS:
.form-group.form-group-xl .form-control {
height: 50px;
line-height: 50px;
}
.form-group.form-group-xl .tokenfield {
height: auto;
min-height: 50px;
}
I have label and text box in jQuery mobile and when the screen size changes the whole structure changes too.
When i have screen size width less then 448px it goes to label and text box under the label but when it is above 447px it is one next to the other.
I am adding two photos in order to be clear.
This is the code:
Html:
<div role="main" class="ui-content">
<form>
<div class="ui-field-contain">
<label for="sales1">Sales:</label>
<input type="text" id="sales" value="">
</div>
</form>
</div>
Css:
.ui-field-contain .ui-input-text {
width: 50% !important;
}
Is there any way by css to override it and to be always one next to the other in any screen size?
You just have to style label as an block on small screens
#media (max-width: 448px) {
.ui-field-contain label {
display: block;
}
}