What i have:
<ul class="store-opening-hours">
<li class="day-1"><span style="color: #808080; font-family: futura_lt;">Maandag: 09:00 - 18:00</span></li>
<li class="day-2"><span style="color: #808080; font-family: futura_lt;">Dinsdag: 09:00 - 18:00</span></li>
<li class="day-3"><span style="color: #808080; font-family: futura_lt;">Woensdag: 09:00 - 18:00</span></li>
<li class="day-4"><span style="color: #808080; font-family: futura_lt;">Donderdag: 09:00 - 21:00</span></li>
<li class="day-5"><span style="color: #808080; font-family: futura_lt;">Vrijdag: 09:00 - 18:00</span></li>
<li class="day-6"><span style="color: #808080; font-family: futura_lt;">Zaterdag: 09:00 - 17:00</span></li>
<li class="day-0"><span style="color: #808080; font-family: futura_lt;">Zondag: Gesloten</span></li>
</ul>
Result:
Maandag: 09:00 – 18:00
Dinsdag: 09:00 – 18:00
Woensdag: 09:00 – 18:00
Donderdag: 09:00 – 21:00
Vrijdag: 09:00 – 18:00
Zaterdag: 09:00 – 17:00
Zondag: Gesloten
I would like to have the days aligned to the left as they are now, but the times (everything after : ) to the right... How? I cant seem to get it right...
Related
I've got a few jQuery UI sortable lists and would like to move the items from one list to another. Except one blocked list: this should be able to receive items from other lists but the items inside this list shouldn't even react to attempts to be moved. Is this possible? How? I tried to use .sortable("cancel") in the start event but this seems not to work...
Please see here, the second list should be the "blocked" one: http://jsfiddle.net/r1rffht7/
$(function() {
$( ".sortable_list" ).sortable({
connectWith: ".connectedSortable",
}).disableSelection();
});
You can update your JQuery-UI sortable function by using the cancel selector like so (or see this Updated Fiddle:
Note: make sure to include your sortable_list class in the blocked_list div.
$(function() {
$(".sortable_list").sortable({
connectWith: ".connectedSortable",
cancel: ".blockedList"
}).disableSelection();
});
.blockedList {
border: 1px solid #f00 !important;
}
.sortable_list,
.blockedList {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
.sortable_list li,
.sortable_list .li,
.blockedList li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<h3>Conected lists : You can move items between any list</h3>
<ul id="sortable1" class="sortable_list connectedSortable">
<li class="ui-state-default">List 1 - Item 1</li>
<li class="ui-state-default">List 1 - Item 2</li>
<li class="ui-state-default">List 1 - Item 3</li>
<li class="ui-state-default">List 1 - Item 4</li>
<li class="ui-state-default">List 1 - Item 5</li>
</ul>
<ul id="sortable2" class="sortable_list blockedList connectedSortable">
<li class="ui-state-highlight">List 2 - Item 1</li>
<li class="ui-state-highlight">List 2 - Item 2</li>
<li class="ui-state-highlight">List 2 - Item 3</li>
<li class="ui-state-highlight">List 2 - Item 4</li>
<li class="ui-state-highlight">List 2 - Item 5</li>
</ul>
<ul id="sortable3" class="sortable_list connectedSortable">
<li class="ui-state-default">List 3 - Item 1</li>
<li class="ui-state-default">List 3 - Item 2</li>
<li class="ui-state-default">List 3 - Item 3</li>
<li class="ui-state-default">List 3 - Item 4</li>
<li class="ui-state-default">List 3 - Item 5</li>
</ul>
<ul id="sortable4" class="sortable_list connectedSortable">
<li class="ui-state-highlight">List 4 - Item 1</li>
<li class="ui-state-highlight">List 4 - Item 2</li>
<li class="ui-state-highlight">List 4 - Item 3</li>
<li class="ui-state-highlight">List 4 - Item 4</li>
<li class="ui-state-highlight">List 4 - Item 5</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Here's the normal size and view of the menu
And this is the view after reducing the size
I mean in the second view the dropdowns should be listed downhills. But in the small navbar, it only adds the hamburger button. The others remains the same.
(I cencored the corporative names. The shapes don't mean anything.)
Here are the codes i use for layout.
Layout.cshtml
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="menu">
<li>
<img src="~/Content/logo.png" alt="Ana Sayfa" />
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Yönetim</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown">Dosya Yükleme/Güncelleme</a>
<ul class="dropdown-menu">
<!-- moving the UL to the next line will cause an IE7 problem -->
<li>#Html.ActionLink("Cost Margin Yükleme", "Index", "CostMarginUpload")</li>
<li>#Html.ActionLink("EK5 Tarife Yükleme", "Index", "EK5TariffUpload")</li>
<li>#Html.ActionLink("ETS Sourcing Cost Yükleme", "Index", "ETSSourcingUpload")</li>
<li>#Html.ActionLink("ETS Sourcing Cost Tablosu Güncelleme", "Index", "ETSSourcingCost")</li>
</ul>
</li>
<li>#Html.ActionLink("Kullanıcı İşlemleri", "Index", "Users")</li>
<li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown">Parametresi Güncelleme</a>
<ul class="dropdown-menu">
<!-- moving the UL to the next line will cause an IE7 problem -->
<li>#Html.ActionLink("Bölge Güncelleme", "Index", "Region")</li>
<li>#Html.ActionLink("Bağlantı Tipi Güncelleme", "Index", "ConnectionTypes")</li>
<li>#Html.ActionLink("Tarife Grubu Güncelleme", "Index", "TariffGroup")</li>
<li>#Html.ActionLink("Profil Güncelleme", "Index", "Profile")</li>
<li>#Html.ActionLink("Parametreler Tablosu Güncelleme", "Index", "Parameters")</li>
<li>#Html.ActionLink("Zam Öngörüsü Girişi", "Index", "PriceIncreaseEstimates")</li>
</ul>
</li>
</ul>
</li>
<li>#Html.ActionLink("Müşteri İşlemleri", "Index", "Customers")</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Fiyatlandırma İşlemleri</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown">Fiyatlandırma</a>
<ul class="dropdown-menu">
<!-- moving the UL to the next line will cause an IE7 problem -->
<li>#Html.ActionLink("Tekli Fiyatlandırma", "Index", "SinglePricing")</li>
<li>#Html.ActionLink("Çoklu Fiyatlandırma", "Index", "MultiPricing")</li>
<li>#Html.ActionLink("İhale İçin Fiyatlandırma", "Index", "TenderPricing")</li>
</ul>
</li>
<li>#Html.ActionLink("Teklif Görüntüleme", "Index", "OfferView")</li>
<li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown">Teklif Performans Bilgileri</a>
<ul class="dropdown-menu">
<!-- moving the UL to the next line will cause an IE7 problem -->
<li>#Html.ActionLink("Teklif Performans Bilgisi Görüntüleme", "Index", "PerformanceView")</li>
<li>#Html.ActionLink("Teklif Performans Bilgisi Sıralama", "Index", "PerformanceRank")</li>
</ul>
</li>
</ul>
</li>
<li style="float:right">
#User.Identity.Name
</li>
</ul>
</div>
</div>
</nav>
Scripts
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/kendo-js")
#Styles.Render("~/bundles/kendo-css")
#Scripts.Render("~/bundles/bootstrap")
#Styles.Render("~/Content/css")
#RenderSection("scripts", required: false)
<script src="Scripts/respond.min.js"></script>
<script>
$(document).ready(function () {
$("#menu").kendoMenu();
$(document.body).css("visibility", "visible");
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');f
});
});
</script>
Styles
html {
background-color: #eeeeee;
margin: 0px;
padding: 0px;
}
body {
visibility: hidden;
}
#menu h2 {
font-size: 1em;
text-transform: uppercase;
}
#template img {
float: left;
}
#template {
width: 380px;
}
.nav > li {
position: relative;
display: block;
}
.navbar-inverse {
background-color: #eeeeee;
}
.navbar-nav {
float: none;
}
.marginBottom-0 {
margin-bottom: 0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
EDIT: you are using the library KendoMenu and it possibly adding class (and CSS) into your menu div.
In order to keep li into display block you can use the following code
.nav > li
{
position: relative !important;
display: block !important;
}
The !important; will lock this CSS property from any future changes.
I am coding the following in Bootstrap 3.0 and MVC 5. I am trying to get Submenus to work. I referenced navbar documentation but I can't get the Billing and Payment structure to be a sub dropdown menu with this structure:
Account Info
License Details
Billing and Payment
Invoices
Payments
Billing
Users
User Settings
Here is my HTML. I need to replace the anchor tag on Billing Payment. What do I put in its place?
<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("Free Trial Setup", "Trial", "Home")</li>
<li class="dropdown">
Account Info
<ul class="dropdown-menu">
<li>#Html.ActionLink("License Details", "License", "Home" )</li>
<li class="dropdown-submenu"></li>
Billing and Payment
<li>#Html.ActionLink("Invoices", "Invoices", "Home")</li>
<li>#Html.ActionLink("Payments", "Payments", "Home")</li>
<li>#Html.ActionLink("Billing Information", "Billing", "Home")</li>
</ul>
<li>User Settings</li>
</ul>
</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
Based on the solution mentioned in snippet you have to do the following:
Add following to your Site.css file
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
then change your code in the _Layout.cshtml to be:
<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("Free Trial Setup", "Trial", "Home")</li>
<li class="dropdown">
Account Info
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>#Html.ActionLink("License Details", "License", "Home")</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Billing and Payment</a>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Invoices", "Invoices", "Home")</li>
<li>#Html.ActionLink("Payments", "Payments", "Home")</li>
<li>#Html.ActionLink("Billing Information", "Billing", "Home")</li>
<li class="dropdown-submenu">
Users
<ul class="dropdown-menu">
<li>User Settings</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
Hello I am making a footer:
<div id="footer">
<ul>
<li id="qualifications">
<h4>Professional qualifications</h4>
<p>Name<br>
Chartered Veterinary Physiotherapist<br>
Chartered Physiotherapist<br>
BSc HONS MCSP<br>
Post Grad Dip (vet phys) ACPAT CAT A
</p>
</li>
<li id="logos">
<h4>head
</h4>
<img src="/" />
</li>
<li id="contact">
<h4>Contact and referal</h4>
<p>Contact</p>
<p><a id="referal">Referal Form</a></p>
</li>
</ul>
</div> <!---footer---->
I want the footer div to be 100% width so I can colour it. I want the ul to be 960px wide and the li elements to lign up next to on another in a inline-block. css:
#footer {
background-color:#666666;
#footer ul {
width:960px;
margin-left: auto ;
margin-right: auto ;
}
#footer li {
width: 320px;
display:inline-block;
}
But the li elements knock the last one underneath the first two and ther's odd spacing at the top.
Any help would be great!
reduce the number lines in professional qualification...
reduce the width of li...
and always use float left to solve the alignment problems
<!--<html>
<head>
<link rel="stylesheet" href="so.css"/>
</head><body>
<div id="header"></div>
<div id="footer">
<ul>
<li id="qualifications">
<h4>Professional qualifications</h4>
<p>Name<br>
Chartered Veterinary Physiotherapist<br>
</p>
</li>
<li id="logos">
<h4>head
</h4>
<img src="/" />
</li>
<li id="contact">
<h4>Contact and referal</h4>
<p>Contact</p>
<p><a id="referal">Referal Form</a></p>
</li>
</ul>
</div></body></html>-->
#header{
height:80%;
width:100%;
}
#footer {
background-color:#666666;
width:100%;
height:20%;
}
#footer ul {
width:960px;
margin-left: auto ;
margin-right: auto ;
height:100%;
}
#footer li {
width: 300px;
display: inline-block;
height: 100%;
float: left;
}
You can use this code
body {
margin: 0;
padding: 0;
}
#footer {
background-color: #666666;
clear: both;
width: 100%;
float: left;
margin: 0;
padding: 30px 0;
}
#footer ul {
width:960px;
margin: 0 auto;
padding: 0;
text-align: left;
}
#footer li {
width: 320px;
display:inline-block;
float: left;
}
<div id="footer">
<ul>
<li id="qualifications">
<h4>Professional qualifications</h4>
<p>Name<br>
Chartered Veterinary Physiotherapist<br>
Chartered Physiotherapist<br>
BSc HONS MCSP<br>
Post Grad Dip (vet phys) ACPAT CAT A
</p>
</li>
<li id="logos">
<h4>head</h4>
<img src="/" />
</li>
<li id="contact">
<h4>Contact and referal</h4>
<p>Contact</p>
<p><a id="referal">Referal Form</a></p>
</li>
</ul>
</div>
I am trying to load two instances of jQuery UI selectable, but there seems to be an issue with the second one. How can I solve this?
Here is my code: http://jsfiddle.net/3pKQf/1/
HTML
Div 1
<div id="div1">
<ul id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
<li class="ui-state-default">13</li>
<li class="ui-state-default">14</li>
<li class="ui-state-default">15</li>
</ul>
</div><br><br>
Div 2
<div id="div2">
<ul id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
<li class="ui-state-default">13</li>
<li class="ui-state-default">14</li>
<li class="ui-state-default">15</li>
</ul>
</div>
CSS
#selectable .ui-selecting {
background: #C41C7B;
}
#selectable .ui-selected {
background: #C41C7B;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#selectable li {
margin: 0px;
padding: 3px;
float: left;
width: 16px;
height: 16px;
font-size: 10px;
font-family: Arial;
text-align: center;
}
JavaScript
$(function() {
$("#selectable").bind('mousedown', function (e) {
e.metaKey = true;
}).selectable();
});
They need different id's. Both are #selectable.
Here's a working update using a class .selectable. http://jsfiddle.net/3pKQf/4/