I use bootstrap.my navbar icons jumping down when the window get smaller.when it is too small the menu goes to 3line icon bar.
How I can set my icons to appear in one line in small window?
here is my navbar code,
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img id="brand-image" alt="" src="../image/fullLogo.png"/>
</a>
</div>
<div class=" col-md-offset-2">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>
<a href="../MainPages/avayejavid.html" class="header-style">
<i class="fa fa-home li-header-style" aria-hidden="true" ></i>
خانه
</a>
</li>
<li class="dropdown ">
<a data-toggle="dropdown" href="#" class="header-style">
<i class="fa fa-file-o li-header-style" aria-hidden="true"></i>
معرفی <span class="caret "></span>
</a>
<ul class="dropdown-menu" style=" background-color: #9D763C">
<li>
بیوگرافی
</li>
<li>
اعضای گروه
</li>
</ul>
</li>
<li>
<a href="../MainPages/gallery.html" class="header-style">
<i class="fa fa-picture-o li-header-style" aria-hidden="true" ></i>
گالری
</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="header-style">
<i class="fa fa-file-o li-header-style" aria-hidden="true"></i>
ویدئو <span class="caret "></span>
</a>
<ul class="dropdown-menu" style=" background-color: #9D763C">
<li>
آموزش
</li>
<li>
تصنیف خوانی
</li>
<li>
ساز و آواز
</li>
</ul>
</li>
<li>
<a href="../MainPages/Articles.html" class="header-style">
<i class="fa fa-shopping-cart li-header-style" aria-hidden="true"></i>
مقالات
</a>
</li>
<li>
<a href="../MainPages/movie.html" class="header-style">
<i class="fa fa-shopping-cart li-header-style" aria-hidden="true"></i>
خرید
</a>
</li>
<li>
<a href="#" class="header-style">
<i class="fa fa-comments li-header-style" aria-hidden="true"></i>
تماس با ما
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
and here is my CSS:
.header-style{
padding-top:20px !important;
background-image:url(../images/icon.png);
background-size: 100% 100% !important;
padding-left:40px !important;
padding-right:40px !important;
}
.li-header-style{
color:#ffe766
}
.navbar-fixed-top .nav {
padding: 15px 0;
}
#media (max-width:767px) {
.navbar-brand {
padding: 0;
}
.navbar-brand img {
margin-top: 1px;
margin-left: 1px;
}
}
.navbar-nav li a {
height:80px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom:0;
}
.navbar .nav > li.dropdown.open.active > a:hover,
.navbar .nav > li.dropdown.open > a {
color: #ffe766 !important;
background-color: transparent !important;
border-color: #ffe766 !important;
}
#brand-image
{
height:100px;
}
The problem is the icons are taking up too much space for the designated break-point.
I would advise reading the bootstrap documentation more thoroughly (especially the grid system): http://getbootstrap.com/css/#grid-media-queries
To fix your problem you would need to increase the .navbar breakpoint. This is explained very well here: https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint.
You can also look at this previous answer to help you: Change bootstrap navbar collapse breakpoint without using LESS
Related
The screenshot below shows 2 pieces of text (in red rectangles) that I need to extract from the attached html. I was able to do a simple one but this is beyond me at the moment.
The text in the green rectangle is unique in the entire document and therefore can be used as a starting point to find the other 2.
At the bottom is all the html for the "section" element that can be used for this example.
Big thanks for any help I can get.
enter image description here
<section class="details-portlet">
<div data-auto="details-tile-title" class="details-portlet__title ">
<i class="fa fa-book details-portlet__title-icon"></i>
<h3 data-auto="Company Summary">Company Summary</h3>
</div><div>
<div class="details-portlet__columns--seperator">
<div class="details-portlet__col " data-auto="Contact">
<div class="portlet-content details-shared-tile details-shared-tile__main ">
<div class="portlet-content__col--vert-centered portlet-content__col details-shared-tile__icon-col" title="Contact"><i class="fa fa-address-card-o portlet-content__icon"></i></div><div class="portlet-content__col--vert-centered portlet-content__col" data-auto="icon-tile-data">
<address data-auto="details-contact">
<div data-auto="details-contact-name" style="display: flex; align-items: center;">
<div class="details-shared-tile__main" style="margin-right: 5px;">Alexander Burd</div>
<div>
<div class="edit-icon">
<i class="fa fa-pencil contact-edit-icon" data-auto="edit-contact"></i>
</div>
</div>
</div>Sales Exec, Finance Exec <div class="custom-contact" data-auto="mmdb-email"></div><div class="custom-contact" data-auto="details-custom-contact"></div>
</address>
</div>
</div>
</div><div class="details-portlet__col " data-auto="Address"><div class="portlet-content details-shared-tile details-shared-tile__main "><div class="portlet-content__col--vert-centered portlet-content__col details-shared-tile__icon-col" title="Address"><i class="fa fa-map-marker portlet-content__icon"></i></div><div class="portlet-content__col--vert-centered portlet-content__col" data-auto="icon-tile-data"><address data-auto="details-address"><div class="details-shared-tile__main">1177 West Loop S # 1400</div><div class="details-shared-tile__main">Houston, TX 77027</div><div data-auto="details-address-maplink"><a class="details-shared-tile__link">Map / Street View</a></div></address></div></div></div>
</div><div class="details-portlet__columns--seperator"><div class="details-portlet__col " data-auto="Phone"><div class="portlet-content details-shared-tile details-shared-tile__main "><div class=" portlet-content__col details-shared-tile__icon-col" title="Phone"><i class="fa fa fa-phone portlet-content__icon"></i></div><div class=" portlet-content__col" data-auto="icon-tile-data">(713) 961-7777</div></div></div><div class="details-portlet__col " data-auto=" Website"><div class="portlet-content details-shared-tile details-shared-tile__main "><div class=" portlet-content__col details-shared-tile__icon-col" title=" Website"><i class="fa fa fa-link portlet-content__icon"></i></div><div class=" portlet-content__col" data-auto="icon-tile-data"><a target="_blank" href="http://713abogado.com" title="713abogado.com">713abogado.com</a></div></div></div></div>
</div><div class="details-portlet__columns company-summary-data"><div class="details-portlet__col"><div style="width: 100%;"><div class="details-portlet__data-columns" data-auto="data-column"><div data-auto="Industry-(SIC)" class="details-portlet__data-cat" style="width: 33%;">Industry (SIC)</div><div data-auto="Industry-(SIC)-data" class="details-portlet__col">Attorneys (8111-03)</div></div><div class="details-portlet__data-columns" data-auto="data-column"><div data-auto="Location-Type" class="details-portlet__data-cat" style="width: 33%;">Location Type</div><div data-auto="Location-Type-data" class="details-portlet__col">Single Loc</div></div><div class="details-portlet__data-columns" data-auto="data-column"><div data-auto="Social" class="details-portlet__data-cat" style="width: 33%;">Social</div><div data-auto="Social-data" class="details-portlet__col"><a title="Facebook" href="//www.facebook.com/713abogado" target="_blank"><i class="fa fa-facebook-square social-links__facebook"></i></a></div></div></div></div><div class="details-portlet__col"><div style="width: 100%;"><div class="details-portlet__data-columns" data-auto="data-column"><div data-auto="Sales-Volume" class="details-portlet__data-cat" style="width: 33%;">Sales Volume</div><div data-auto="Sales-Volume-data" class="details-portlet__col">$5,094,000</div></div><div class="details-portlet__data-columns" data-auto="data-column"><div data-auto="Employees" class="details-portlet__data-cat" style="width: 33%;">Employees</div><div data-auto="Employees-data" class="details-portlet__col">20</div></div></div></div></div>
</section>
I am trying to use the bootstrap 4 gallery however I am a bit lost I have my carsoul showing just with dummy data at present.
As you will notice the bootstrap carousel identifies each image with a number I need to know how to handle this.
This is the orginal code pen I found
https://codeply.com/go/tBbcVXe1xZ
I tried to setup a dotnetfiddle but was unsure how the models works on the online compiler
https://dotnetfiddle.net/Cc5ahV
I have to account for this on the mini pictures
id="carousel-selector-1" data-slide-to="1"
And this for the large pictures
Where the numbers in both should increase per photo
<div class="container">
<div class="col-lg-8 offset-lg-2" id="slider">
<div id="myCarousel" class="carousel slide shadow" styl>
<!-- main slider carousel items -->
#foreach (var item in FileAttachments)
{
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" class="img-fluid">
</div>
}//this should print out same div set for every image attached to the record
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
#foreach (var item in FileAttachments)
{
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" style="width: 86px; height:86px" class="img-fluid">
</a>
</li>
}
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" style="width: 86px; height:86px" class="img-fluid">
</a>
</li>
</ul>
</div>
The model would be
public class FileAttachments
{
public int Id
{
get;
set;
}
public string UrlOrPath
{
get;
set
}
}
Edit 2
<div id="myCarousel" class="carousel slide shadow" styl>
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active carousel-item active" data-slide-number="1">
<img src="/Uploads/7bbc8503-a686-40d3-b70c-d6f0e0423e9b_DILBAR4.jpg" class="img-fluid">
</div>
<div class="active carousel-item " data-slide-number="2">
<img src="/Uploads/cc4263a9-cdfe-48a2-82d4-b976d76b9a3c_DILBAR3.jpg" class="img-fluid">
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
<li class="list-inline-item active">
<a id="carousel-selector-1" class="selected" data-slide-to="1" data-target="#myCarousel">
<img src="/Uploads/7bbc8503-a686-40d3-b70c-d6f0e0423e9b_DILBAR4.jpg" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
<li class="list-inline-item active">
<a id="carousel-selector-2" class="selected" data-slide-to="2" data-target="#myCarousel">
<img src="/Uploads/cc4263a9-cdfe-48a2-82d4-b976d76b9a3c_DILBAR3.jpg" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
</ul>
</div>
I have tried the following razor but it doesnt produce what i need from the code pen
The above html is produced by the below razor but its not working the next and previous.
#{int i = 0;}
#foreach (var item in Model.PhotosAttachments) {
i++;
var active = i == 1 ? "active" : "";
<div class="active carousel-item #active" data-slide-number="#i">
<img src="~/Uploads/#item.File" class="img-fluid">
</div>
}
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
#{int j = 0;}
#foreach (var item in Model.PhotosAttachments) {
j++;
<li class="list-inline-item active">
<a id="carousel-selector-#j" class="selected" data-slide-to="#j" data-target="#myCarousel">
<img src="~/Uploads/#item.File" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
}
</ul>
</div>
</div>
For anyone else this is what works I just had to do a counter in relation to the loop.
<div class="col-lg-8 offset-lg-2" id="slider">
<div id="myCarousel" class="carousel slide shadow">
<!-- main slider carousel items -->
<div class="carousel-inner">
#{int i = 0;}
#foreach (var item in Model.PhotosAttachments) {
var active = i == 0 ? "active" : "";
<div class="#active carousel-item" data-slide-number="#i">
<img src="~/Uploads/#item.File" class="img-fluid">
</div>
i++;
}
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
#{int j = 0;}
#foreach (var item in Model.PhotosAttachments) {
var active = i == 0 ? "active" : "";
var isSelected = i == 0 ? "selected" : "";
<li class="list-inline-item #active">
<a id="carousel-selector-#j" class="#isSelected" data-slide-to="#j" data-target="#myCarousel">
<img src="~/Uploads/#item.File" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
j++;
}
</ul>
</div>
</div>
bootstrap in C# submenus not being called, the url is shown in the bottom of the browser but when clicked nothing happens. What I am doing wrong?
<div class="navbar-collapse collapse dropdown">
<ul class="nav navbar-nav" role="menu">
<li role="menuitem">#Html.ActionLink("Contracts", "Index", "Contracts")</li>
<li class="dropdown-submenu" data-toggle="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Configuration <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li role="menuitem">#Html.ActionLink("Contract Type", "ContractType",
"Configuration")</li>
<li role="menuitem">#Html.ActionLink("Cost Type", "CostType",
"Configuration")</li>
</ul>
</li>
</ul>
</div>
check your ActionResult does it match with your .chtml page ActionLink
I upgraded to Bootstrap 4.1. Now it is OK
<ul class="navbar-nav mr-auto">
<li class="nav-item #Html.IfSelected("Proposals")">
<a class="nav-link" href="#Url.Action("Index", "Proposal")">Proposals</a>
</li>
<li class="nav-item #Html.IfSelected("Contracts")">
<a class="nav-link" href="#Url.Action("Index", "Contracts")">Contracts</a>
</li>
<li class="nav-item #Html.IfSelected("Reporting")">
<a class="nav-link" href="#Url.Action("Reporting", "Home")">Reporting</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Configuration
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#Url.Action("Actions", "Configuration")">Actions</a>
<a class="dropdown-item" href="#Url.Action("ContractType", "Configuration")">Contract Type</a>
<a class="dropdown-item" href="#Url.Action("CostType", "Configuration")">Cost Type</a>
<a class="dropdown-item" href="#Url.Action("PendingOn", "Configuration")">Pending On</a>
<a class="dropdown-item" href="#Url.Action("Periods", "Configuration")">Periods</a>
<a class="dropdown-item" href="#Url.Action("Operators", "Configuration")">Operators</a>
<a class="dropdown-item" href="#Url.Action("SellerType", "Configuration")">Entity Type</a>
<a class="dropdown-item" href="#Url.Action("Status", "Configuration")">Status</a>
<a class="dropdown-item" href="#Url.Action("Result", "Configuration")">Results</a>
<a class="dropdown-item" href="#Url.Action("Vendors", "Configuration")">Vendors</a>
<a class="dropdown-item" href="#Url.Action("Users", "Configuration")">Users</a>
</div>
</li>
</ul>
I am having an issue with Bootstrap (Bootswatch) Dropdown menu, I have been using it before, but not sure where and what I am missing the drop-down stays open and active. here is my code I am helping a friend to build an MVC basic CRUD Operation.
I appreciate your help very much, please let me know if you need any other details or code to help me.
Home
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">لیستی خوێندکاران</a>
<div class="dropdown-menu show" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 40px, 0px); top: 0px; left: 0px; will-change: transform;">
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">خوێندکاری نوێ</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">لیستی خوێندکاران</a>
<div class="dropdown-divider"></div>
</div>
</li>
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">لیستی مامۆستایان</a>
<div class="dropdown-menu show" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 40px, 0px); top: 0px; left: 0px; will-change: transform;">
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">مامۆستای نوێ</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">لیستی مامۆستایان</a>
<div class="dropdown-divider"></div>
</div>
</li>
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">لیستی بەشەکان</a>
<div class="dropdown-menu show" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 40px, 0px); top: 0px; left: 0px; will-change: transform;">
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">بەشی نوێ</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">لیستی بەشەکان</a>
<div class="dropdown-divider"></div>
</div>
</ul>
</div>
<div>
<form class="form-inline my-2 my-lg-0">
#Html.Partial("/Views/Shared/_LoginPartial.cshtml")
#*<input class="form-control mr-sm-2" placeholder="گەڕان" type="text">*#
#*<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>*#
</form>
</div>
here is what is looks like.
Maybe you can check the console log in the chrome developer window, see whether it showing help full error information.
just remove show class from all divs with dropdown-menu class. i.e, <div class="dropdown-menu show"... to <div class="dropdown-menu"...
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">لیستی خوێندکاران</a>
<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 40px, 0px); top: 0px; left: 0px; will-change: transform;">
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">خوێندکاری نوێ</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">لیستی خوێندکاران</a>
<div class="dropdown-divider"></div>
</div>
</li>
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">لیستی مامۆستایان</a>
<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 40px, 0px); top: 0px; left: 0px; will-change: transform;">
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">مامۆستای نوێ</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">لیستی مامۆستایان</a>
<div class="dropdown-divider"></div>
</div>
</li>
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">لیستی بەشەکان</a>
<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 40px, 0px); top: 0px; left: 0px; will-change: transform;">
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">بەشی نوێ</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">لیستی بەشەکان</a>
<div class="dropdown-divider"></div>
</div>
</ul>
</div>
<div>
I had package version incompatiblly problem by running update-package I was able to get it working. Thank you for your help and your time investigating the issue with me.
Here is my code, what should I do to show 3 panels in a row. Is there any way to do this?
Its showing in the same row but the next panel starts slightly below the previous one I'll be really thankful to you for your help
#foreach (DEProperty.Web.Models.PlotsViewModelSearchResult c in Model)
{
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading text-center">
<h4>#c.PhaseText, #c.SectorText-#c.PlotAddress</h4>
</div>
<div class="panel-body text-center">
<p class="lead">
<img src="~/images/plot...image.jpg" />
</p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item" style="border:none">
#c.AreaText
</li>
<li class="list-group-item" style="border:none">
Facing Park
</li>
<li class="list-group-item text-center" style="border:none">
Near Mosque
</li>
<li class="list-group-item" style="border:none">
Near Commercial
</li>
<li class="list-group-item" style="border:none">
Corner
</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-info">Detail View</a>
</div>
</div>
</div>
Just Add <div class="row"> like this:
<div class="row">
#foreach (DEProperty.Web.Models.PlotsViewModelSearchResult c in Model)
{
....
}
</div>