I have the following code in my React render function:
<div ref="btnGroup" className="dropdown">
<button class="dropdown-toggle" data-toggle="toggle" onClick={this.toggleDropdown}></button>
<ul class="scrollable-menu-parent dropdown-menu">
<div>
<form class="droplist-panel">
<input class="droplist-search" />
<div class="scrollable-menu">
<li class="dropdown-item"> </li>
...
...
</div>
</form>
</div>
</ul>
</div>
In the toggle dropdown function, I am adding the open class to the topmost div.
However, the <ul> is not getting the auto dropdown style when it is open, the width is way larger and the positioning is also incorrect.
Am I doing something wrong here with the dropdown, dropdown-toggle and dropdown-menu which is causing the <ul> to not get correct classes?
Edit:
toggleDropdown() {
const $el = $(this.refs.btnGroup);
if ($el.is('.open')) {
this.closeDropdown($el);
}
else {
this.openDropdown($el);
}
},
closeDropdown(ele) {
ele.removeClass('open');
this.clearState();
},
openDropdown(ele) {
ele.addClass('open');
if (this.props.onOpen) {
this.props.onOpen.bind(this)();
}
},
Related
I am displaying multiple webview contents using Electron Js.
part of index.html
<div class="contentArea">
<div id="mySidebar" class="leftMenu">
<ul id="myTab" class="nav nav-tabs">
<li class="nav-item">
Tab1
</li>
<li class="nav-item">
Tab2
</li>
<li class="nav-item">
Tab3
</li>
</ul>
</div>
<div class="contentPages tab-content">
<div class="tab-pane show active" id="webview1">
<webview src="link1" style="width:100%; height:100%" disablewebsecurity allowpopups></webview>
</div>
<div class="tab-pane" id="webview2">
<webview src="link2" style="width:100%; height:100%" disablewebsecurity allowpopups></webview>
</div>
<div class="tab-pane" id="webview3">
<webview src="link3" style="width:100%; height:100%" disablewebsecurity allowpopups></webview>
</div>
<script>
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var activeTab = $(e.target).text(); // Get the name of active tab
var previousTab = $(e.relatedTarget).text(); // Get the name of previous tab
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>
</div>
</div>
I used bootstrap and jquery for design.
Navigation between webviews works very nicely with jquery.
I'm trying to do. Creating forward, backward and refresh buttons for each webview.
It's like an internet browser.
I didn't manage to use the codes properly in ElectronJS.
Can anyone who knows about this please help?
It's Work.
$(document).on( 'click', '#back-button-id', function(){
if(webview-id.canGoToOffset(-1)){
webview-id.goBack();
} });
$(document).on( 'click', '#next-button-id', function(){
if(webview-id.canGoToOffset(+1)){
webview-id.goForward();
} });
I am working on a menu drop down in next.js project,
I made a method to hide and show the data of the sub menu,but I am not able to show the specific sub dropdown. Here is the code
import {useEffect, useState } from "react";
function Header({data}){
const [showMe, setShowMe] = useState(false);
function toggle(param){
console.log(param)
setShowMe(!showMe);
};
return(
<div className="mobile-header">
<div className="mobile-menu">
<div className="menu-icon">
<div className="wrapper">
<input type="checkbox" id="navigation" />
<label for="navigation">
+
</label>
<nav>
<ul>
<li className="menu-heading">
<span>Menu</span>
<span>
<label for="navigation">X</label>
</span>
</li>
{data.menus.map((post, index) => {
return (
<li className="menu-list" id={index}>
{post.title} <span onClick = {(event)=>toggle({index})} index={index} >+</span>
<ul style={{display: showMe?"block":"none"}} index={index} value={index} className="category-one">
{post.menu_columns.map((subItems, sIndex) => {
return <li index={sIndex}>
{subItems.title}
<span>+</span>
<ul className="category-two">
{subItems.menu_items.map((x) => {
return <li>
{x.title}
</li>
})}
</ul>
</li>;
})}
</ul>
</li>)})}
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
)
}
export default Header;
toggle is the function, which responsible to show and hide the data, there is a parameter passed in this function which provide the specific index value, how do we target the specific div by using the index value in this.
I have a razor page where I am displaying the list of selected items from a dropdown menu in a div tag. How can I get #FormattedText auto wrap if the list of items selected exceeds the size of the div.
I tried to apply word-wrap and white-space styles and neither of them worked. The content extends beyond the and the scroll bars are displayed. How can I wrap the content within the ? Thanks for any suggestions!
<style>
.dropdown {
word-wrap: normal;
white-space: normal;
}
</style>
<div class="form-control col-md-4 dropdown dropdown-toggle">
#FormattedText
<div class="dropdown-menu">
#foreach (var item in Items)
{
<div>
<input type="checkbox" #bind="item.IsUpdated" />
<label for="#item.Name">#item.Name</label>
</div>
}
</div>
</div>
List<string> selectedItems = new List<string>();
public string FormattedText
{
get
{
selectedItems.Clear();
selectedItems.AddRange(Items.Where(s => s.IsUpdated).Select( item => { return item.Name; }));
if (selectedItems.Any())
{
return string.Join(",", selectedItems.ToArray());
}
}
set
{
selectedText = value;
}
}
First of all, your Bootstrap .dropdown structure is not correct. If you look at their examples, .dropdown-toggler and .dropdown-menu need to be the same level, wrapped by .dropdown. Also each item in .dropdown-menu needs to have .dropdown-item class as well.
So you need to change the structure to:
<div class="form-control col-md-4">
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggler"
data-toggle="dropdown">
#FormattedText
</button>
<div class="dropdown-menu">
#foreach (var item in Items)
{
<div class="dropdown-item">
<input type="checkbox" #bind="item.IsUpdated" />
<label for="#item.Name">#item.Name</label>
</div>
}
</div>
</div>
It will look something like this:
The reason why the formatted text, wrapped in the button, is not wrapping is because .dropdown-toggler has style white-space: nowrap;. You can get rid of that style or use Bootstrap utility class .text-wrap on the .dropdown-toggler
<div class="form-control col-md-4">
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggler text-wrap"
data-toggle="dropdown">
#FormattedText
</button>
...
</div>
Lastly the dropdown is out of the .form-control's border. That's because .form-control has a fixed height. You can set its height style to auto, or use Bootstrap utility class .h-auto:
<div class="form-control col-md-4 h-auto">
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggler text-wrap"
data-toggle="dropdown">
#FormattedText
</button>
...
</div>
Now the whole thing looks like this:
demo: https://jsfiddle.net/davidliang2008/3bykc4rf/14/
I try to show a div under each link in a navbar as long as we are in that active page. I'm iterating every link with * ngFor
What I need is something like this:
But what I get is this:
Here my code:
component.html
<li class="nav-item mx-1" *ngFor="let link of links">
<a class="nav-link" routerLinkActive="active" [routerLink]="link.url" [routerLinkActiveOptions]="{ exact: true }">
{{link.nombre}}
</a>
<div *ngIf="getRouteActive()" class="bg-primary" style="height: 4px;"></div>
</li>
component.ts
getRouteActive() {
return this.router.url === '/item1';
}
You can pass the url as a parameter to your function.
getRouteActive(url) {
// I assume your url has a forward slash already
return this.router.url === url;
}
Then in your template
<li class="nav-item mx-1" *ngFor="let link of links">
<a class="nav-link" routerLinkActive="active" [routerLink]="link.url" [routerLinkActiveOptions]="{ exact: true }">
{{link.nombre}}
</a>
<div *ngIf="getRouteActive(link.url)" class="bg-primary" style="height: 4px;"></div>
</li>
That should give you the desired result.
Alternatively, using CSS:
.nav-item {
div {
display: none;
}
.active + div{
display: block;
}
}
I am using Bootstrap's affix side-navigation. When you scroll down to the bottom of the element which the navigation refers to, the class .affix-bottom is applied to the navigation element and it should scroll (exactly in the way the side navigation in the Boostrap documentary works).
However, when the class changes to affix-bottom and the following styles are applied, the affix-navigation moves to the top of the page (and out of the viewport).
affix-bottom {
position: absolute;
top: auto;
bottom: 200px;
}
I am not sure wether the issue is related to Bootstrap. I have compared the styles Bootstrap natively uses and the styles I use and they are exactly the same.
This is the html I use:
<div class="row">
<div class="span3 bs-docs-sidebar" id="navfaq">
<ul class="nav nav-list bs-docs-sidenav affix-top">
<li class="">
<a onclick="scrollToAnchor('anchor1'); return false;" href="#anchor1">Go to anchor1</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor2'); return false;" href="#anchor2">Go to anchor2</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor3'); return false;" href="#anchor3">Go to anchor3</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor4'); return false;" href="#anchor4">Go to anchor4</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor5'); return false;" href="#anchor5">Go to anchor5</a>
</li>
<li class="active">
<a onclick="scrollToAnchor('anchor6'); return false;" href="#anchor6">Go to anchor6</a>
</li>
<li>
<a>
<button class="btn pull-center">Contact</button>
<button class="btn pull-center">Call</button>
<p class="caption">on weekdays</p>
</a>
</li>
</ul>
</div>
<div class="span9">
...
</div>
As Bootstrap's Affix is having some issues, I wrote my own script which changes the classes of the affix from .affix-top to .affix when you scroll further than the top-position of the .row element and when you scroll to the bottom of the .row element, it will add the class .affix-bottom.
$(document).ready(function() {
$(window).scroll(function(){
if( $('.nav.nav-list.bs-docs-sidenav').height() >= (($('#anchor1').offset().top + $('.row .span9').height() - $('.navbar').height() - $(window).scrollTop() - 40 ) ) ) {
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-bottom');
}
else {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-bottom');
if( $(window).scrollTop() >= (($('#anchor1').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
}
else if( $(window).scrollTop() < (($('#anchor1').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
}
}
});
});
This keept my up all night and any help would be greatly appreciated.
Edit: Ok, I finally fixed it. However, it's more of a workaround. I changed the JS to the following:
$(document).ready(function() {
$(window).scroll(function(){
if( $('.nav.nav-list.bs-docs-sidenav').height() >= (($('#allgemeine-fragen-zu-meinunterricht-de').offset().top + $('.row .span9').height() - $('.navbar').height() - $(window).scrollTop() - 40 ) ) ) {
$(".span3.bs-docs-sidebar").css({
'position': 'relative',
'height': $('.row .span9').height()
});
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-bottom');
}
else {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-bottom');
if( $(window).scrollTop() >= (($('#allgemeine-fragen-zu-meinunterricht-de').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
}
else if( $(window).scrollTop() < (($('#allgemeine-fragen-zu-meinunterricht-de').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
}
}
});
});
I have no idea why it's working in Bootstrap without the position:relativ and the equivalent height for the span3.
try this
just add class affix to div
<div class="span3 bs-docs-sidebar affix affix-top" id="navfaq">
<ul class="nav nav-list bs-docs-sidenav ">
<li class=""><a onclick="scrollToAnchor('anchor1'); return false;" href="#anchor1">Go
to anchor1</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor2'); return false;" href="#anchor2">Go
to anchor2</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor3'); return false;" href="#anchor3">Go
to anchor3</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor4'); return false;" href="#anchor4">Go
to anchor4</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor5'); return false;" href="#anchor5">Go
to anchor5</a> </li>
<li class="active"><a onclick="scrollToAnchor('anchor6'); return false;" href="#anchor6">
Go to anchor6</a> </li>
<li><a>
<button class="btn pull-center">
Contact</button>
<button class="btn pull-center">
Call</button>
<p class="caption">
on weekdays</p>
</a></li>
</ul>
</div>