I am using Bootstrap Scrollspy. I added one Bootstrap nav (class = "nav nav-pills nav-stackedon") on left side of page and was on right side. First problem was that nav becomes invisible as I scroll down, so I added style to it:
.my-navbar {
position:fixed;
}
Then everything was fine with navbar (it became fixed to top), but the problem is that the body is now below navbar instead of being on right side of it. Why is that so and how to correct it?
My view is here:
#model Questionnaire.Domain.Models.StudentVM
#using System.Linq
#using System.Collections.Generic
#{
ViewBag.Title = "Student";
}
#{
List<String> subjectNames = new List<String>();
for (int i = 0; i < Model.Subjects.Count; i++)
{
subjectNames.Add(Model.Subjects[i].Name);
}
}
<body data-spy="scroll" data-target=".my-navbar">
<div class="row panel">
<div class="my-navbar col-xs-2">
<ul class="nav nav-pills nav-stacked">
<li role="presentation">Opšta pitanja</li>
#for (int i = 1; i < subjectNames.Count; i++)
{
<li role="presentation">#subjectNames[i]</li>
}
</ul>
</div>
<div class="col-xs-8">
#using (Html.BeginForm())
{
<span id="opsta"></span>
for (int i = 0; i < Model.Subjects.Count; i++)
{
<div class="well well-outside">
#Html.HiddenFor(m => m.Subjects[i].ID)
<h3>#Html.DisplayFor(m => m.Subjects[i].Name)</h3>
#for (int j = 0; j < Model.Subjects[i].Questions.Count; j++)
{
<div class="well well-inside">
#Html.HiddenFor(m => m.Subjects[i].Questions[j].ID)
<h3>#Html.DisplayFor(m => m.Subjects[i].Questions[j].Text)</h3>
#foreach (var answer in Model.Subjects[i].Questions[j].PossibleAnswers)
{
<div>
#Html.RadioButtonFor(m => m.Subjects[i].Questions[j].SelectedAnswer, answer.ID, new { id = answer.ID })
<label for="#answer.ID">#answer.Text</label>
</div>
}
#Html.ValidationMessageFor(m => m.Subjects[i].Questions[j].SelectedAnswer)
</div>
}
</div>
}
<input type="submit" class="btn btn-success" value="Confirm" />
}
</div>
</div>
</body>
setting position:fixed removes the nav bar from the regular flow of the page, so the page acts like nothing is there in its place. You can either style the rest of the page to act as if it is there (margin, padding, other) or put an empty container in its place with similar dimension, just no content.
Related
I want to make a hidden context menu to display multiple genre selections. I want to customize the input checkboxes so that it looks like this:
this image is my required finished layout
It works fine without the label elements in the unordered list elements, however I need the label to toggle the checkbox. This is my current (incorrect) layout:
this image is what I have achieved so far
I have tried many things, including setting:
position: relative/absolute
display: flexbox/inline-block
widths and heights
How do I use an unordered list to display labeled inputs with customized checkboxes using only CSS and HTML?
<div class="col-md-12 col-lg-4 text-lg-right mt-md-4 mt-lg-0">
<div class="d-flex-column w-100" id="genre-bar">
<!-- always visible selections bar -->
<div class="row">
<div class="col-12 mb-3 d-flex text-align-right">
<span class="w-100 genre-bar-display text-align-right align-items-center"><i class="fas fa-chevron-down"></i></span>
</div>
</div>
<div class="genre-hidden-section px-3">
<!-- Multiple selector -->
<div class="row">
<div class="col-6 text-left">
<ul id="first-genre-list" class="genre-list">
<!-- This is populated by the #foreach below using JS -->
</ul>
</div>
<div class="col-6 text-left">
<ul id="second-genre-list" class="genre-list">
<!-- This is populated by the #foreach below using JS -->
</ul>
</div>
</div>
</div>
</div>
<!-- This div gets emptied and removed by JS immediately -->
<div id="select-close-books-genre" style="display:none;">
<ul>
#foreach (GenreModel genre in Model.Genres)
{
<li class="genre-checkbox-container">
<label>
#genre.Name
<span class="genre-checkmark"></span>
<input type="checkbox" value="#genre.Id">
</label>
</li>
}
</ul>
</div>
</div>
li input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.genre-checkmark {
display: inline-block;
top: 0;
left: 0;
height: 13px;
width: 13px;
border: 1px black solid;
border-radius: 3px;
background-color: white;
}
.genre-list {
display:flex;
flex-wrap:wrap;
}
.genre-checkbox-container {
flex-grow: 1;
}
.genre-checkbox-container:hover span {
background-color: #ccc;
}
.genre-checkbox-container input:checked ~ .genre-checkmark {
background-color: #30d9c8;
}
const genreListDiv = $("#select-close-books-genre")[0];
const genreList = Array.from(genreListDiv.firstElementChild.children);
genreListDiv.remove();
console.log(genreList)
for (let i = 0; i < genreList.length/2; i++) {
$('#first-genre-list')[0].appendChild(genreList[i]);
};
for (let i = Math.ceil(genreList.length/2); i < genreList.length; i++) {
$('#second-genre-list')[0].appendChild(genreList[i]);
};
// Open and close the genre selector box
$("#genre-bar").on('click', function(event) {
$("#genre-bar").addClass("genre-bar-open");
$('body').on('click', function () {
$('#genre-bar').removeClass("genre-bar-open");
});
$('#genre-bar').on('click', function (event) {
event.stopPropagation();
});
});
I'm trying to create rows dynamically with razor but I can't figure out how to wrap this around. What I want is for every 5:e object in my model I want to create a new row/div <div class="row pics_in_a_row"> so that each row contains five or less images.
<section class="slice">
<div class="wp-section">
<div class="container">
<div class="row pics_in_a_row">
#{
int i = 0;
foreach (dbphoto.Models.Image s in Model.images.OrderByDescending(x => x.idimage))
{
if (i % 5 == 0 && i != 0)
{
<br />
}
i++;
if (1 == 1)
{
<div class="flxbox" style="flex: calc(1024/713)">
<a href="#s.HighResolution" data-fancybox="gallery" data-caption="xyz, Stockholm">
<img src="#s.LowResolution" class="img-fluid rounded flximg" />
</a>
</div>
}
}
}
</div>
</div>
</div>
</section>
Bonus question: how can I get the height and width of the image and add it to the calc() css?
You should add the div with class row pics_in_a_row inside your loop
This should create a a row for every 5 items (or less for the last row when the remaining items are less than 5).
<div class="container">
#{
var numberOfColsNeeded = 5;
var totalCounter = Model.images.Count();
var itemCounter = 1;
}
#foreach (var item in Model.images)
{
if (itemCounter % numberOfColsNeeded == 1)
{
#:<div class="row pics_in_a_row">
}
<div class="flxbox" style="flex: calc(1024 / 713)">
<img src="#item.LowResolution" class="img-fluid rounded flximg" />
</div>
if ((itemCounter % numberOfColsNeeded == 0) || ((itemCounter) == totalCounter))
{
#:</div>
}
itemCounter++;
}
</div>
When wrapping my MultiURL picker within a div tag, it breaks the page, has anyone seen this type of behaviour before when creating new templates in Umbraco?
If anyone has experienced this before and can share a fix, that would be much appreciated.
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#using Archetype.Models;
#using Archetype.Extensions;
#using RJP.MultiUrlPicker.Models;
#{
Layout = "Master.cshtml";
}
<div class="container">
<div class="row">
<h1>#Umbraco.Field("pageTitle")</h1>
<p>#Umbraco.Field("pageBodyText")</p>
#foreach (var fieldset in Model.Content.GetPropertyValue<ArchetypeModel>("box"))
{
<div class="THIS-DIV">
<h3>#fieldset.GetValue("boxTitle")</h3>
<img src="#Umbraco.TypedMedia(fieldset.GetValue("boxImage")).Url" />
var multiUrlPicker = fieldset.GetValue<MultiUrls>("boxLink");
if (multiUrlPicker.Any())
{
<ul>
#foreach (var item in multiUrlPicker)
{
<li>#item.Name</li>
}
</ul>
}
</div>
}
I think that the line starting with var multiUrlPicker is being interpreted as html and not as code, try wrapping your code between #{ and }
<div class="THIS-DIV">
#{
var multiUrlPicker = fieldset.GetValue<MultiUrls>("boxLink");
if (multiUrlPicker.Any())
{
<ul>
#foreach (var item in multiUrlPicker)
{
<li>#item.Name</li>
}
</ul>
}
}
</div>
I'm working on navigation bar and I got a problem that is responsive related.
I want the sub menu box to keep inside the content always. I must not go to the grey area. Is there a way to do this? I would prefer to keep the size of the sub menu box
This is my code:(I'm using Umbraco)
HTML:
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{ var home = CurrentPage.Site(); }
#if (home.Children.Any())
{
#* Get the first page in the children *#
var naviLevel = home.Children.First().Level;
#* Add in level for a CSS hook *#
<div class="linje"></div>
<ul class="meny level-#naviLevel">
#* For each child page under the home node *#
#foreach (var childPage in home.Children)
{
if (childPage.Children.Any())
{
<li class="dropdown has-child #(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
#if (childPage.DocumentTypeAlias == "Huvudmeny")
{
<span>#childPage.Name</span>
#childPages(childPage.Children)
}
else
{
#childPage.Name
}
#helper childPages(dynamic pages)
{
#* Ensure that we have a collection of pages *#
if (pages.Any())
{
#* Get the first page in pages and get the level *#
var naviLevel = pages.First().Level;
#* Add in level for a CSS hook *#
<ul class="meny dropdown-menu sublevel level-#(naviLevel)">
#foreach (var page in pages)
{
<li>
#page.Name
#* if the current page has any children *#
#if (page.Children.Any())
{
#* Call our helper to display the children *#
#childPages(page.Children)
}
</li>
}
</ul>
}
}
</li>
}
else
{
<li class="#(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
#childPage.Name
</li>
}
}
</ul>
<div class="linje col-md-12" ></div>
}
CSS:
nav .has-child:hover > .sublevel {
display: block;
width: 500px;
height: 200px;
}
ul.dropdown-menu>li { float: left; width: 50% !important; }
ul.dropdown-menu{
width:500px;
}
My menu is not showing items when I click on the setup menu item. Before using the kendo splitter it worked fine. Now the menu doesn't pop up even after setting a higher z-index on the menu element.
This is my menu bar
<nav class="top-bar bottomnav" data-topbar>
<section class="top-bar-section">
<ul class="right">
<li class="has-content-dropdown"><a href="#" data-dropdown="setuplist" title="Setup">
<img src="/Content/Images/setup-16x16.png" alt="Setup" /> Setup</a>
<div id="setuplist" data-dropdown-content class="medium f-dropdown iconlist">
#{
link="#";
}
{ link="/Classification/ClassificationLabel"; }
<div class="iconlink">
<a href='#link' title="Classification Label" onclick="OnclickPrem(this)">
<img src="/Content/Images/labels-72x72.png" /><div>Classification Label</div>
</a>
</div>
#{
link="#";
}
{ link="/Classification/Index"; }
<div class="iconlink">
<a href='#link' title="Classification" onclick="OnclickRPrem(this)">
<img src="/Content/Images/Classification-72x72.png" /><div>Classification</div>
</a>
</div>
</li>
</ul>
</section>
below this menu an using kendo splitter
#(Html.Kendo().Splitter()
.Name("vertical")
.Orientation(SplitterOrientation.Vertical)
.HtmlAttributes(new { style = "height: 70%;height:78.3vh;" })
.Panes(verticalPanes =>
{
verticalPanes.Add()
.HtmlAttributes(new { id = "top-pane" })
.Scrollable(false)
.Collapsible(false)
.Content(
Html.Kendo().Splitter()
.Name("horizontal")
.HtmlAttributes(new { style = "height: 100%;" })
.Panes(horizontalPanes =>
{
horizontalPanes.Add()
.HtmlAttributes(new { id = "left-pane" })
.MaxSize("300px")
.MinSize("250px")
.Size("300px")
.Collapsible(true)
.Collapsed(true)
.Content(Html.Action("Tasks").ToString());
horizontalPanes.Add()
.HtmlAttributes(new { id = "center-pane"})
.Content(#<div class="renderbodydiv" style="padding-top: 8px">
#RenderBody()
</div>);
}).ToHtmlString()
);
})
)
Splitter panes hide the overflow, so if your menu is in a position so it would show outside of the pane it is in, you need to override the CSS responsible for that; you can try with:
.k-splitter .k-pane {
overflow: visible !important;
}