I created a site using Boostrap and WAMP Server and now I am trying to move it to a virtual server, so more people could use it.
The site looks fine, but when clicking a drop-down toggle for example, it doesn't display anything, it just goes to href="#"
My element looks like this:
<li class="dropdown" style="border-radius: 5px;">
<a target="_blank" href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white;font-size: medium; background-color: #8A2BE2;border-radius: 5px;">Search <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li><a target="_blank" href="search_1" style="color:#601e9e;font-size: medium;border-radius: 5px;">Option 1</a>
</li>
<li><a target="_blank" href="search" style="color:#601e9e;font-size: medium;border-radius: 5px;">Other Options</a>
</li>
</ul>
</li>
Is there anything I need to change? I moved all the files and folders.
You probably missed the bootstrap JavaScript file. Make sure you add after your footer and it should be fine. Your code should have something like this:
<script src="/js/bootstrap.min.js"></script>
Make sure ti put your script after jQuery script. Additionally, you may have this script, but it can't find the file in the specified location. Check if the file exist on your server.
Related
I want to create a form in angular, I have one problem. I would like this form to have a tab menu that does not move to subpages, so as not to lose data. I used to have a similar form not in Angular and used this method. But I don't know what's best in angular, not to make subpages, just everything on one page, so that the data when switching to tabs don't disappear. Please help.
<li>
<a data-toggle="tab" href="#User-details">User details</a>
</li>
<li>
<a data-toggle="tab" href="#Account-details">Account details</a>
</li>
<li>
<a data-toggle="tab" href="#validateSubmit">ValidateSubmit</a>
</li>
<li>
<a data-toggle="tab" href="#submitFlag">submitFlag</a>
</li>
<li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">Contacts
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Email</li>
<li><a rel="noopener" href="#" target="_blank">LinkedIn</a></li>
<li><a rel="noopener" href="#">Github</a></li>
<li><a rel="noopener" href="#" target="_blank">Stackoverflow</a></li>
</ul>
</li>
I am having an issue with a dropdown box in my header. I have been looking all over on the bootstrap website and w3schools and I have found stuff but it seems like nothing has worked so I wanted to see if anyone else had this problem and if there was a solution.
What is happening is when I select the dropdown it does not want to toggle. I even made sure to have the toggle class. When I type in it will stay stuck open, so something is wrong with the toggle but I have not been able to find the solution.
one of bootstrap 5 changes is using data-bs-... instead of data-... attributes, so try data-bs-toggle="dropdown" attribute
It is going to look stupid but, please if you have this problem, make sure to include the bootstrap script at the bottom of the body. It will make your life much easier lol.
I have use the Yeoman angular-fullstack generator and absolutely love it!
I'm trying to add a dropdown in the navbar.
I found the navbar controller in Client/Components/Navbar/navbar.controller.js and added items to the menu object. This works fine for individual pages, however I cannot find any syntax on how to add a dropdown menu!
I'm sure this is an easy question to answer but I am struggling to find any relevant documentation.
Cheers
Angular fullstack uses bootstrap. So you can use a bootstrap 3 drop-down menu where you would like your menu to be in the file that you found. If you go to http://getbootstrap.com/components/#dropdowns it's explained there.
angularfulstack may use bootstrap 3, however, for dropdown you need to use ui-bootstrap way of doing things.
<li ng-show="$ctrl.isLoggedIn()" class="btn-group" uib-dropdown is-open="status.isopen">
<a>
<span id="single-button" type="button" uib-dropdown-toggle ng-disabled="disabled">
<span class="glyphicon glyphicon-cog"></span>
</span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li ng-show="$ctrl.isAdmin()" ui-sref-active="active"><a ui-sref="users"><span class="fa fa-address-card-o"></span> Users</a></li>
<li ng-show="$ctrl.isAdmin()" ui-sref-active="active"><a ui-sref="dashboard"><span class="fa fa-dashboard"></span> Dashboard</a></li>
<li ng-show="$ctrl.isAdmin()" class="divider"></li>
<li ng-show="$ctrl.isLoggedIn()" role="menuitem" ui-sref-active="active"><a ui-sref="company"><span class="fa fa-gears"></span> Company Information</a></li>
</ul>
</li>
I've been using Selenium with the product for a while.
Regular HTML pages, forms and javascript are working well with it.
Our developer just added an AJAX drop-down menu.
I can't 'record' that with selenium, how can I use it? Actually I can record that the control was initially clicked (which makes the drop-down appear) but not what option is then clicked. How can I then detect that they clicked on one of the options?
The HTML that's displayed is:
<ul id="fruit-switcher" class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle" href="#">
Change fruit…
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a rel="nofollow" data-method="put" href="/admin/fruits/23-bananas/activate"></a>
</li>
<li>
<a rel="nofollow" data-method="put" href="/admin/fruits/28-apples/activate"></a>
<li>
</li>
<li>
other options (a links)...
</li>...
</ul>
</li>
</ul>
<script>
//<![CDATA[
$(function() {
$('#fruit-switcher .dropdown-toggle').dropdown();
})
//]]>
</script>
You can always send_keys to the element.
Actually it was straight-forward selenium code:
click link="Change..."
pause 200
click //ul[contains(#id,'fruit-switcher')]//ul[contains(#class,'dropdown-menu')]/li[3]/a
click link="Change..."
pause 600
click //ul[contains(#id,'fruit-switcher')]//a[contains(text(),'Bananas')]
I've got a project I'm working on and for some reason, I can't get the dropdowns to work on my menu. I've included the proper files which leads me to believe it's a problem in my code.
Here's my page in action: https://git.jobud9.com/ (try the dropdown on the right side of the menu. Also don't mind the prompt your browser will issue because my certificate approval's still pending.)
And here's the code powering it:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>hi</li>
</ul>
</li>
Thanks much in advance!
Your html code is correct. Maybe you forgot to attach a script? Look this dropdown js