I'm trying to implement ng2-completer component in my Angular2 application.
The conponent works properly but the style of the search textbox is flat...
I want to have the same style of bootstrap components, like textbox for example.
This is the code:
<ng2-completer [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
This is the rendered control:
As you can see, the list of color is ok but the input where the user write the value to search is completely flat...
How can I move to fix the problem ?
Basically I just want to set it like the field "Titolo" on the right.
Thanks
Just add [inputClass]="['form-control']" in the selector.
For example:
<ng2-completer [inputClass]="['form-control']" [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
Note: form-control is here a class of Bootstrap
put class="form-control" to your textbox ,(class)="form-control" in your case i guess
Related
I'm creating an input component and I want to pass a required property in, based on a boolean from the parent component
#Parent component
<Input
:required="false"
/>
#Child component
<input
#input="event => $emit('update:value', event.target.value)"
:required="required"
/>
The problem is, when the required from the parent component is false, it still puts required into the html (which the browser reads as required).
How can I achieve this?
Thanks
Mark
For VueJs 2 or earlier version you can use
<input :required="test ? true : false">
in VueJs 3 you have to use the null to prevent the rendering of the attribute in html tag.
<input :required="test ? true : null">
VueJS conditionally add an attribute for an element
You should explain more. I provide a situation as you describe in stackblitz where I link it here. It works and it is a simple form with submit when you change the required value in App.vue you could see the input element in HelloWorld.vue is changing in the inspector. Hope you find it usefull.
Working with PrimeNg with the current version 8.0.2 I'm experiencing layout problems with the searchbox inside a listbox. Apparently this was resolved in 3077.
I've created a stackblitz example so you can see it.
The html code is:
<p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name"
[listStyle]="{'max-height':'150px', 'width':'300px'}">
<p-header>
Cities
</p-header>
</p-listbox>
Is the bug back? Am I missing something?
Thanks for your help!
As seen in the documentation, the problem is mixing the properties [style] and [listStyle].
style - Inline style of the container.
styleClass - Style class of the container.
listStyle - Inline style of the list element
.
So the inline style should be splited in 2 different attributes:
<p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name"
[listStyle]="{'max-height':'150px'}"
[style]="{'width':'300px'}">
<p-header>
Cities
</p-header>
</p-listbox>
I'm using VS and mvc. I have a Html.BeginForm which takes a randomKey as a string in the input box. There is a retrieve button that currently abuts the input box and I just want to add a margin to the button. In the site.css there is a .retrieveButton class but it doesn't seem to override the bootstrap css. Help please!
<div>
#Html.EditorFor(model => model.RandomKey...placeholder = "Enter your 8 digit key" } })
<div class="form-group">
<div>
<input type="submit" value="Retrieve" class="btn btn-default retrieveButton"/>
</div>
</div>
</div>
In case of duplicate class names, the last CSS file wins (it augments or redefines what came before it).
So make sure that your CSS files are added to the page in the correct order. Probably your personal CSS should come after Bootstrap CSS. To do this for MVC 4+, see file App_Start -> BundleConfig.cs.
For more in-depth info about bundling in MVC see e.g. this: http://timgthomas.com/2012/09/a-quick-start-of-asp-net-mvc-4s-bundling/
You can try using !important in the CSS or you can try using a more direct selector.
When you have multiple statements that try to apply the same property to the same element then the statement with the more precise selector will be used.
try:
.form-group > .btn.btn-default.retrieveButton {
}
You can read more about this here:
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
I am attempting to modify the width of the ninja form text inputs on my wordpress site. I am able to call each individually by id with:
#ninja_forms_field_6 {width:25%; min-width:250px;}
However, I would like to do so by class. However, I can't seem to figure out the correct class to call. I have looked at the source code and it displays:
<input id="ninja_forms_field_6" data-mask="" data-input-limit="" data-input-limit-type="char" data-input-limit-msg="character(s) left" name="ninja_forms_field_6" type="text" placeholder="First Last" class="ninja-forms-field ninja-forms-req " value="" rel="6" />
<div id="ninja_forms_field_6_error" style="display:none;" class="ninja-forms-field-error">
</div>
When I've tried to use:
.ninja-field ninja-forms-req {width:25%; min-width:250px;}
Nothing seems to happen. In particular, my css editor doesn't seem to like the space between ninja-field and ninja-forms-req. I've found some other answers that indidcate these are two separate tags, but I still can't seem to get the text inputs to respond to my inputs. I should note that I am using the "Simple Custom CSS" plug-in to make changes to CSS. Any help in advance would be appreciated. Thanks.
Try .ninja-field.ninja-forms-req.
When targetting multiple CSS classes on the same element you need to separate them with periods.
I found this to work really well with ninja forms and their issue with the width of buttons in some themes. This also solved my problem using the custom css plugin. Just use the height according to your theme button height.
.ninja-forms-field {
width:100%!important;
height:50px!important;
}
Hi i have a textbox which i am using as a counter to show how many characters are still allowed in another textbox. I have made it read only and its background transparent so that you cant tell it is a select box. The only problem is you can still click on it or tab to it. Is there a way to do this so it appears just like normal text and people cant click on it or tab to it?
If this is an Asp.Net Web Control set it's Enabled property to false
<asp:TextBox Enabled="false" />
If it is HTML you can do this:
<input type="text" disabled />
Just replace the input element with a span element or some other non-input element. This requires a trivial change to your JavaScript; you would assign to the innerHTML property of the element rather than value. Then the content will appear as normal text, and you can style it as desired.
you need some style with css and some trick with Jquery.
CSS
.readonly{
border:none;
background:#aaa;
}
Jquery
$(".readonly").focus(function(){
$(this).blur();
});
now just add class="readonly" to your textbox.
<asp:TextBox cssClass="readonly" />
check demo here .