<div class="col-lg-3">
<ul class="list-group list-group-flush bg-transparent">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
How do I make the background color transparent so it would take the color of the bigger div?
You should use the bg-transparent class for every li children as well:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="col-lg-3" style="background-color: cyan;">
<ul class="list-group list-group-flush bg-transparent">
<li class="list-group-item bg-transparent">An item</li>
<li class="list-group-item bg-transparent">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item bg-transparent">A fourth item</li>
<li class="list-group-item bg-transparent">And a fifth one</li>
</ul>
</div>
In the above example, only the third item is not transparent.
Related
I have started a new project in MVC 5 and i have downloaded a bootstrap template. the template works okay as a normal website.. But when I try to integrate it on the .net project it doesn't works. I have attached picture for better understatement.
Normal HTML image.
MVC Project Image
Here is my MVC code in _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="../../Content/img/favicon.png" type="image/png">
<title>Fashiop</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="#Url.Content("../../Content/bootstrap.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/linericon/style.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/css/font-awesome.min.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/owl-carousel/owl.carousel.min.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/lightbox/simpleLightbox.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/nice-select/css/nice-select.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/animate-css/animate.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/jquery-ui/jquery-ui.css")">
<!-- main css -->
<link rel="stylesheet" href="#Url.Content("../../Content/css/style.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/css/responsive.css")">
</head>
<body>
<!--================Header Menu Area =================-->
<header class="header_area">
<div class="top_menu row m0">
<div class="container-fluid">
<div class="float-left">
<p>Call Us: 012 44 5698 7456 896</p>
</div>
<div class="float-right">
<ul class="right_side">
<li>
<a href="login.html">
Login/Register
</a>
</li>
<li>
<a href="#">
My Account
</a>
</li>
<li>
<a href="contact.html">
Contact Us
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="index.html">
<img src="img/logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<div class="row w-100">
<div class="col-lg-7 pr-0">
<ul class="nav navbar-nav center_nav pull-right">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item submenu dropdown">
Shop
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="category.html">Shop Category</a>
<li class="nav-item">
<a class="nav-link" href="single-product.html">Product Details</a>
<li class="nav-item">
<a class="nav-link" href="checkout.html">Product Checkout</a>
<li class="nav-item">
<a class="nav-link" href="cart.html">Shopping Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="confirmation.html">Confirmation</a>
</li>
</ul>
</li>
<li class="nav-item submenu dropdown">
Blog
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="single-blog.html">Blog Details</a>
</li>
</ul>
</li>
<li class="nav-item submenu dropdown">
Pages
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
<li class="nav-item">
<a class="nav-link" href="tracking.html">Tracking</a>
<li class="nav-item">
<a class="nav-link" href="elements.html">Elements</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
<div class="col-lg-5">
<ul class="nav navbar-nav navbar-right right_nav pull-right">
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-user" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="lnr lnr lnr-cart"></i>
</a>
</li>
<hr>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>
<!--================Header Menu Area =================-->
#*<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>*#
#*<div class="container body-content">*#
#RenderBody()
#*<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>*#
<script src="#Url.Content("../../Scripts/jquery-3.2.1.min.js")"></script>
<script src="#Url.Content("../../Scripts/popper.js")"></script>
<script src="#Url.Content("../../Scripts/bootstrap.min.js")"></script>
<script src="#Url.Content("../../Scripts/stellar.js")"></script>
<script src="#Url.Content("../../Content/vendors/lightbox/simpleLightbox.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/nice-select/js/jquery.nice-select.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/isotope/imagesloaded.pkgd.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/isotope/isotope-min.js")"></script>
<script src="#Url.Content("../../Content/vendors/owl-carousel/owl.carousel.min.js")"></script>
<script src="#Url.Content("../../Scripts/jquery.ajaxchimp.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/counter-up/jquery.waypoints.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/flipclock/timer.js")"></script>
<script src="#Url.Content("../../Content/vendors/counter-up/jquery.counterup.js")"></script>
<script src="#Url.Content("../../Scripts/mail-script.js")"></script>
<script src="#Url.Content("../../Scripts/theme.js")"></script>
</body>
</html>
I implemented a multi-language website by using resources files in Asp.net MVC.
All works fine, but my problem is in the layout. How I can use dynamic resources in my layout using view-bag?
I need to write something like this somewhere in my layout but I dont know what is the correct way to do this:
#{ var langu = ViewBag.lang;}
#Resources.langu.App_Name;
it has Error of course.
here is my layout page if needed:
<!DOCTYPE html>
<html>
<head>
.....
</head>
<body>
<div class="preloader">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
<!-- Header
============================================ -->
<div class="header">
<div class="container relativesaz">
<div class="row">
<div class="col-sm-12">
<!-- Navbar Header -->
<div class="navbar-header">
<!-- Menu Toggle -->
<button class="menu-toggle"><i class="fa fa-navicon"></i></button>
<!-- Logo -->
<a class="iconvrf logo navbar-brand relativesaz" href="" target="_blank">
<img src="" alt="" />
<span class="fontsmall">
</span>
</a>
</div>
<!-- Menu -->
<div class="menu">
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Feature</li>
<li>Description</li>
<li>Screenshot</li>
<li>AW </li>
<li>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
#ViewBag.ActiveMenu
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<ul>
<li><a class="colorblack" href="#Url.Action("ru", "Home")">Russian</a></li>
<li><a class="colorblack" href="#Url.Action("cn", "Home")">Chinese</a></li>
<li><a class="colorblack" href="#Url.Action("jp", "Home")">Japanese</a></li>
<li><a class="colorblack" href="#Url.Action("nl", "Home")">Dutch</a></li>
<li><a class="colorblack" href="#Url.Action("dk", "Home")">Danish</a></li>
<li><a class="colorblack" href="#Url.Action("de", "Home")">German</a></li>
<li><a class="colorblack" href="#Url.Action("fr", "Home")">French</a></li>
<li><a class="colorblack" href="#Url.Action("en", "Home")">English </a></li>
</ul>
</li>
<li>
<ul>
<li><a class="colorblack" href="#Url.Action("tr", "Home")">Turkish</a></li>
<li><a class="colorblack" href="#Url.Action("th", "Home")">Tahi</a></li>
<li><a class="colorblack" href="#Url.Action("sv", "Home")">Swedish</a></li>
<li><a class="colorblack" href="#Url.Action("pt", "Home")">Portuguese</a></li>
<li><a class="colorblack" href="#Url.Action("no", "Home")">Norwegian</a></li>
<li><a class="colorblack" href="#Url.Action("kr", "Home")">Korean</a></li>
<li><a class="colorblack" href="#Url.Action("es", "Home")">Spanish</a></li>
<li><a class="colorblack" href="#Url.Action("it", "Home")">Italian </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
#RenderBody()
<script src="~/Scripts/plugins.js"></script>
<script src="~/Scripts/main.js"></script>
</body>
</html>
You can directly use resx without viewbag like this:
Solution
A layout and two resx.
_Layout.cshtml
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
#if (System.Globalization.CultureInfo.CurrentCulture.ToString() == "fa-IR")
{
#Resource_fa_IR.App_Name
}
else
{
#Resource.App_Name
}
</p>
</div>
</div>
</header>
Resource.Designer.cs and Resource.fa.IR.Designer.cs
public static string App_Name {
get {
return ResourceManager.GetString("App_Name", resourceCulture);
}
}
You should change internal to public in there classes.
Why my tooltip not working :(? I'm checking it 2 hours and i don't have any mind.
<div class="changebk">
<ul>
<li class="box">
<img src="img/facebook.png">
</li >
<li class="box">
<img src="img/twiiter.png">
</li>
<li class="box">
<img src="img/logom.png">
</li>
</ul>
$('.changebk a').tooltip({
content: '<img src="img/logom.png" alt="Here it;s me">'
}); // koniectoltip
you should add title in your html code inside
<div class="changebk">
<ul>
<li class="box">
<img src="img/facebook.png">
</li >
<li class="box">
<img src="img/twiiter.png">
</li>
<li class="box">
<img src="img/logom.png">
</li>
</ul>
</div>
see the example here https://jsfiddle.net/ct6vrao8/
I'm using ui-boostrap dropdown directive, and want to add my own ng-if to prevent showing it on some cases.
When adding this ng-if, even when it always returns "true" - the dropdown stop working (doesn't pop up). It seems the drop-down button stops receiving ng-click events (therefore not changing the isOpen state..).
HTML:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
<!-- When putting this ng-if, the drop down stops working -->
<div ng-if="isAllowed()">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
</div>
<script type="text/ng-template" id="dropdown.html">
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="button-template-url">
<li role="menuitem">Action in Template</li>
<li role="menuitem">Another action in Template</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link in Template</li>
</ul>
</script>
</div>
</body>
</html>
JS:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
console.log('isOpen = ' + $scope.status.isopen);
};
$scope.isAllowed = function() {
return true;
}
});
Here is a plunker reproduce the problem:
http://plnkr.co/edit/8K9MUsDfFcjyiZvFdv5x?p=preview
Any ideas?
Take out the div with the ng-if on it and put the ng-if on the enclosing div, i.e.
<div class="btn-group" uib-dropdown is-open="status.isopen" ng-if="isAllowed()">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
I am looking to create this common (on iPhone) list type using jQuery Mobile:
The key feature is the alphabet running down the right side that will scroll to the closest matching item.
Does something like this already exist or do I need to roll my own? I was unable to find it in the demos, although List dividers gets me part way there.
Well it's a work in progress, but I think it can be done. example:
http://jsfiddle.net/qXT9Z/32/
CSS
#list-navigation {
color:#696969;
position:absolute;
right:0px;
top:0px;
z-index:200;
}
JS
$('.scrollToSelected').bind('click', function() {
var view = $(this).attr('id');
var list = view.split('-');
var elem = $("#"+list[1]);
// not sure if this is offset or position
var position = elem.position();
var offset = elem.offset();
//alert('left: '+position.left + ", top: " + position.top);
//alert('left: '+offset.left + ", top: " + offset.top);
$.mobile.silentScroll(position.top);
//$.mobile.silentScroll(offset.top);
});
$('.showDetails').bind('click', function() {
$.mobile.changePage( "#details", { transition: "slideup"} );
});
HTML
<div data-role="page" id="list">
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider" id="a">A</li>
<li class="showDetails">
Adam Kinkaid
</li>
<li class="showDetails">Alex Wickerham</li>
<li class="showDetails">Avery Johnson</li>
<li data-role="list-divider" id="b">B</li>
<li class="showDetails">Bob Cabot</li>
<li data-role="list-divider" id="c">C</li>
<li class="showDetails">Caleb Booth</li>
<li class="showDetails">Christopher Adams</li>
<li class="showDetails">Culver James</li>
<li data-role="list-divider" id="d">D</li>
<li class="showDetails">David Walsh</li>
<li class="showDetails">Drake Alfred</li>
<li data-role="list-divider" id="e">E</li>
<li class="showDetails">Elizabeth Bacon</li>
<li class="showDetails">Emery Parker</li>
<li class="showDetails">Enid Voldon</li>
<li data-role="list-divider" id="f">F</li>
<li class="showDetails">Francis Wall</li>
<li data-role="list-divider" id="g">G</li>
<li class="showDetails">Graham Smith</li>
<li class="showDetails">Greta Peete</li>
<li data-role="list-divider" id="h">H</li>
<li class="showDetails">Harvey Walls</li>
<li data-role="list-divider" id="m">M</li>
<li class="showDetails">Mike Farnsworth</li>
<li class="showDetails">Murray Vanderbuilt</li>
<li data-role="list-divider" id="n">N</li>
<li class="showDetails">Nathan Williams</li>
<li data-role="list-divider" id="p">P</li>
<li class="showDetails">Paul Baker</li>
<li class="showDetails">Pete Mason</li>
<li data-role="list-divider" id="r">R</li>
<li class="showDetails">Rod Tarker</li>
<li data-role="list-divider" id="s">S</li>
<li class="showDetails">Sawyer Wakefield</li>
</ul>
<ul data-role="none" id="list-navigation">
<li>
<p id="list-1" class="scrollToSelected"><strong>1</strong></p>
<p id="list-2" class="scrollToSelected"><strong>2</strong></p>
<p id="list-3" class="scrollToSelected"><strong>3</strong></p>
<p id="list-a" class="scrollToSelected"><strong>A</strong></p>
<p id="list-b" class="scrollToSelected"><strong>B</strong></p>
<p id="list-c" class="scrollToSelected"><strong>C</strong></p>
<p id="list-d" class="scrollToSelected"><strong>D</strong></p>
<p id="list-e" class="scrollToSelected"><strong>E</strong></p>
<p id="list-f" class="scrollToSelected"><strong>F</strong></p>
<p id="list-g" class="scrollToSelected"><strong>G</strong></p>
<p id="list-h" class="scrollToSelected"><strong>H</strong></p>
<p id="list-i" class="scrollToSelected"><strong>I</strong></p>
<p id="list-j" class="scrollToSelected"><strong>J</strong></p>
<p id="list-k" class="scrollToSelected"><strong>K</strong></p>
<p id="list-l" class="scrollToSelected"><strong>L</strong></p>
<p id="list-m" class="scrollToSelected"><strong>M</strong></p>
<p id="list-n" class="scrollToSelected"><strong>N</strong></p>
<p id="list-o" class="scrollToSelected"><strong>O</strong></p>
<p id="list-p" class="scrollToSelected"><strong>P</strong></p>
<p id="list-q" class="scrollToSelected"><strong>Q</strong></p>
<p id="list-r" class="scrollToSelected"><strong>R</strong></p>
<p id="list-s" class="scrollToSelected"><strong>S</strong></p>
<p id="list-t" class="scrollToSelected"><strong>T</strong></p>
<p id="list-u" class="scrollToSelected"><strong>U</strong></p>
<p id="list-v" class="scrollToSelected"><strong>V</strong></p>
<p id="list-w" class="scrollToSelected"><strong>W</strong></p>
<p id="list-x" class="scrollToSelected"><strong>X</strong></p>
<p id="list-y" class="scrollToSelected"><strong>Y</strong></p>
<p id="list-z" class="scrollToSelected"><strong>Z</strong></p>
</li>
</ul>
</div>
</div>
<div data-role="page" id="details">
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Details</li>
<li>List</li>
</ul>
<br />
<p>
Here are the details you were looking for
</p>
</div>
</div>