Validation summary for multi partial views as jquery tabs - asp.net-mvc-4

I have a form where model is displayed across multiple partial views, jQuery tabs is used,everything works fine except, validation summary doesn't view errors from all views.
If a user gets an error in first tab, moves to second tab, validation summary is overridden by errors in the last tab used.
If I don't use the jQuery tabs, it's working well.
How do I use tabs and make validation summary shared among the partial views/tabs ?
Main view:
#model Data
<script type="text/javascript">
$(function () {
$("#Tabs").tabs();
});
</script>
<div id="Tabs">
<ul>
<li>Product</li>
<li>Filteration</li>
</ul>
#using (Ajax.BeginForm(MVC.Products.Save(),
new AjaxOptions { HttpMethod = FormMethod.Post.ToString()}))
{
<div id="tabs-Product">
#{ Html.RenderPartial(MVC.Products.Views.tabs._tabs_Product, Model);}
</div>
<div id="tabs-Filteration">
#{ Html.RenderPartial(MVC.Products.Views.tabs._tabs_Filteration, Model);}
</div>
#Html.ValidationSummary(false)
<input type="submit" value="Ok" />
}
</div>

Use instead Pure CSS Tabs it has no javascript and wont meddle with the validation summary
CSS:
.tabs {
position: relative;
min-height: 570px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
View:
#using (Ajax.BeginForm(MVC.Products.Save(),
new AjaxOptions
{
HttpMethod = FormMethod.Post.ToString()
}))
{
#Html.HiddenFor(s => s.Id)
#Html.ValidationSummary(false)
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked="">
<label for="tab-1">Product</label>
<div class="content">
#{ Html.RenderPartial(MVC.WhiteLabelTool.Symbols.Views.tabs._tabs_Product, Model); }
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Filteration</label>
<div class="content">
#{ Html.RenderPartial(MVC.WhiteLabelTool.Symbols.Views.tabs._tabs_Filteration, Model);}
</div>
</div>
</div>
<input type="submit" value="Ok" />
}

Related

How can I get my dropdown to be cliackble?

My dropdown menu is not clickable. Like if I want to go to a different page, it wont let me click it. Can someone please help me on what to do here?
This is my htm and css
`<h2>Laura Deleon</h2>
</div>
<ul class="nav-links">
<li>Photography</li>
<li>Films</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
<div class="carousel-container">
<figure class="carousel-slide snaps-inline">
<img src="images/IMG_7068.jpg">
<img src="images/IMG_7067.jpg">
<img src="images/IMG_7069.jpg">
<img src="images/IMG_7070.jpg">
<img src="images/IMG_7072.jpg">
<img src="images/IMG_3123 (1).jpg">
<img src="images/IMG_3124.jpg">
<img src="images/IMG_3125 (1).jpg">
<img src="images/IMG_3572.jpg">
<img src="images/IMG_3128.jpg">
<img src="images/IMG_3126 (1).jpg">
<img src="images/IMG_2650 (1).jpg">
<img src="images/img5.jpg">
<img src="images/img3.jpg.jpg">
<img src="images/img13.jpg.jpg">
<img src="images/img18.jpg.jpg">
<img src="images/img9.jpg">
<img src="images/img1.jpg">
<img src="images/IMG_1382.jpg">
<img src="images/img19.jpg">
</figure>
`
I made put the dropdown to go over the pictures to see if that worked but nothing.The dropdown is for when the page is shrinked and for mobile. I tried it on my phone and I cant click on the other pages
`/*start navbar*/
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 10vh;
}
.nav-links {
display: flex;
width: 40%;
justify-content: space-around;
}
.nav-links li{
list-style: none;
background-color: rgba(255, 255, 255, 0.5);
}
.nav-links a{
list-style: none;
text-transform: none;
letter-spacing: 3px;
line-height: 25pt;
}
/*end navbar*/
/*start burger*/
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 1px;
background-color: black;
margin: 5px;
transition: 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 55%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 95vh;
top: 8vh;
display: inline-block;
flex-direction: column;
justify-content: center;
width: 20%;
transform: translateX(0px);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0
}
.burger {
display: block;
}
#fas1,
#fas2 {
display: none;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade{
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*end burger*/
/*start picture carousel home*/
img {
width: 700px;
height: 700px;
object-fit: contain;
margin: 10px;
z-index: -1;
}
.carousel-slide {
display: grid;
gap: var(--size-3);
grid-auto-flow: column;
overflow-x: auto;
overscroll-behavior-inline: contain;
position: relative;
}`

