I was trying to click "CDE" from below code
<div class="accordion-toggle" role="button" aria-expanded="true">
<!---->
<li _ngcontent-c1="" accordion-heading="" class="dropdown spaTest" >
<a _ngcontent-c1="" class="btn-header" href="javascript:void(0)">
<i _ngcontent-c1="" _ngcontent-c3="" class="fas fa-cog"></i>
ABC</a>
<a _ngcontent-c1="" class="btn-header" href="javascript:void(0)" >
<i _ngcontent-c1="" _ngcontent-c3="" class="fas fa-users"></i>
CDE</a>
<span _ngcontent-c1="" class="glyphicon glyphicon-log-out" title="Logout"></span>
</li> </div>
I have given,
Sleep 30
Page Should Contain Element xpath=//a[contains(text(),'CDE')]
---> Working till this code
Click Element xpath=//a[contains(text(),'CDE')]
When executing the click element, it is throwing element not interactable error.
I have increased the sleep time also, bot no luck.
Please help
Related
I am implementing a website with Meteor + Blaze + Bulma. I've basically created a navigation menu and got the burger button working for small devices. But the problem is, that the position of the burger button is messed up.
I would like to have it on the far right and vertically aligned with the logo. But the burger is right next to the logo and also slightly lower. I've tried "position: absolute; right:0;" but it keeps jumping back.
Is Bulma not suited for use with Blaze and Meteor? I have no other CSS files so far and just added Bulma in the header tags. So what could be the issue?
<template name="navigation">
<nav class="navbar is-transparent" role="navigation" aria-label="main navigation">
<div class="container">
<!-- Logo/Home -->
<div class="navbar-brand">
<a class="" href="{{pathFor route='Home'}}">
<img src="logo.svg" width="200" height="29" />
</a>
<!-- Burger Menu Button -->
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navlist">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<!-- Navigation Conent -->
<div id="navlist" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="{{pathFor route='1'}}">
1
</a>
<a class="navbar-item" href="{{pathFor route='2'}}">
2
</a>
<a class="navbar-item" href="{{pathFor route='3'}}">
3
</a>
<a class="navbar-item" href="{{pathFor route='4'}}">
4
</a>
<a class="navbar-item" href="{{pathFor route='5'}}">
5
</a>
</div>
<!-- Navbar social -->
<div class="navbar-end">
<a class="navbar-item icon is-large" href="https://www.meetup.com/...">
<i class="fab fa-lg fa-meetup"></i>
</a>
<a class="navbar-item icon is-large" href="https://www.facebook.com/...">
<i class="fab fa-lg fa-facebook"></i>
</a>
<a class="navbar-item icon is-large" href="https://www.youtube.com/...">
<i class="fab fa-lg fa-youtube"></i>
</a>
</div>
</div>
</div>
</nav>
You need to add the class navbar-item to the container of your logo like that :
<div class="navbar-brand">
<a class="navbar-item" href="{{pathFor route='Home'}}"> <!-- Adding the class navbar-item -->
<img src="logo.svg" width="200" height="29" />
</a>
<!-- Burger Menu Button -->
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navlist">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
Result on my own project :
Without navbar-item :
With navbar-item :
I am using Bootstrap-4 for my new website. I am using the drop-down in multiple places of the page. In the header nav-bar the drop-down works fine but when I use the same drop-down logic inside the page, bootstrap or popper is adding some inline styles, messing up my styles. Is there a way to disable this automatic inline CSS from getting added?
Below is the screenshot of faulty drop-down in the page,
Below is the screenshot of the correct dropdown in the top header.
Edit:
Code
Faulty Dropdown
<div className="pull-right">
<div className="dropdown">
<a
href="#sfsd"
className="dropdown-toggle"
data-toggle="dropdown"
id="dropdownMenuLink"
aria-haspopup="true"
aria-expanded="false"
>
<i className="fa fa-ellipsis-v" aria-hidden="true" />
</a>
<ul className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<li className="dropdown-item">
<a href="#">
<i className="fa fa-language mr-2" />
<span>Switch to Arabic</span>
</a>
</li>
<li className="dropdown-item">
<a href="#UpdatePersonalInfo">
<i className="fa fa-user mr-2" />
<span>My Profile</span>
</a>
</li>
<li className="dropdown-item">
<a href="#ChangeSecuritySettings">
<i className="fa fa-cog mr-2" />
<span>My Configuration</span>
</a>
</li>
<li className="dropdown-item">
<a href="login.html">
<i className="fa fa-sign-out mr-2" />
<span>Logout</span>
</a>
</li>
</ul>
</div>
</div>
Correct Dropdown
<div className="user-menu dropdown pull-right">
<a
href="#Menu"
className="dropdown-toggle"
data-toggle="dropdown"
aria-expanded="false"
>
<i className="fa fa-gear fa-spin" />
</a>
<ul className="dropdown-menu dropdown-menu-right">
<li className="dropdown-item">
<a href="#">
<i className="fa fa-language mr-2" />
<span>Switch to Arabic</span>
</a>
</li>
<li className="dropdown-item">
<a href="#UpdatePersonalInfo">
<i className="fa fa-user mr-2" />
<span>My Profile</span>
</a>
</li>
<li className="dropdown-item">
<a href="#ChangeSecuritySettings">
<i className="fa fa-cog mr-2" />
<span>My Configuration</span>
</a>
</li>
<li className="dropdown-item">
<a href="login.html">
<i className="fa fa-sign-out mr-2" />
<span>Logout</span>
</a>
</li>
</ul>
As stated in the docs, you can use the data-display option....
"By default, we use Popper.js for dynamic positioning. Disable this
with static."
Just remember that then you'll have to handle positioning of the dropdown menu.
https://www.codeply.com/go/85fPF73EtF
Related: Bootstrap 4 dropdown menu within accordion
Please add your custom css code (it is not real solution but working )
#media (min-width: 0px) and (max-width: 991px) {
.dropdown-menu.show {
transform: unset !important;
position: unset !important;
}
}
I am trying to learn how to construct a sidebar.
I get an unwanted rectangular area under item 3 when it is expanded.
I want to get rid of this blank rectangular area.
I have not added any padding in the code, there is no CSS. I tried to do a browser inspect, but did not get to fix it.
I want to remove this blank rectangular area.
Thanks.
The code is here (also referenced in the link below):
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">
Item 1</a>
<a ref="#" class="list-group-item list-group-item-success">
Item 2</a>
<a href="#IDp_3" class="list-group-item list-group-item-success"
data-toggle="collapse"
onclick=" $('#PM0001').toggleClass('fa-minus-square fa-plus-square')">
<i class="fas fa fa-plus-square" id="PM0001" ></i>
Item 3
<div class="collapse" id="IDp_3">
<a href="" class="list-group-item">
-3.1</a>
<a href="" class="list-group-item">
-3.2</a>
<a href="" class="list-group-item">
-3.3</a>
</div?
<div>
</div>
JS Fiddle code with problem.
Close the anchor after Item 3
<a href="#p_3" class="list-group-item list-group-item-success" data-toggle="collapse" onclick=" $('#PM0001').toggleClass('fa-minus-square fa-plus-square')">
<i class="fas fa fa-plus-square" id="PM0001" ></i>
Item 3
</a>
Fiddle: https://jsfiddle.net/5vfxpt6b/
its because you didn't close you 3rd anchor.
Code: No Closing tag.
<a href="#p_3" class="list-group-item list-group-item-success" data-toggle="collapse"
onclick=" $('#PM0001').toggleClass('fa-minus-square fa-plus-square')">
<i class="fas fa fa-plus-square" id="PM0001" ></i>
Item 3
This is a weird frustrating issue, as I'm working on converting code from Bootstrap 3 to 4. Navbar with a button group on the right (user name, login options, etc.)
When the button group is not a part of the navbar (not included in the menu -- I have PHP code that is not shown below that checks for a specific page if the menu (navbar) is to be displayed or not, the dropdown list appears correct -- vertical, etc. If, however, I place the button group in the navbar, the dropdown list goes horizontal.
I am sure this is because some of the code is somehow interfering with other parts, but I cannot figure it out. Stripping out the PHP code, and just showing the HTML for Bootstrap 4, this is what I have -- first with button group without the navbar:
<nav class="nav navbar-light bg-light navbar-right" style="margin-top: 3px !important;">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">hirsch</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
</div> <!-- / dropdown-menu -->
</div> <!-- / btn-group -->
</nav> <!-- / navbar-right -->
That code displays as expected. If, however, I insert this before the end of the collapse part of the navbar (or if I put it after, it doesn't seem to matter), it displays horizontally instead, which is ... weird:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="">Who's Who</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Disclaimer/Copyright</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
</ul> <!-- / navbar-nav -->
<nav class="nav navbar-light bg-light navbar-right" style="margin-top: 3px !important;">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">UserName</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
</div> <!-- / dropdown-menu -->
</div> <!-- / btn-group -->
</nav> <!-- / navbar-right -->
</div> <!-- / collapse -->
</nav>
You should be able to copy and paste the code samples and see them if you have the rest of Bootstrap 4 set up. Click the down-caret symbol on the button group, in the first example it is vertical, in the second it is horizontal, but it's the exact same code. I am really confused where the issue is, I've been staring at this for quite some time and cannot find the problem.
Turns out that the Dropdown has changed a bit, and rather than using a UL tag and such:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
It works better (and simpler) with:
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<a class="dropdown-item" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
<a class="dropdown-item" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
<a class="dropdown-item" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</div>
I have created FAB button on page that has scroll bar. My expectation is FAB button will be sticky on right down corner when page is getting scrolled. However, the button also scroll with page. This gives indication that z-index of FAB is at same level as other HTML tags but in CSS, I have specifically given z-index of FAB as 1000 (so I expect it to be higher than other element on page)
I have created fiddle to replicate issue. Can anyone please check and provide corrective action
https://jsfiddle.net/jh7mv590/2/
<div class="container">
<div class="row">
<div id="inbox">
<div class="fab btn-group show-on-hover dropup">
<div data-toggle="tooltip" data-placement="left" title="Compose" style="margin-left: 42px;">
<button type="button" class="btn btn-danger btn-io dropdown-toggle" data-toggle="dropdown">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x fab-backdrop"></i>
<i class="fa fa-plus fa-stack-1x fa-inverse fab-primary"></i>
<i class="fa fa-pencil fa-stack-1x fa-inverse fab-secondary"></i>
</span>
</button></div>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><i class="fa fa-coffee"></i></li>
<li><i class="fa fa-comments-o"></i></li>
<li><i class="fa fa-hand-o-up"></i></li>
<li><i class="fa fa-ticket"></i></li>
</ul>
</div>
</div>
</div>
A bit late, but position: fixed; is probably what you are looking for.
.show-on-hover {
position: fixed;
bottom: 50px;
right: 50px;
}