there is a button in the page with the sintax below
<div _ngcontent-cnw-c181="" class="col text-center ng-star-inserted">
<p _ngcontent-cnw-c181="" class="text-primary font-weight-bold">
Click the button below
</p>
<button _ngcontent-cnw-c181="" type="button" routerlink="/web/click" class="btn btn-primary" tabindex="0" ng-reflect-router-link="/web/click">
<i _ngcontent-cnw-c181="" aria-hidden="true" class="fa fa-check-circle"></i>
Click Here
</button>
</div>
but when I try to localize it using Locator, it returns the error: Microsoft.Playwright.PlaywrightException: 'Unknown engine "routerlink" while parsing selector routerlink=/web/click'
Page.Locator("routerlink=/web/click").ClickAsync();
The only solution I found is by searching for "text=Click here" but I would like to use the "routerlink" keyword instead because the text might change more often in the future.
This should work: Page.Locator("//button[#routerlink='/web/click']").ClickAsync();
Related
I am using Bootstrap5 and wondering how to align two buttons to the right in the same column as the "Delete" button. Another problem is no matter which "breakpoint" (md, sm) I use it's not possible to right align these two buttons properly. I am wondering what is the bootstrap way of doing it.
Snippet
<form>
<div class="hx-form-group position-relative">
<label for="el62ba8cb87eb84be2bebc9c2970de0552" class="form-label">Goal #1</label><span class="input-group"><input id="el62ba8cb87eb84be2bebc9c2970de0552" type="text" class="form-control" placeholder="Enter goal #1 text here." _bl_6="">
<button type="button" class="hx-button btn btn-danger" _bl_7="">
Delete
</button>
</span>
<div class="form-text">Hint: enter short, precise description what you want to do today</div>
</div>
<div class="hx-form-group position-relative">
<label for="el28a7e89fc62249dd80048d65487a2354" class="form-label">Goal #2</label><span class="input-group"><input id="el28a7e89fc62249dd80048d65487a2354" type="text" class="form-control" placeholder="Enter goal #2 text here." _bl_8="">
<button type="button" class="hx-button btn btn-danger" _bl_9="">
Delete
</button>
</span>
<div class="form-text">Hint: enter short, precise description what you want to do today</div>
</div>
<div class="hx-form-group position-relative">
<label for="ele59dd34cf9ed4db2a92de894f47b5946" class="form-label">Goal #3</label><span class="input-group"><input id="ele59dd34cf9ed4db2a92de894f47b5946" type="text" class="form-control" placeholder="Enter goal #3 text here." _bl_10="">
<button type="button" class="hx-button btn btn-danger" _bl_11="">
Delete
</button>
</span>
<div class="form-text">Hint: enter short, precise description what you want to do today</div>
</div>
<div class="container text-center">
<div class="row justify-content-end">
<div class="col-4">
<button type="button" class="hx-button btn btn-secondary" _bl_4="" disabled="">
New Goal
</button>
</div>
<div class="col-4">
<button type="submit" class="hx-button btn btn-primary">
Save
</button>
</div>
</div>
</div>
</form>
First of all, you don't need to use row and col as a wrapper of buttons as row cols have different purposes so you can do it like this
[https://codepen.io/kukrati/pen/YzaYEXy]
and make sure you have removed its parent .container class
if you don't want to change your existing layout due to some limitations then you just need to replace .col-lg-4 with .col-auto and then remove the parent .container class
We are having ngb dropdown such as below
<div ngbDropdown class="d-inline-block" >
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
Somehow we tried attaching the [disabled]="true" but is not disabling.
Any other way or how to do it ?
Put your code inside ng-container to disable it.
I am trying to insert a Label, Search bar, Button group in a Panel Heading.
I have the following code
<div class="panel panel-default">
<div class="panel-heading">
<span class="label label-default">
<%= yield(:title) %>
</span>
<div class="btn-group pull-right" role="group" >
<button type="button" class="btn btn-default">
<% if can? :create, Client %>
<%= link_to 'New', new_client_path %>
<% end %>
</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="input-group col-lg-3 pull-right">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
<button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button>
</div>
</div>
</div>
<div id="clients"><%= render 'clients' %></div>
<p class="small"><%= will_paginate #clients %></p>
</div>
As of now it works, but search bar and button group have no space between them. I would like to have ateast 5px space between them so like this:
-----------------------------------------------------------------
Label Search -space- btn group
-----------------------------------------------------------------
How to achieve this?
I am using Rails 4 with Sass
To answer the question better we would need to know what CSS you are using. Guessing I suggest adding a DIV around your search input and add a class with a display: inline-block and then add a right padding.
<div class="mycustclass">
<input type="text" class="form-control" placeholder="Search">
</div>
.mycustclass {
display: inline-block;
padding-right: 5px;
}
You would also need your .input-group-btn class to use a display:inline-block as well.
If that doesn't work there are plenty of other options.
Just write margin-right:5px in first btn-primary inline than it will be work
not write padding-right
<div class="input-group-btn">
<button class="btn btn-primary" style="margin-right:5px;"><i class="glyphicon glyphicon-search"></i></button>
<button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button>
</div>
I'm trying add an icon with using awesome font.
I used bootstrap button type and it's working fine.But when i would like to add a social icon using tag it does not seem.How can i do that ?
<div id="socialLoginList">
<p>
#foreach (AuthenticationDescription p in loginProviders)
{
<button type="submit" class="btn btn-lg btn-social btn-#p.AuthenticationType.ToLower()" id="btn-socialID" name="provider" value="#p.AuthenticationType" title="Log in using your #p.Caption account"><i class="fa fa-#p.AuthenticationType"></i>#p.AuthenticationType</button><br /><br />
}
</p>
</div>
Simply do a ToLower here:
<i class="fa fa-#p.AuthenticationType.ToLower()">
Font awesome icons are all lower case, so it should pick them up if you do a ToLower. Remember that HTML class names are case-sensitive.
E.g.
<i class="fa fa-google"></i>
<i class="fa fa-facebook"></i>
I am using Firebase in a pretty simple chat application. One of the features i'm working on now is the ability to update messages in the chat room, but only if you were the original author. For the editing i have an icon that, when clicked, will do some javascript to hide the message div and display a previously hidden div that has the update form in it. But i only want this to be available if you were the author of the message. Here's what the code looks like:
<li class="message phm pvm pull-left" ng-repeat="(msgId,msg) in room.messages">
<div class="message-current" data-message-id="{{msgId}}">
<span class="message-author pull-left">{{msg.author}}</span>
<span class="message-body pull-left pls">{{msg.body}}</span>
<span class="message-timestamp pull-right prs">
{{msg.timestamp | date:'MMM d, yyyy h:mm a'}}
<a class="message-update-link" href="#" ng-click="showMessageUpdate(msgId)"><span class="glyphicon glyphicon-pencil"></span></a>
</span>
</div>
<div class="message-update hidden" data-message-id="{{msgId}}">
<form class="form-inline" ng-submit="updateMessage(roomId, msgId, '<%= current_user.full_name %>')">
<textarea class="form-control update-message" ng-model="msg.body" ng-trim="false">{{msg.body}}</textarea>
<input class="button button-large button-primary" type="submit" value="Update">
</form>
</div>
</li>
Right now, i can only get it to have updatable message for ALL message or no messages. Basically, the part i am stuck on is the check of whether or not the angularjs value of {{msg.author}} is equal to the rails value of <%= current_user.id %>. Any thoughts on how this can be achieved? Thanks for any help!
SOLVED:
Thanks to Jiten for the step in the right direction. I'm new to learning AngularJS and it's pretty complex. Sometimes you just need to know where to start.
I ended up using a combination of the ngIf directive and the angular.equals function. In my rails view i used ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" on anything i wanted available to authors of that message only. This will evaluate the response of isAuthor() and only render to the dom if it evaluates to true. The code above now looks like this:
<li class="message phm pvm pull-left" ng-repeat="(msgId,msg) in room.messages">
<div class="message-current" data-message-id="{{msgId}}">
<span class="message-author pull-left">{{msg.author}}</span>
<span class="message-body pull-left pls">{{msg.body}}</span>
<span class="message-timestamp pull-right prs">
{{msg.timestamp | date:'MMM d, yyyy h:mm a'}}
<a ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" class="message-update-link" href="#" ng-click="showMessageUpdate(msgId)"><span class="glyphicon glyphicon-pencil"></span></a>
</span>
</div>
<div ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" class="message-update hidden" data-message-id="{{msgId}}">
<form class="form-inline" ng-submit="updateMessage(roomId, msgId, '<%= current_user.full_name %>')">
<textarea class="form-control update-message" ng-model="msg.body" ng-trim="false">{{msg.body}}</textarea>
<input class="button button-large button-primary" type="submit" value="Update">
</form>
</div>
</li>
Here is what isAuthor() looks like in my AngularJS controller:
$scope.isAuthor = function(msgAuthor, currentUser) {
return angular.equals(msgAuthor, currentUser);
}
Pretty simple really!
To compare two objects you can use:
angular.equals({{msg.authorId}}, <%= current_user.full_name %>)