How to display filename for custom input in Vue?

I have a styled file input. It works fine, but after the file selection, I would like to show the selected filename instead of No files selected. How can I do this in Vue?
.fileContainer {
overflow: hidden;
position: relative;
background-color: #8181fe;
color: #fff;
padding: 6px 18px;
border-radius: 7px;
line-height: 21px;
}
form input, textarea {
background-color: #fff;
padding: 10px;
border: 1px solid #d9dadc;
border-radius: 7px;
font-size: 16px;
color: #393645;
resize: none;
}
.fileContainer [type=file] {
cursor: pointer;
display: block;
font-size: 13px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
left: 0;
text-align: right;
top: -8px;
}
.file-info {
font-size: 13px;
color: #a9a7a9;
line-height: 53px;
padding-left: 10px;
}
<div id="contact-form" class="contact-form">
<form class="form">
<div class="section-file">
<label class="fileContainer">
Select files
<input type="file" class="file-upload" id="file" name="file" accept="jpg/image/jpeg/image/png">
</label>
<span class="file-info">No files selected</span>
</div>
</form>
</div>
Note the change event's target is the associated <input>, and the selected files are indicated in <input>.files, which has a length property for the number of files. We could then track the non-zero length as a Boolean to determine whether to display No files selected:
Add a files data property to track the selected files:
data() {
return {
files: null
}
},
Use v-if to conditionally render No files selected based on files above. In the v-else branch, we display the list of selected files:
<span v-if="!files || !files.length">No files selected</span>
<ul v-else>
<li v-for="file in files" :key="file.name">{{file.name}}</li>
</ul>
Add a change-event handler to the <input> in the component's template:
<input #change="filesSelected">
Define the handler method in the component's methods:
methods: {
fileSelected(e) {
this.files = e.target.files
}
}
new Vue({
el: '#contact-form',
data() {
return {
files: null
}
},
methods: {
fileSelected(e) {
this.files = e.target.files
}
}
})
.fileContainer {
overflow: hidden;
position: relative;
background-color: #8181fe;
color: #fff;
padding: 6px 18px;
border-radius: 7px;
line-height: 21px;
}
form input, textarea {
background-color: #fff;
padding: 10px;
border: 1px solid #d9dadc;
border-radius: 7px;
font-size: 16px;
color: #393645;
resize: none;
}
.fileContainer [type=file] {
cursor: pointer;
display: block;
font-size: 13px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
left: 0;
text-align: right;
top: -8px;
}
.file-info {
font-size: 13px;
color: #a9a7a9;
line-height: 53px;
padding-left: 10px;
}
<script src="https://unpkg.com/vue#2.6.10/dist/vue.min.js"></script>
<div id="contact-form" class="contact-form">
<form class="form">
<div class="section-file">
<label class="fileContainer">
Select files
<input type="file" class="file-upload" id="file" name="file" #change="fileSelected" multiple accept="image/jpg,image/jpeg,/image/png">
</label>
<span class="file-info" v-if="!files || !files.length">No files selected</span>
<ul v-else>
<li v-for="file in files" :key="file.name">{{file.name}}</li>
</ul>
</div>
</form>
</div>

I got blurry text if use Bootstrap 4 carousel on my website

