got an issue with updating partial views within my application.
Basically, after the login procedure the user will be redirected to a selection of archives to choose.
It should lead to a searchmask to enter some criterias to search for.
What I got is this:
#_Layout.cshtml
<div id="_pview">
<div class="container body-content">
<div class="_pviewcontent">
#RenderBody()
</div>
</div>
<footer class="footer">
<hr />
<a class="copyright">#Html.ActionLink($"© Copyright 2006 - {#DateTime.Now.Year} MyCopyright", "Index", "About")</a>
</footer>
<div id="loading_image" class="loading" style="display: none;"></div>
</div>
#ArchiveSelection/Index.cshtml
<div id="container">
<div id="_divpartialview">
#{Html.RenderPartial("_ArchiveSelection", Model);}
</div>
</div>
#ArchiveSelection/_ArchiveSelection.cshtml
<table class="table">
#{
if (Model != null) {
foreach (var item in Model.FileCabinetList) {
<tr>
<td>
#Ajax.ActionLink(item, "Index", "SearchMask", new {filecabinet = item}, new AjaxOptions {UpdateTargetId = "_divpartialview", LoadingElementId = "loading_image"})
</td>
</tr>
}
}
}
</table>
#RenderBody/RenderPartial() will show the list below the navigation bar.
After updating the div container with a partial view, it moves into the navigation bar.
#SearchMask/_SearchMask.cshtml
<div style="height: 500px;">
<div>
<div style="height: 500px; width: 330px; float: left; background-color: aqua"></div>
<div style="height: 500px; width: 330px; float: left; background-color: gray"></div>
<div style="clear: both;"></div>
</div>
</div>
As you can see the container div (_divpartialview) moves right into the navigation bar after updating it.
Any idea what I am missing or doing wrong?
Regards
Finally resolved it on my own.
I now feel pretty embarassed, because it was so simple. It was just a css template, that was colliding with bootstrap css.
Due to improper naming of some css classes this was the result.
Im kinda new to this, so don't laugh at me too hard :D
Related
I've started my new feminist blog. Sadly, the logo does not look good at all. I've tried to remove the shadow, but it doesn't helped at all. Here is how it looks like (up) and how I want it to look like (down):
Both logos
But I don't know how to do it. Here is the HTML code of my blog: view-source:https://glenn-gleich.blogspot.de/. This is what I have tried. I think I have to change following:
<!-- Begin header content -->
<div class='header-content'>
<!-- Begin Main Logo -->
<div class='main-logo'>
<div class='header section' id='header'><div class='widget Header' data-version='1' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
Glenn
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span>
</span></p>
</div>
</div>
</div></div>
</div><!-- /.main-logo -->
<!-- End Main Logo -->
I think it should be substituted with something like this:
<div class='item-thumbnail'>
<img alt='' border='0' height='72' src='https://3.bp.blogspot.com/address_to_image/name.jpg' width='72'/>
</a>
</div>
I hope you can help me.
<h1 class='title' style="color: #000">
<span style="background: #000; color: #fff; padding-left: 5px; padding-right: 5px; margin-right: 2px;">G</span>lenn
</h1>
This would give the desired result, you can change it a little to your preferences.
Note: Do not use styles! I did it to make it easier to read, but you should put it in a .css file.
I am trying to get the slider to work here and think I have the code but something isn't working right. It is only showing the image in the CSS and not rotating through the other ones.
Script in Header:
var images=new Array('/images/home/AC-InStock-Rotating.jpg', '/images/home/AC- MXV-Rotating.jpg', '/images/home/AC-Rental-Rotating.jpg');
var nextimage=0;
doSlideshow();
function doSlideshow(){
if(nextimage>=images.length){nextimage=0;}
$('.home-middle-part')
.css('background-image','url("'+images[nextimage++]+'")')
.fadeIn(500,function(){
setTimeout(doSlideshow,1000);
});
}
Body:
<div class="home-middle-part">
<div class="container clearfix">
<div class="grid_12 omega" >
<div class="grid_6 omega" >
<div style="padding-left: 10px;">
</div>
</div> <!-- end of grid 6-->
<div class="grid_6 omega" >
<div>
<table>
</table>
</div>
</div> <!-- end of grid 6-->
</div> <!-- end of grid 12 -->
</div> <!-- end of container clearfix -->
</div> <!-- end of home-middle-part -->
CSS
.home-middle-part {
background-image: url("/images/home/body-image banner1.jpg");
background-repeat: no-repeat;
}
You script in the header is running before the browser knows that .home-middle-part exists. You need doSlideshow(); to run after the HTML has been parsed. You can do this by moving your script tag the bottom of the page or you can wrap your call to doSlideshow() in $(document).ready() like so:
$(document).ready(function() {
doSlideshow();
});
I want to change the middle view of the current view when the links are clicked. one link is to view the iphone and the other one is to view the tablet. Default view should be iphone. Other than that anything in the view should not be changed with the click. I don't want to toggle between the views. Just load the view with the click on the link.
Below is the html code which I tried.
<div class="mobile-area">
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="iphoneView= !iphoneView"></a>
<a href ng-click="tabletView = !tabletView" class="tablet-icon"></a>
</div>
<div class="mobile-preview" ng-class="{'iphone': iphoneView}">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-iphone tmp-url="{{appTemplateUrl}}"></me-iphone>
</div>
</div>
</div>
<div class="mobile-preview" ng-class="{'tablet': tabletView}">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-tablet tmp-url="{{appTemplateUrl}}"></me-tablet>
</div>
</div>
</div>
Below is the css code.
.iphone {
position: relative;
background: url(../../../../images/iphone-bg.png) no-repeat;
width: 100%;
height: 100%;
padding-top: 58%;
border-radius: 1em;
float: none;
}
.tablet {
position: relative;
background: url(../../../../images/tablet.jpg) no-repeat;
width: 200%;
height: 100%;
padding-top: 58%;
border-radius: 1em;
float: none;
}
I tried different methods but nothing is working for me. Please tell me a way to load the views without toggling to the same html page.
Try this:
ng-class="tabletView ? 'tablet' : 'iphone'"
Default will be iphone. You don't need second iphoneView variable at all (if you have just these 2 views).
Try this?
<div class="mobile-area">
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="iphoneView=true;tabletView=false"></a>
<a href ng-click="tabletView=true;iphoneView=false" class="tablet-icon"></a>
</div>
<div class="mobile-preview" ng-class="{'iphone': iphoneView, 'tablet': tabletView}">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-iphone ng-show="iphoneView" tmp-url="{{appTemplateUrl}}"></me-iphone>
<me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}"></me-tablet>
</div>
</div>
</div>
EDIT: according to karaxuna's answer, you can use just one variable
<div class="mobile-area">
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="tabletView=false"></a>
<a href ng-click="tabletView=true" class="tablet-icon"></a>
</div>
<div class="mobile-preview" ng-class="tabletView ? 'tablet' : 'iphone'">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-iphone ng-show="!tabletView" tmp-url="{{appTemplateUrl}}"></me-iphone>
<me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}"></me-tablet>
</div>
</div>
</div>
I'm new here and also somewhat of a beginner in Html and CSS. I'm currently working on a project using both CouchCMS for content management and then Bootstrap for the responsive framework. To give a short background, I've set up a custom.css file and have linked it accordingly to the website as well as the bootstrap css. I'm currently going through the steps to create a "Blog List" page to list all my blog snippets on one page, and basically what's happening is the sidebar is appearing on the right, but below the first element instead of side by side.
What I've noticed is that with just 1 post on the page it shows the way it's supposed to, however as soon as a 2nd is added it moves to the bottom half of the page on the right.
Here is my Code:
#main {
width: 90%;
margin: 40px auto;
}
#news-content {
float: left;
width: 60%;
margin: 0 3% 0 5.5%;
border-radius: 10px;
background-color: white;
}
#my-sidebar {
float: right;
width: 26%;
height: 100%;
margin: 0 5.5% 0 0;
border-radius: 10px;
background-color: white;
}
#cms-blog {
width: 90%;
height: inherit;
margin: 25px 0 0 5%;
}
<div id="main">
<cms:pages masterpage='news_entry.php' orderby='publish_date' order='asc'>
<!--Begin of CouchCMS Blog List-->
<div id="news-content">
<!--Wrapper for Left Side Blog Content-->
<div id="cms-blog">
<h1><cms:show k_page_title /></h1>
<cms:if k_page_foldertitle>
<cms:set my_category=k_page_foldertitle />
<cms:else />
<cms:set my_category='Uncategorized' />
</cms:if>
<h6><cms:show my_category /> • <cms:date k_page_date format='M jS, y' /> • <cms:show k_comments_count /> Comments</h6>
<hr />
<img src="<cms:show blog_image />" alt="" width="100%" />
<cms:show blog_content />
<p class="clearfix">Read More...
</p>
</div>
</div>
</cms:pages>
<!--End of CouchCMS Blog List-->
<div id="my-sidebar"></div>
<!--Wrapper for Sidebar-->
<div style="clear: both;"></div>
</div>
Another thing I've noticed is that when I go to the page which shows multiple blogs, CouchCMS automatically creates another news-content DIV. I'm thinking this may be the problem and the float:right is making the sidebar appear on the bottom right half of the page because it comes after the 2nd news-content, however if this is the issue, I have no idea how to fix it. I've been rearranging my code in different ways to try and see if I can fix it and have been searching the web for a few hours now and have come up with no solution.
Well now I feel like an idiot. I figured it out while rearranging the code. All that I had to do was change my cms:pages beginning and ending tags to only include the content of the post and not the div tags. Once I made the change, it immediately showed as I wanted it to.
My new code looks like this:
<div id="main">
<div id="news-content">
<div id="cms-blog">
<cms:pages masterpage='news_entry.php' orderby='publish_date' order='asc'>
<!-- I changed this to go after the beginning div tags instead of before-->
<h1><cms:show k_page_title /></h1>
<cms:if k_page_foldertitle>
<cms:set my_category=k_page_foldertitle />
<cms:else />
<cms:set my_category='Uncategorized' />
</cms:if>
<h6><cms:show my_category /> • <cms:date k_page_date format='M jS, y' /> • <cms:show k_comments_count /> Comments</h6>
<hr />
<img src="<cms:show blog_image />" alt="" width="100%" />
<cms:show blog_content />
<p class="clearfix">Read More...
</p>
</cms:pages>
<!--I changed this to come before the closing div tags instead of after-->
</div>
</div>
<div id="my-sidebar"></div>
<div style="clear: both;"></div>
</div>
I'm trying to view notifications on razor view. I used foreach loop to get the data from the model.I want to display both "invitations" and "Requests" divs on the view like in the two table columns.One invitation down after another invitation.one request down after another request..(in one column all the invitations and requests on the other).. i used css float to do this.. but in the divs get mix in the result..why is that? there are some othaer elements in the view like, nav bar,side bar etc...my code is as follows;
foreach (var item in Model)
{
if (#item.CreatedBy == item.UserId)
{
<div style="float: right; width: 580px;">
<div class="panel panel-info" style="width:500px;margin-right:50px">
×
<div class=" panel-heading">
<h3 class="panel-title">Notification #counter1</h3>
</div>
<div class="panel-body">
<p>Event is created by yourself .Budget of the event is #item.Budget <p>
#if (item.IsAccepted)
{
<p>You have accept the invitation!!!</p>
}
#if (!item.IsAccepted)
{
<p>You haven't accept the invitation yet!!!!</p>
}
#{counter1++;}
</div>
</div>
<br />
</div>
}
else
{
<div style="width: 580px; float: left">
<div class="panel panel-info" style="width:500px;margin-left:250px;">
×
<div class=" panel-heading">
<h3 class="panel-title">Notification #counter2</h3>
</div>
<div class="panel-body">
<p>Event is created by #item.Email .Budget of the event is #item.Budget <p>
#if (item.IsAccepted)
{
<p>You have accept the invitation!!!</p>
}
#if (!item.IsAccepted)
{
<p>You haven't accept the invitation yet!!!!</p>
}
#{counter2++;}
</div>
</div>
<br />
</div>
}
}
What you need is css attributes "clear: right" and "clear: left" for your div's.
However, once you use them you will find next problem - there will be vertical gaps between your div's on the right and left side. That is because you are placing new div's right into body element of html page in your foreach loop. To make it right, you should first create two containers (divs) to which you should respectively add your divs containing data.
Unfortunately, with your current implementation you would have to iterate over your Model twice - once to fill up the right container with divs, and then once again to fill up the left container.
A better approach would be to create a ViewModel containing two collectios of objects which you are currently using, e.g.:
public class MyViewModel
{
public IList<MyModel> Invitations { get; set; }
public IList<MyModel> Requests { get; set; }
}
and use it as your View's model
#model MyApplication.Models.MyViewModel.
With this approach, you also remove some logic from the view, which is a good thing.
Here is an updated code for your view using the ViewModel as View's model:
#model MvcApplication1.Controllers.MyViewModel
#{
int counter1 = 0, counter2 = 0;
}
<div style="float: right; width: 580px; clear:right">
<span>Invitations</span>
#foreach (var item in #Model.Invitations)
{
if (#item.CreatedBy == item.UserId)
{
<div>
<div class="panel panel-info">
×
<div class=" panel-heading">
<h3 class="panel-title">Notification #counter1</h3>
</div>
<div class="panel-body">
<p>Event is created by yourself .Budget of the event is #item.Budget <p>
#if (item.IsAccepted)
{
<p>You have accept the invitation!!!</p>
}
else
{
<p>You haven't accept the invitation yet!!!!</p>
}
#{counter1++;}
</div>
</div>
<br />
</div>
}
}
</div>
<div style="float: left; width: 580px; clear:left">
<span>Requests</span>
#foreach (var item in #Model.Requests)
{
<div>
<div class="panel panel-info">
×
<div class=" panel-heading">
<h3 class="panel-title">Notification #counter2</h3>
</div>
<div class="panel-body">
<p>Event is created by #item.Email .Budget of the event is #item.Budget <p>
#if (item.IsAccepted)
{
<p>You have accept the invitation!!!</p>
}
else
{
<p>You haven't accept the invitation yet!!!!</p>
}
#{counter2++;}
</div>
</div>
<br />
</div>
}
</div>
Good luck :)
Edit: a quick lookup to how the page looks after using provided solution:
https://jsfiddle.net/nh8Ls531/