I'm trying to make an ugly file upload button look like a nice font awesome icon.
Here is what I have so far:
<div class="col-12 col-md-4">
<button type="button" class="btn btn-round mt-0 mb-0 uploadMediaTrigger" data-toggle="modal" data-target="#uploadMedia" rel="tooltip" data-placement="top" title="Upload Media">
<i class="far fa-images"></i>
</button>
{{ form_widget(postForm.file, { 'attr': {'class': 'far fa-images'} } ) }}
</div>
Do you know how I can get the ugly button to look like the font awesome icon? Seems like merely adding the font awesome classes doesn't work.
Here is a picture:
Check this answer with Form Themes and Form Extensions. This solution is compatible with Symfony 2.8.x and 4.x.
Can I put html inside a Symfony form button with Twig?
Related
I have a laravel component for a submit button in Tailwind.
The button code is:
<div class="{{ $position }} mt-4">
<button type="submit"
class="inline-flex items-center h-10 px-5 text-indigo-100 bg-indigo-600 rounded-lg focus:shadow-outline hover:bg-indigo-800" style="{{ addShadow() }}"
#if (!empty($onClick))
onclick="{{ $onClick }}"
#endif
>
#fas('{{ $icon }}')
<span class="ml-2">{{ $label }}</span>
</button>
The things like position, icon, label, onclick are passed in OK.
My problem is that unless the mouse is over the button it deos not really appear as can be seen from the image attach. The first shows as the page opens and the second is as the mouse is over.
I simply cannot get this to work!
I normally actually upload and test in an online area, but with the new Laravel Vite changes are not made. If this is done in localhost and then uploaded the app.css etc it works.
I'm using angular calendar, and I want to customize the events style,for example- to change their shape to square instead of circle.
I tried this code:
<mwl-calendar-month-view [eventTitleTemplate]="customEventsStyle" [locale]="locale" [viewDate]="viewDate" [events]="events" (dayClicked)="dayClicked($event.day)" (eventClicked)="eventClick($event)">
{{ viewDate | calendarDate:(view + 'ViewTitle'):'Es' }}
</mwl-calendar-month-view>
<ng-template #customEventsStyle let-event="event">
<div class="cal-events">
<p style="background-color: brown;">{{event.title}}</p>
</div>
</ng-template>
But it didn't change anything in the style.
I also tried to change the css file in this path:
"../node_modules/angular-calendar/css/angular-calendar.css"
I changed the style of the .cal-month-view .cal-event class, but nothing happend.
I'm new for this issue, I'll be thankful if you could help me.
Thank you
I found it out!
I just added this code into the custom template instead of the div:
<ng-template #customCellTemplate let-day="day">
<mat-list *ngFor="let e of day.events">
<button class="customEvent" (click)="eventClick(e)">
{{e.title}}
</button>
</mat-list>
</ng-template>
<mwl-calendar-month-view [cellTemplate]="customCellTemplate"> ect...
Thanks
I have a wizard with the following custom wizard buttons:
<clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>
<clr-wizard-button [type]="'previous'">Previous</clr-wizard-button>
<clr-wizard-button [type]="'next'">Next</clr-wizard-button>
<clr-wizard-button [type]="'custom-save'">Save</clr-wizard-button>
Now I want to style the button of type custom-save with a custom color and for this, I need to apply a css-selector. attr.class won't work.
What is the best way to achieve this?
edit:
Formatted html output of the custom-save button:
<clr-wizard-button class="clr-wizard-btn-wrapper" _nghost-c5="" ng-reflect-type="custom-save" ng-reflect-disabled="false" aria-hidden="false">
<button _ngcontent-c5="" class="btn clr-wizard-btn" type="button">
Speichern
</button>
</clr-wizard-button>
Just place a custom class on your ClrWizardButton and it will be rendered for you.
<clr-wizard-button [type]="'custom'" class="my-custom-button">Cancel</clr-wizard-button>
This will render out as you see, where you can target the button using .my-custom-button button in your CSS.
<clr-wizard-button class="my-custom-button clr-wizard-btn-wrapper ng-star-inserted" _nghost-c1="" ng-reflect-type="custom-previous" aria-hidden="false">
<button _ngcontent-c1="" class="btn clr-wizard-btn btn-outline clr-wizard-btn--secondary" type="button">Custom</button>
</clr-wizard-button>
Assuming this renders a standard button with a type, then an attribute selector would work.
button[type="custom-save"] {
background: lightgreen;
}
<button type="custom-save">Save</button>
Meteor 1.6.1.1 is the latest version of my project. I am using package ian:accounts-ui-bootstrap-3 instead of accounts-ui. I have added a custom field as <select> in the code.
What I get on Screen is as below.
When I saw the HTML code, it is not adding class="form-control" to select tag.
below is the code when I inspect element on UI using Chrome.
<li id="login-dropdown-list" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Sign in / Join <b class="caret"></b></a>
<div class="dropdown-menu">
<div class="select-dropdown">
<label>State</label><br>
<select id="login-state">
</select>
</div>
<button class="btn btn-primary col-xs-12 col-sm-12" id="login-buttons-password" type="button">
Create
</button>
<button id="back-to-login-link" class="btn btn-default col-xs-12 col-sm-12">Cancel</button>
</div>
</li>
All I want is to add class="form-control" to the select tag dynamically when component loads on screen and it must look like below;
I have tried below code, but it is not working;
Template.HomePage.onRendered(function () {
document.getElementById('login-state').classList.add('form-control');
});
Well, I tried one way to achieve this is by using Template event as below,
Template.HomePage.events({
'click #login-dropdown-list': function(event){
//document.getElementById('login-state').classList.add('form-control');
$('#login-state').addClass('form-control');
}
});
As you can see, the component gets loaded inside the li tag with id="login-dropdown-list". I simply loaded the class on click event. Even the commented code works fine.
Is this a good solution? please let me know if there much better answer to this? If it works I will definitely accept and upvote the answer.
I have the following setup:
<div data-ng-repeat="item in navigationBar.navObject.items" class="btn-group">
<button data-ng-class="{current: $last}" class="btn btn-default btn-xs" type="button" data-ng-click="navigationBar.goToState(item)"> {{item.name}}</button>
<button data-ng-hide="item.isTerminal" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button">
<span class="fa fa-fw fa-caret-right"></span>
</button>
<ul class="dropdown-menu">
<li data-ng-repeat="subItem in item.subItems"><a data-ng-click="subItem.item.goToState()">{{subItem.name}}</a></li>
</ul>
</div>
And I would like the icon in the dropdown to change from fa-caret-right to fa-caret-down when the dropdown list is visible. Is there any way to do this strictly with CSS?
You won't be able to change the attributes of HTML elements using CSS, you'll probably want to use jQuery instead.
Bootstrap has some nifty JavaScript going on, where you can execute your own scripts when boostrap elements inside your website is used.
Initialize dropdown using this inside jQuery.
$('.dropdown-toggle').dropdown();
When it's called you can hook different actions to it using the handles specified on the bootstrap docs.
on('show.bs.dropdown', function(){}); is just a fancy word for saying "on dropdown"
$('.dropdown-toggle').on('show.bs.dropdown', function () {
// All actions to fire after the dropdown is shown go here.
$('.fa .fa-fw').addClass('fa-caret-right');
$('.fa .fa-fw').removeClass('fa-caret-down');
})
I know this is an old post, but I was looking for this solution and have one that works for me. You can target and change the pseudo element inside that span. When you click the button, doesn't the button add an open class? So, then the css would look like:
btn.open .fa-caret-right:before { content: "\e114"; }
Use the .open added to the button class.
The \e114 being the character of the down arrow.