I'm developing a website where I have to put a bootstrap carousel and different texts over this carousel (absolute element).
Once I put the carousel on the website, all the texts become blurry and difficult to read.
I've read the could a problem between z-index of the text and z-index of the carousel but I'm not getting how I can solve it because I have to keep this text over the carousel.
Here the image of what I'm developing:
Here my code:
HTML
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 top-header-container">
<ul>
<li>UK 33333</li>
<li>IRELAND 333333</li>
<li>CANADA 333333</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 background-img-slide" style="z-index: -10px;">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800">
</div>
<div class="carousel-item">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800">
</div>
<div class="carousel-item">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<div class="logo-wrap">
<div class="logo-container">
<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="logo-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/deane-logo.png"></a>
</div>
</div>
<nav class="main_menu_container">
<ul class="main_menu_class">
<li>About us</li>
<li>Services</li>
<li>Projects</li>
<li>Policies</li>
<li>Contact us</li>
</ul>
</nav>
<div class="slide-title-blue-wrap">
<div class="slide-title-blue-container">
<span class="slide-title-blue">tefdjsafkljdasfkljkjfdlskalòs</span>
</div>
</div>
<div class="slide-title-red-wrap">
<div class="slide-title-red-container">
<span class="slide-title-red">tefdjsafkljdasfkljkjfdlskalòs</span>
</div>
</div>
<div class="slide-title-green-wrap">
<div class="slide-title-green-container">
<span class="slide-title">tefdjsafkljdasfkljkjfdlskalòs</span>
</div>
</div>
</div>
CSS
.top-header-container {
text-align: right;
position: relative;
z-index: 2;
}
.top-header-container > ul {
margin: 0;
padding: 0;
}
.top-header-container > ul > li {
display: inline-block;
list-style: none;
padding: 15px;
font-size: 13px;
}
.main_menu_container {
text-align: right;
position: absolute;
width: 58%;
right: -110px;
top: 55px;
}
.main_menu_container > ul {
margin: 0;
padding: 0;
padding-right: 150px;
background: #76bd21;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
}
.main_menu_container > ul > li {
display: inline-block;
list-style: none;
padding: 15px;
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
}
.main_menu_container > ul > li > a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
}
.main_menu_container > ul > li > a:hover {
text-decoration: none;
}
.logo-wrap {
position: relative;
margin-top: -835px;
margin-left: -35px;
}
.logo-container {
position: absolute;
left: -450px;
background: rgba(255, 255, 255, 0.82);
height: 800px;
width: 50%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
}
.navbar-brand {
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
}
.logo-img {
position: absolute;
left: 110px;
top: 40px;
}
.background-img-slide {
position: relative;
margin-top: -100px;
background-image: url(assets/img/image-home-main.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 850px;
}
.slide-title-blue-wrap {
position: relative;
}
.slide-title-blue-container {
position: absolute;
left: -689px;
top: -7px;
background: rgba(5, 34, 162, 0.85);
height: 700px;
width: 60%;
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
z-index: 15;
}
.slide-title-blue {
position: absolute;
top: 70%;
left: 65%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
color: #fff;
}
.slide-title-green-wrap {
position: relative;
}
.slide-title-green-container {
position: absolute;
left: -881px;
top: 835px;
background: rgba(118, 189, 33, 0.85);
height: 800px;
width: 60%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
z-index: 10;
}
.slide-title-red-wrap {
position: relative;
}
.slide-title-red-container {
position: absolute;
left: -410px;
top: 693px;
background: rgba(5, 34, 162, 0.85);
height: 142px;
width: 60%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
z-index: 15;
}
.slide-title-red {
position: absolute;
top: 40%;
left: 50%;
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
color: #fff;
}
Blurry text (with carousel)
Clear text (without carousel)
Here link of my test website:
http://www.matrix-test.com/roofing/
Any Idea to solve this problem?
I've been able to resolve this issue in Bootstrap 4 by setting the backface-visibility attribute of the carousel-item to unset.
Here's the code.
.carousel-item {
-webkit-backface-visibility: unset!important;
backface-visibility: unset!important;
}

Bootstrap Gallery Class Causing background

I followed this http://codepen.io/redfrost/pen/dbrgk codepen working gallery snippet to the tee . Everything works as far as functionality but there is a background coming from a bootstrap class that makes the gallery wider than expected. The arrows according to the snippet should be contained within the image div itself.
I have deleted both style sheets just to see if the background would go away and it did not. It is a bootstrap class issue.
Here is the image of the issue http://postimg.org/image/mmdbsl6sp/full/
I think the class causing the issue is class="carousel-inner"
Here is the markup I have for the gallery:
#extends('layouts.main')
#section('content')
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="bannerImage">
<img src="http://placehold.it/960x405" alt="">
</div>
<div class="caption row-fluid">
<div class="span4"><h3>Picture 1</h3>
</div>
<div class="span8"><p>Picture 1 details</p>
</div>
</div>
</div><!-- /Slide1 -->
<div class="item">
<div class="bannerImage">
<img src="http://placehold.it/960x405" alt="">
</div>
<div class="caption row-fluid">
<div class="span4"><h3>Picture 2</h3>
</div>
<div class="span8"><p>Picture 2 details</p>
</div>
</div>
</div><!-- /Slide2 -->
<div class="item">
<div class="bannerImage">
<img src="http://placehold.it/960x405" alt="">
</div>
<div class="caption row-fluid">
<div class="span4"><h3>Picture 3</h3>
</div>
<div class="span8"><p>Picture 3 details</p>
</div>
</div>
</div><!-- /Slide2 -->
</div>
<div class="control-box">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div><!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.span12 -->
</div><!-- /.row -->
</div><!-- /.container -->
#stop
Here is the css:
div { word-break: break-all; }
img {
max-width:100%;
display: block;
margin-left: auto;
margin-right: auto;
}
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE7 */
text-decoration: none;
}
/* Container */
/* Page Header */
.page-header {
background: #fbf4e0;
margin: -30px 0px 0px;
padding: 20px 40px;
border-top: 4px solid #ccc;
color: #a83b3b;
text-transform: uppercase;
}
.page-header h3 {
line-height: 0.88rem;
color: #a83b3b;
}
/* Thumbnail Box */
.caption {
height: 140px;
width: 100%;
margin: 20px 0px;
padding: 20px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.caption .span4, .caption .span8 {
padding: 0px 20px;
}
.caption .span4 {
border-right: 1px dotted #CCCCCC;
}
.caption h3 {
color: #a83b3b;
line-height: 2rem;
margin: 0 0 20px;
text-transform: uppercase;
}
.caption p {
font-size: 1rem;
line-height: 1.6rem;
color: #a83b3b;
}
.btn.btn-mini {
background: #a83b3b;
border-radius: 0 0 0 0;
color: #fbf4e0;
font-size: 0.63rem;
text-shadow: none !important;
}
.carousel-control {
top: 33%;
zoom: 7;
color: #ff3333;
}
/* Footer */
.footer {
margin: auto;
width: 100%;
max-width: 960px;
display: block;
font-size: 0.69rem;
}
.footer, .footer a {
color: #fff;
}
p.right {
float: right;
}
body:after{content:"less than 320px";font-size:1rem;font-weight:bold;position:fixed;bottom:0;width:100%;text-align:center;background-color:hsla(1,60%,40%,0.7);color:#fff;height:20px;padding-top:0;margin-left:0;left:0}#media only screen and (min-width:320px){body:after{content:"320 to 480px";background-color:hsla(90,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:480px){body:after{content:"480 to 768px";background-color:hsla(180,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:768px){body:after{content:"768 to 980px";background-color:hsla(270,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:980px){body:after{content:"980 to 1024px";background-color:hsla(300,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:1024px){body:after{content:"1024 and up";background-color:hsla(360,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}
::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; }
::-moz-selection { background: #ff5e99; color: #FFFFFF; }
a, a:focus, a:active, a:hover, object, embed { outline: none; }
:-moz-any-link:focus { outline: none; }
input::-moz-focus-inner { border: 0; }

CSS Wrapper, Logo showing at the back

Im just new to CSS:
And my problem is My Logo shows up but it's in the back and Should I put my div:top-most into the wrapper? because if I put my div:top-most, it will be shown along with the logo, but I want my lime color to be put on the max width of my browser..
Here's my HTML Code
<body>
<div id="top-most">
</div>
<div id="wrapper">
<img alt="logo" src="images/logo.png" /><div id="wrapper">
</div>
<div id="header">
<p>Put something here</p>
</div>
</body>
And here's my CSS Code:
#top-most { background-color: lime; height:51px ;width:100%; position:absolute; }
#wrapper { width :960px; height:100px ; overflow:hidden; margin:0px auto; }
#logo { margin: 19px 0 0 10px; position:absolute; top: 0px; z-index:2; }
#header { margin: 30px 0 0 20px; float:right; width: 750px; }
#header p { color: #979899; }
And here's the output:
http://imgur.com/gWDNYGB
Hello :) you need to put #wrapper in #top-most.
<body>
<div id="top-most">
<div id="wrapper">
<img alt="logo" src="http://placekitten.com/200/300" />
</div>
</div>
<div id="header">
<p>Put something here</p>
</div>
</body>
I edited your Css code too.
#top-most { background-color: lime; padding: 5px; position:absolute; }
#wrapper { width :960px; height:100px ; overflow:hidden; margin:0px auto; }
#logo { margin: 19px 0 0 10px; position:absolute; top: 0px; z-index:2; }
#header { margin: 30px 0 0 20px; float:right; width: 750px; }
#header p { color: #979899; }
You don't need padding: 5px; in #top-most but it will look better
Demo