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.
Related
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 want to capture all click events on the menu of my page.
I've setup a tag that will capture all click events on my page. It works with the trigger setup to "Click - All elements".
When I set up the trigger to specifically register only the clicks on elements of the menu var, nothing is detected. So, definetly, I'm doing somenthing wrong within the trigger.
EDIT 1:
this is the web page: www.chazki.com
Menu code:
<div class="collapse navbar-collapse" id="navbar-ex-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a class="new_service">Solicita un Chazki</a>
</li>
<li>
Faq
</li>
<li>
<p class="new_service new-service" style=" padding: 6px;"><a>Login</a></p>
</li>
<li>
<a class="btn btn-default btn-lg location_ac"><i class="fa fa-fw fa-spin fa-star"></i>Lima</a>
</li>
</ul>
<form>
<fieldset class="navbar-form navbar-left">
<input type="text" name="track-code" id="track-code" class="form-control" placeholder="Código de tracking?">
<button id="track-find-button" class="btn btn-default" type="button">Buscar</button>
</fieldset>
</form>
</div>
Try 1 on trigger:
Element ID: It's supposed to limit the clicks registered for only the div containing the menu.
I get this error in debugging mode:
Try 2 on trigger:
on Click ID.
Click ID error:
#
I could also use the ul tag for the trigger, as it is the only unordered list on the page.
Any hint is welcome. Thanks!
Basically I needed to understand the different variables in GTM. I've found Simo Ahava web very helpful in this regard.
https://www.simoahava.com/analytics/variable-guide-google-tag-manager/
Thanks to Simo, I also understood the benefits of usen "Match CSS Selector" option.
So my configuration ended like this:
Using:
Click All Elements.
This trigger fires on "Some Clicks".
"Click Element" -> "Matches CSS Selector" -> "#navbar-ex-collapse ul li a, #navbar-ex-collapse ul li p"
As I have li and a html elements, I needed to use 2 CSS selectors, separated by a comma.
Here is my dropdownbutton:
<xp_1:dropDownButton id="dropDownButton1">
<xp_1:this.treeNodes>
<xp_1:basicContainerNode styleClass="btn-primary" label="Tools">
<xp_1:this.children>
<xp_1:basicLeafNode label="Edit">
</xp_1:basicLeafNode>
<xp_1:basicLeafNode label="New">
</xp_1:basicLeafNode>
<xp_1:basicLeafNode label="Home">
</xp_1:basicLeafNode>
</xp_1:this.children>
</xp_1:basicContainerNode>
</xp_1:this.treeNodes>
</xp_1:dropDownButton>
How to add glyphicon to the main dropdown button?
Adding a span somewhere inside just doesn't work like for core button:
<xp:button id="button2" styleClass="btn btn-success" value="Save" title="Save">
<span class="glyphicon glyphicon-floppy-disk"></span>
</xp:button>
Once you add code in your button, i.e. an eventHandler, you can add the icon there. Here is a button I have that includes a Font Awesome icon, but Glyphicons work the same way. Once you create the button and actions, go into the source code and add the icon as below:
<xp:button
value="Submit"
id="btnSave"
styleClass="btn btn-primary"
>
<i
class="fa fa-check"
aria-hidden="true"
></i>
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete"
>
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument
var="currentDocument"
></xp:saveDocument>
<xp:openPage
name="#{sessionScope.lastPageName}"
></xp:openPage>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
UPDATE
I did some tests, and while you can't add the icon the way we both want to, you can use CSS. I used a page with one dropdown button, and added CSS :before to add the icon within the button:
button::before {
font-family: "Glyphicons Halflings";
content: "\e172";
}
You may have to play with the CSS a little but hopefully, this can help.
I have a button at the moment, rendered in my MVC application as:
#Html.ActionLink("Delete", "DeleteTransfer", "Transaction", new { transferId = (Model.Id) }, new { #class = "btn btn-danger", #onclick = "return confirm('Are you sure you want to delete this Transfer?')" })
I want to use the Twitter Bootstrap classes to add an icon. However, for that the code would look like this:
<button class="btn btn-danger"><i class="icon-white icon-trash"></i> Delete</button>
How can I apply this in my ActionLink? It has an Image (i) embedded in the button.
Try:
<a class="btn btn-danger"
href="#Url.Action("DeleteTransfer", "Transaction", new { transferId = (Model.Id) })"
onclick = "return confirm('Are you sure you want to delete this Transfer?');"
>
<i class="icon-white icon-trash">Delete</i>
</a>
According your routes, it's possible you need:
#Url.Action("DeleteTransfer", "Transaction", new { transferId = (Model.Id) }, null)
According to the bootstrap documentation (http://getbootstrap.com/components/#glyphicons-examples) glyphicons might be the way to go. Here is an example of putting an icon on a button:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
Since ActionLink() is an htmlHelper extension that returns an "a" element, i.e., <a>...</a>, I believe the extension needs to be overridden.
I tried the following, but it resulted in the glyphicon being above the "a" element:
<span class="glyphicon glyphicon-star"></span>#Html.ActionLink("Delete", "DeleteTransfer")
I also tried putting the ActionLink() inside the <span></span> with the same results. I tried using css with text-wrap: none; and white-space: nowrap; but that didn't work either.
So I believe the answer is the extension needs to be overridden to accept another parameter for the glyphicon. Unless, someone can show a trick to make it stop wrapping.