In out AngularJs app, we changed the activeClass of buttons (as in toggle groups) to btn-default (from the default btn-primary), so all our CSS expects that.
I notice that ng-bootstrap also defaults to btn-primary but I don't see how (or if) that can be changed.
Is it possible for me to change the activeClass so my CSS is correct with the new components?
ng-bootstrap make use of bootstrap 4. Bootstrap 4 includes six predefined button styles, each serving its own semantic purpose. But it doesn't include a btn-default but with btn-secondary class you achieve the same styling.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary" [class.active]="model.left">
<input type="checkbox" [(ngModel)]="model.left"> Left (pre-checked)
</label>
<label class="btn btn-secondary" [class.active]="model.middle">
<input type="checkbox" [(ngModel)]="model.middle"> Middle
</label>
<label class="btn btn-secondary" [class.active]="model.right">
<input type="checkbox" [(ngModel)]="model.right"> Right
</label>
</div>
If you still prefer to use the btn-default then you can make a class with that name in your component style and use it.
First of all, which version of angular are you using?
there's quite difference between ng versions
ng-1 angularjs.org - docs
<button ng-class="{'class1 class2 class3' : true}">
it's a button
</button>
ng-2/4 angular.io - docs
<button [ngClass]="{'class1 class2 class3' : true}">
it's a button
</button>
Related
(using .NET Core 3.1)
I have a handler which works, however I can't call it from a <button/>. From an <a/> it works (but this will try to refresh my page and it's not what I want).
//GETS TO HANDLER
<a class="btn btn-info" asp-page-handler="SearchProductionRecords">
<i class="fas fa-file-excel mr-2"></i> Export Excel
</a>
//NEVER GETS TO HANDLER
<span class="input-group-append">
<button type="submit" asp-page-handler="SearchProductionRecords" class="btn btn-info btn-sm"><i class="fas fa-search"></i> </button>
</span>
//HANDLER
public async Task<IActionResult> OnPostSearchProductionRecordsAsync()
{
...
}
A button submit is associated with a form submit. Therefore, put the button inside a form method=post and it should work.
Kind Regards,
Maheshvara
I'm working an application that uses Clarity's tab. Here's the code in my app.component file.
<clr-tabs>
<clr-tab>
<button clrTabLink>General1</button>
<ng-template [(clrIfActive)]="generalActive">
<clr-tab-content>
<form clrForm clrLayout="horizontal">
<clr-input-container>
<label class="required">Delta Update Timestamp</label>
<input clrInput type="text" size="30" [(ngModel)]="configDetailsdlta_updt_ts" [ngModelOptions]="{standalone: true}"/>
</clr-input-container>
<header-comp></header-comp>
</form>
<button type="button" class="btn btn-primary" (click)="validateConfigDetails()">Submit</button>
</clr-tab-content>
</ng-template>
</clr-tab>
.....
Within the first tab I've embedded another component named header-comp that is defined as
<clr-input-container>
<label class="required">Table Name</label>
<input clrInput type="text" [(ngModel)]="tbl_nm" size="50" [ngModelOptions]="{standalone: true}"/>
<clr-control-error>You must provide a table name</clr-control-error>
</clr-input-container>
The problem I'm having is when I enter a timestamp value, stored in the configDetails model on app.component, and a table name, stored in the tbl_nm model of header.component, and then switch to the second and then back to the first tab, the table name is lost. The timestamp value is still present.
Why is the entered table name value lost when switching tabs? I don't think this is an issue of parent-child communication because app.component can read the entered table name value entered when the Submit button is selected and provided I haven't switched tabs first.
When you use the ng-template and structural directive clrIfActive, it actually removes the rendered template from the DOM when you switch tabs. This is for performance and is desirable in many cases. If you don't want the tabs to be reset, remove the template and clrIfActive directive.
<clr-tabs>
<clr-tab>
<button clrTabLink>General1</button>
<clr-tab-content>
<form clrForm clrLayout="horizontal">
<clr-input-container>
<label class="required">Delta Update Timestamp</label>
<input clrInput type="text" size="30" [(ngModel)]="configDetailsdlta_updt_ts" [ngModelOptions]="{standalone: true}"/>
</clr-input-container>
<header-comp></header-comp>
</form>
<button type="button" class="btn btn-primary" (click)="validateConfigDetails()">Submit</button>
</clr-tab-content>
</clr-tab>
</clr-tabs>
I am creating a search bar using Bootstrap#input-groups-buttons
<form class="navbar-form navbar-left" action=".">
<div class="input-group">
<input type="text" class="form-control" name="q" placeholder="Search ...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</form>
When I press Enter, the form could be submitted successfully,
http://127.0.0.1:8000/?q=test
However, when I click the button "Go", nothing happened.
How could I submit the form data when button is click?
Just change the button type as submit.
<button class="btn btn-default" type="submit">Go!</button>.
Check for details: https://www.w3schools.com/tags/att_button_type.asp :)
Suppose your form has the id of myForm
<button type="submit" class="btn btn-default" form="myForm" value="Submit">Go!</button>
I am betting you just need to bind the button to execute your event handler on click events - bootstrap handles the presentation, but you would also want something like jQuery to specify how to handle UI events.
You might want to read: Bootstrap onClick button event
I'm trying to style input type file using Laravel -> Form::file:
<div class="col-md-3">
{{ Form::file('images[]', ["class"=>"required","multiple"=>true]) }}
</div>
It should look like that:
I've searcched in web for some solutions and there are possibilities with js but in some of them it's commented that it's not always working in all browsers.
What should be the right way to do that?
you can solve this through "label" tag.
<label for="form-file">Upload a file</label>
<input type="file" name="file" id="form-file" class="hidden" />
Just hide the input with css or move it somewhere -9999px to the left, and style the label element to whatever you desire. When user will click on label it will show the upload popup.
I hope this help.
EDIT:
Here is example.
With "Form::file" you can just add label and add ID parametr to your function.
Here's you can attach your file in laravel
<div class="row p-t-20">
<input id="file-upload" type="file" name="banner_url" value="{{old('banner_url')}}" />
{!! $errors->first('banner_url', '
<p class="text-warning errorBag">:message</p>') !!}
<label for="file-upload" id="file-drag">
<div id="file-cont">
Select a file to upload
<br />OR
<br />Drag a file into this box
</div>
<br />
<br /><span id="file-upload-btn" class="btn btn-success">Add a file</span>
</label>
<progress id="file-progress" value="0">
<span>0</span>%
</progress>
<output for="file-upload" id="messages"></output>
this is the easy and the stylish way to input your file in laravel
please share anyone who needs this thanks
I am trying to implement a toggle switch-toggle between textarea and ckeditor in my web form.
As of now I am able to toggle between the 2 editors.But I am not able to have the same contents in both the editors. Its treating it like 2 separate textarea, I want them to have the same contents when I toggle from textarea to ckeditor.Can anybody help me and lemme know what I am missing?
Thanks in advance
Code:
Updated code
<textarea id="editor1" name="editor1" class="ckeditor" rows="20" cols="75"></textarea>
<input type="button" value="CKEditor" onclick="CKEDITOR.replace('editor1');" />
<input type="button" value="Text editor" onclick="CKEDITOR.instances.editor1.destroy('editor1');" />
<input type="submit" value="Submit" />
</form>
Use CKEDITOR.instances.editor1.destroy() to restore it to a textarea and call CKEDITOR.replace('editor1') again when you want a CKEditor.
Remove the whole <div id="textarea"> because otherwise you will get unexpected results, you're using two textareas with the same id and name.