I'm building an accordion and came across bootstrap's "Collapse".
collapse="isCollapsed"
When I load the page, the "Shared connections" panel is open by default, I'm wanting to have all panels "Shared connections" & "Other connections" closed by default until the user interacts with them.
Through my research so far, I haven't seen this done.
Here is my code:
<div class="col-xs-12">
<div class="connections-wrap" ng-click="isCollapsed = !isCollapsed">
<span class="connection-amount">3</span>
<span class="connection-type">Shared connections</span>
<i class="vf-i"></i>
</div>
<ul class="connections-list" collapse="isCollapsed">
<li>
<span class="connection-device">Eddie Benson Tablet</span>
<span class="connection-number">021 019 17338</span>
</li>
<li>
<span class="connection-device">Eddie Work Phone</span>
<span class="connection-number">021 019 17343</span>
</li>
<li>
<span class="connection-device">Eddie Work Android</span>
<span class="connection-number">021 019 17339</span>
</li>
</ul>
<div class="connections-wrap">
<span class="connection-amount">2</span>
<span class="connection-type">Other connections</span>
<i class="vf-i"></i>
</div>
</div>
Here is the solution - required ng-init="true" as collapse isn't being initialised on load.
ng-init="isCollapsed = true"
Related
I have coded a very basic blog script it's nothing elaborate but does the job (built-in bootstrap 5 & PHP), everything is working as it should in desktop and mobile view, the only small thing I'm not sure about is, when I view the site in mobile view the image (logo) appears to the left-hand side (while in mobile view), I think it would look better in the centre.
Image of what I see:
The script is located at: https://www.the-golfer-guys.com/
It's not a big deal, but I'm not sure the best way to make it appear in the centre (while only in mobile view).
my navbar code:
<nav class="navbar navbar-expand-lg border-bottom navbar-white bg-white padding-bottom" id="mainNav">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<i class="fas fa-bars"></i>
</button>
<!-- mobile -->
<div class="collapse navbar-collapse w-100 justify-content-center" id="collapsibleNavbar">
<a class="navbar-brand" href="<?= urlFull(); ?>"><img src="<?= urlFull(); ?><?= getHeaderImage(); ?>" alt="<?= urlFull(); ?>"></a>
<ul class="nav nav-pills nav-fill ms-auto">
<li class="nav-item">Home</li>
<?php $pages = DB::getInstance()->select("SELECT * FROM `pages`"); ?>
<?php foreach($pages as $page) { ?>
<li class="nav-item"><?= $page['page_name']; ?></li>
<?php } ?>
<li class="nav-item">Contact</li>
</ul>
<ul class="nav navbar-nav ms-auto" style="padding-top: 10px;">
<li>
<form class="d-flex" action="<?= urlFull(); ?>search.php" method="get">
<input class="form-control me-2" type="search" name="s" placeholder="Search ..." aria-label="Search" required>
<button type="submit" class="btn btn-success"><i class="fas fa-search"></i></button>
</form>
</li>
</ul>
</div>
</div>
</nav>
Any advice or help would be appreciated, it's more my design OCD than anything.
I am upgrading bootstrap from 4 to 5. I found that data-toggle="dropdown" needs to be changed to data-bs-toggle="dropdown".
My problem is after I did the upgrade one of my dropdown boxes shows up on the left side of screen under the button which shows up on the right side of the screen. They are both in a div tag that should be right aligning and putting them on the right column of two columns. Can someone help me figure out how to keep the drop down from escaping the div tag. Note: When I resize the page the dropdown box goes where it should be.
<div id="pagetitle" class="row">
<div class="col-md-6">
<span class="page-title">Claims</span>
</div>
<div class="col-md-6">
<div class="pull-right">
<button id="dropdownCreateNew" type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Create New <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCreateNew">
<li class="dropdown-item">Claim</li>
<li class="dropdown-item">Roster Bill</li>
<li class="dropdown-item">Hospice Notice</li>
</ul>
</div>
</div>
</div>
Here is a picture of how how the drop downs look.
https://i.stack.imgur.com/fthDP.png
After playing around I found that when I added an additional div tag after pull-right, that the group stayed together. Don't know why, but it worked.
<div class="col-md-6">
<div class="pull-right">
<div>
<button id="dropdownCreateNew" type="button" role="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Create New <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCreateNew" role="menu">
<li class="dropdown-item">Claim</li>
<li class="dropdown-item">Roster Bill</li>
<li class="dropdown-item">Hospice Notice</li>
</ul>
</div>
</div>
</div>
i got this code from http://www.lightningdesignsystem.com/components/carousel/#About-Carousel. it was supposed to do the auto play function but it is not working, even the round buttons are also not working. am i missing something?
i also know about the LWC carousel, but i need to customize some of the things which was not possible on that, so was trying this one.
code
<template>
<div class="slds-carousel">
<div class="slds-carousel__stage">
<span class="slds-carousel__autoplay">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-pressed="true" title="Stop auto-play">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#pause"></use>
</svg>
<span class="slds-assistive-text">Stop auto-play</span>
</button>
</span>
<div class="slds-carousel__panels" style="transform:translateX(-0%)">
<div id="content-id-01" class="slds-carousel__panel" role="tabpanel" aria-hidden="false" aria-labelledby="indicator-id-01">
<a href="javascript:void(0);" class="slds-carousel__panel-action slds-text-link_reset" tabindex="0">
<div class="slds-carousel__image">
<img src="/assets/images/carousel/carousel-01.jpg" alt="Visit App Exchange" />
</div>
<div class="slds-carousel__content">
<h2 class="slds-carousel__content-title">Visit App Exchange</h2>
<p>Extend Salesforce with the #1 business marketplace.</p>
</div>
</a>
</div>
<div id="content-id-02" class="slds-carousel__panel" role="tabpanel" aria-hidden="true" aria-labelledby="indicator-id-02">
<a href="javascript:void(0);" class="slds-carousel__panel-action slds-text-link_reset" tabindex="-1">
<div class="slds-carousel__image">
<img src="/assets/images/carousel/carousel-02.jpg" alt="Click to Customize" />
</div>
<div class="slds-carousel__content">
<h2 class="slds-carousel__content-title">Click to Customize</h2>
<p>Use the Object Manager to add fields, build layouts, and more.</p>
</div>
</a>
</div>
<div id="content-id-03" class="slds-carousel__panel" role="tabpanel" aria-hidden="true" aria-labelledby="indicator-id-03">
<a href="javascript:void(0);" class="slds-carousel__panel-action slds-text-link_reset" tabindex="-1">
<div class="slds-carousel__image">
<img src="/assets/images/carousel/carousel-03.jpg" alt="Download SalesforceA" />
</div>
<div class="slds-carousel__content">
<h2 class="slds-carousel__content-title">Download SalesforceA</h2>
<p>Get the mobile app that's just for Salesforce admins.</p>
</div>
</a>
</div>
</div>
<ul class="slds-carousel__indicators" role="tablist">
<li class="slds-carousel__indicator" role="presentation">
<a id="indicator-id-01" class="slds-carousel__indicator-action slds-is-active" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="content-id-01" title="Visit App Exchange tab">
<span class="slds-assistive-text">Visit App Exchange tab</span>
</a>
</li>
<li class="slds-carousel__indicator" role="presentation">
<a id="indicator-id-02" class="slds-carousel__indicator-action" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="content-id-02" title="Click to Customize tab">
<span class="slds-assistive-text">Click to Customize tab</span>
</a>
</li>
<li class="slds-carousel__indicator" role="presentation">
<a id="indicator-id-03" class="slds-carousel__indicator-action" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="content-id-03" title="Download SalesforceA tab">
<span class="slds-assistive-text">Download SalesforceA tab</span>
</a>
</li>
</ul>
</div>
</div>
</template>
Code is only for understanding purpose. This does not include javascript. You have to wire your code to JS with following aspects:
Write onclick function on anchored tag of "round button" as you call them in question.
This JS button should call a method which does following things :
mark all tags with class "slds-carousel__indicator-action" as inactive by removing any "slds-is-active" class present.
find which element is clicked and add "slds-is-active" in class attribute.
make area selected attribute to true for only the element clicked.
make tab index of actual panel should be 0 for tab to be shown. This can be matched by indicator Id. and for all others it should -1.
assign transform style dynamically using formula : -100*index
Here is sample:
<template>
<div style="">
<div class="slds-carousel" id="carousel-example-generic" data-ride="carousel">
<div class="slds-carousel__stage">
<span class="slds-carousel__autoplay">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-pressed="true" title="Stop auto-play">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/lightning-ui/dist/icons/utility-sprite/svg/symbols.svg#pause"></use>
</svg>
<span class="slds-assistive-text">Stop auto-play</span>
</button>
</span>
<div class="slds-carousel__panels" style={transformstyle}>
<template for:each={tableDataToDisplay} for:item='dataIndex'>
<div id={dataIndex.contentid}
key={dataIndex.index}
class="slds-carousel__panel"
role="tabpanel"
aria-hidden={dataIndex.areahidden}
aria-labelledby={dataIndex.indicatorid}>
<div
class="slds-carousel__panel-action slds-text-link_reset"
tabindex={dataIndex.tabindex}>
<div >
<!-- Any LWC which you want to show in screen -->
</div>
</div>
</div>
</template>
</div>
<ul class="slds-carousel__indicators" role="tablist">
<template for:each={tableDataToDisplay} for:item='dataIndex'>
<li data-target="#carousel-example-generic"
key={dataIndex.index}
data-slide-to={dataIndex.dataslideto}
class="slds-carousel__indicator"
role="presentation">
<div id={dataIndex.indicatorid}
class={dataIndex.liclass}
data-index={dataIndex.index}
data-ariacontrols={dataIndex.contentid}
role="tab"
aria-selected={dataIndex.areaselected}
aria-controls={dataIndex.contentid}
onclick={handleclick}
title="Visit App Exchange tab">
</div>
</li>
</template>
</ul>
</div>
</div>
</div>
</template>
in JS have this function :
selectelement(index){
this.template.querySelectorAll(".slds-carousel__indicator-action").forEach(ele=>{
ele.classList.add('slds-is-active');
ele.classList.remove('slds-is-active');
});
this.template.querySelector(`[data-index="${index}"]`).classList.add('slds-is-active');
this.dataDisplay.forEach(ele=>{
ele.areaselected = false;
ele.tabindex = -1;
ele.areahidden = true;
if(ele.index === index){
ele.areaselected = true;
ele.tabindex = 0;
ele.areahidden = false;
}
});
this.transformstyle = `transform:translateX(-${
index * 100
}%);`
this.dataDisplay = [...this.dataDisplay];
}
The following is the partial view that I'm using. Somehow the 'ng-scope' class is not added automatically to every HTML tag. Could someone tell me what might be the cause of this? I know angular.js adds class conditionally but I don't know how to fix this.
<div class="my-photo-header">
<div class="container">
<a class="navbar-brand my-navbar-brand">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<form class="navbar-form my-navbar-form navbar-left" role="search">
<div>
<input id="photo-title" type="text" class="form-control" placeholder="Untitled"
title="Edit your photo title here." value="TITLE">
</div>
</form>
<ul id="photo-title-header" class="nav nav-tabs">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
File <span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<a>Save</a>
</li>
<li>
<a ng-click="vm.haha()">Upload</a>
<input type="file" upload-image="uploadImage"/>
</li>
<li><a>Open</a></li>
<li><a>Invite</a></li>
<li role="separator" class="divider"></li>
<li><a>Export as<span class="caret"></span></a></li>
<li><a>Print</a></li>
</ul>
</li>
<!-- Please change TODO to display the number, and maybe change style to not be a tab -->
<li role="listitem"><a>{{TODO}} revisions</a></li>
<li>Logout</li>
</ul>
</div>
</div>
<header id="top-header">
<div class="row-fluid">
<div id="school-info" class="pull-left">
<span id="school-name" class="lead">THPT Hùng Vương</span>
<small> Học kỳ I năm 2013-2014</small>
</div>
<div id="user-info" class="pull-right">
<a href="/app/truong_hoc" title="Sửa thông tin người sử dụng, đổi mật khẩu, đổi tên tài khoản.">
<i class="icon-user"></i>
<span class="hidden-phone">
<small class="hidden-phone hidden-tablet">(truong_hoc)</small>
</span>
</a>
<a id="logout" href="/logout/" title="Thoát ra, kết thúc phiên làm việc. ">
<i class="icon-signout"></i>
<small class="hidden-phone hidden-tablet">Đăng xuất</small>
</a>
</div>
</div>
</header>
Logout element has an icon and a text. When I use Click Element icon use
xpath: "Click Element xpath=//a[#id='logout']/i"
it works, but when I use Click Element text use
xpath: "Click Element xpath=//a[#id='logout']/small"
it doesn't work. Help!
(Sorry because that website doesn't support English and I don't have enough reputation to post images)