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
Related
Problem:
I'm unable to limit scrolling to the content area of a typical Vue 3 SPA (scroll bar should not extend into header and footer areas). The Header and Footer blocks are placed with the Bootstrap fixed-top and fixed-bottom classes. It's a little hard to see in the attached image, but the current content area extends behind the header and footer. The header and footer are built from the Bootstrap components library. I can fix the content visibility with padding, but that doesn't address the overflow (scrollbar) issue.
Actions Taken
I've tried many solutions to similar questions, but those solutions have generally applied to earlier versions of Vue and Bootstrap and don't seem to work for me. I'm able to generate my desired layout in vanilla html and Bootstrap--it seems like it's the Vue 3 injection process that's tripping me up. I've tried applying layouts to both index.html and App.vue without success (trying both Bootstrap classes and vanilla css). The Bootstrap dependency appears to be working properly, so I don't think that's the issue (Bootstrap 5 not Bootstrap-Vue).
Desired Outcome:
Limit scrolling to content area while keeping header and footer Navbars fixed to their positions (and visible at all times).
Environment
Code snippets are used for readability (won't run in place). The below code has all (or nearly all) placement attempts stripped since they didn't work.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="../public/favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- <script>window.scrollTo(0,1) // this is meant to hide the address bar in mobile Safari on page load.</script>-->
</head>
<body>
<noscript>
<strong>The <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files are auto injected here -->
</body>
</html>
App.vue
<template>
<div id="wrapper" class="m-1">
<div id="header_area">
<Header/>
</div>
<div id="content_area">
<span class="page-title">{{ title }}</span>
<hr class="border-secondary">
<span class="page-content">{{ content }}</span>
<router-view #page-data="updatePageName($event)"/>
</div>
<div id="footer_area">
<Footer/>
</div>
</div>
</template>
<script>
import Header from '#/components/Header.vue'
import Footer from '#/components/Footer.vue'
export default {
data() {
return {
title: "home",
content: ""
}
},
components: {
Header,
Footer,
},
methods: {
updatePageName: function(event) {
this.title = event.title;
this.content = event.content;
}
}
};
</script>
<style>
#import'~bootstrap/dist/css/bootstrap.css';
#import "./assets/main.css";
</style>
Header.vue (partial)
<template>
<div>
<nav class="Header navbar navbar-expand-sm navbar-dark bg-dark border-bottom border-4 fixed-top" aria-label="Header Bar">
<div class="container-fluid">
<router-link to="/"><span class="navbar-brand">brand</span> </router-link>
<button class="navbar-toggler btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#Navbar" aria-controls="Navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item dropdown">
<router-link to=""><a class="nav-link dropdown-toggle" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">pages</a></router-link>
<ul class="dropdown-menu bg-dark" aria-labelledby="dropdown01" id="dave">
[snip]
main.css
#charset "utf-8";
#font-face {
font-family: 'Lato-Light';
src: local('Lato-Light'), url('Lato-Light.ttf') format("truetype");
}
:root {
--background: #191919;
--dark: #000000;
--grey1: #111111;
--grey2: #222222;
--grey3: #333333;
--grey4: #444444;
--grey5: #555555;
--grey6: #666666;
--grey7: #777777;
--grey8: #888888;
--grey9: #999999;
--light: #FFFFFF;
}
html, body {
background-color: var(--dark) !important;
color: var(--light) !important;
}
a {
color: var(--bs-secondary) !important;
text-decoration: none;
}
body {
font-family: Lato-Light, sans-serif;
font-size: 0.9em;
}
button {
padding: 1px;
}
input {
border: solid 1px var(--grey9);
border-radius: 5px;
box-sizing: border-box;
padding: 5px;
}
li {
float: left;
margin: 0 5px;
padding: 0 2px;
text-align: start;
}
ul {
list-style-type: none;
padding: 0;
}
.dropdown-item {
border: solid 1px var(--bs-dark);
color: var(--bs-secondary) !Important;
/*font-size: 0.9rem;*/
width: 94%;
}
.dropdown-item:hover {
background-color: var(--bs-dark) !important;
border: solid 1px var(--bs-secondary);
border-radius: 5px;
width: 94%;
}
.dropdown-menu {
background-color: var(--bs-dark) !important;
border: solid 1px var(--bs-dark) !important;
color: var(--bs-secondary) !Important;
/*font-size: 0.9rem !important;*/
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
border: solid 1px var(--bs-dark) !important;
color: var(--bs-secondary) !Important;
/*font-size: 0.9rem !important;*/
left: 100%;
top: 0;
}
.dropdown-toggle::after {
display: none;
}
.navbar {
border-bottom-color: var(--dark) !important;
border-top-color: var(--dark) !important;
margin-bottom: 0;
}
.navbar-brand {
border: solid 1px var(--bs-dark);
border-radius: 5px;
color: var(--bs-secondary) !important;
padding: 5px;
}
.navbar-brand:hover {
border: solid 1px var(--bs-secondary);
border-radius: 5px;
}
.nav-link {
background-color: var(--bs-dark) !important;
border: solid 1px var(--bs-dark);
border-radius: 5px;
color: var(--bs-secondary) !important;
}
.nav-link:hover {
border: solid 1px var(--bs-secondary);
border-radius: 5px;
}
.nav-link.dropdown-toggle {
padding: 8px;
}
.navbar-nav li:hover > ul.dropdown-menu {
border: solid 1px var(--grey5) !important;
color: var(--bs-secondary) !Important;
display: block;
}
.page-title {
color: var(--grey5);
font-size: 2rem !important;
text-align: left !important;
}
.page-content {
}
.selected {
border-color: lime !important;
}
#app {
}
#header_area {
}
#content_area {
}
#footer_area {
}
#Footer {
font-size: 0.9em;
}
:focus {
border-color: var(--dark);
box-shadow: none;
outline: none;
}
This is how I was able to get the CSS Grid spec to work. For my situation, adding styles to <html> and <body> in index.html was important, but may not be required. Assigning !Important to the grid elements may also not be required, but was done for insurance.
Now, any content that is injected by the Vue Router will appear in content_area and only that section will scroll (as needed).
App.vue
<template>
<div class="app m-1">
<div id="header_area">
<Header/>
</div>
<div id="content_area">
<span class="page-title">{{ title }}</span>
<hr class="border-secondary">
<span class="page-content">{{ content }}</span>
<router-view #page-data="updatePageName($event)"/>
</div>
<div id="footer_area">
<Footer/>
</div>
</div>
</template>
<script>
import Header from '#/components/Header.vue'
import Footer from '#/components/Footer.vue'
export default {
data() {
return {
title: "home",
content: ""
}
},
components: {
Header,
Footer,
},
methods: {
updatePageName: function(event) {
this.title = event.title;
this.content = event.content;
}
}
};
</script>
<style>
#import'~bootstrap/dist/css/bootstrap.css';
#import "./assets/navbar.css";
#import "./assets/main.css";
</style>
index.html
<!DOCTYPE html>
<html lang="en" style="margin: 0;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="../public/favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body style="margin: 0; overflow: hidden;">
<noscript>
<strong>The <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files are auto-injected here -->
</body>
</html>
main.css
.app {
height: 100vh !important;
display: grid !important;
grid-gap: 5px !important;
grid-template-columns: 1fr !important;
grid-template-rows: 65px 1fr 40px !important;
grid-template-areas: "header" "content" "footer" !important;
}
#header_area {
grid-area: header !important;
}
#content_area {
grid-area: content !important;
overflow: auto !important;
}
#footer_area {
grid-area: footer !important;
}
Plain HTML example
body {
background-color: red;
margin: 0;
}
.container {
height: 100vh;
display: grid;
grid-gap: 5px;
grid-template-columns: 1fr;
grid-template-rows: 70px 1fr 40px;
grid-template-areas: "header" "content" "footer";
}
.H {
grid-area: header;
background-color: blue;
color: white;
}
.C {
grid-area: content;
background-color: darkgreen;
color: white;
padding: 15px 5px 10px 5px;
overflow: auto;
}
.F {
grid-area: footer;
background-color: blue;
color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="H">header</div>
<div class="C">
content
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br>
</div>
<div class="F">footer</div>
</div>
</body>
</html>
I am trying to edit the content on standard notification. I want to split the body into two equal columns. When I try doing that in the HTML it always mess the CSS and automatically re-write it.
I am adding the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.column-left {
float: left;
width: 50%;
padding: 10px;
height: 300px;
}
.column-right {
float: right;
width: 50%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>Two Equal Columns</h2>
<div class="row">
<div class="column-left" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>text</p>
</div>
<div class="column-right" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>text</p>
</div>
</div>
</body>
But as soon I hit "ok" it re-write it to this:
<html>
<head>
<style type="text/css">.c0 { font-family: 'Arial' } .c1 { margin: 0px 0px 14px; font-size: 18px; font-weight: bold } .c2 { padding: 10px; background-color: #aaaaaa } .c3 { margin: 0px 0px 13px } .c4 { padding: 10px; background-color: #bbbbbb } </style>
</head>
<body class="c0">
<div class="c1">Two Equal Columns</div>
<div>
<div class="c2">
<div class="c1">Column 1</div>
<p class="c3">text</p>
</div>
<div class="c4">
<div class="c1">Column 2</div>
<p class="c3">text </p>
</div>
</div>
</body>
</html>
Unfortunately, Archer pretty much "dumbs" down the HTML formatting permitted in notifications. The best you can get away with is using tables instead of CSS to do columns.
Since you want equal columns with any content, you can Choose the 'Body Layout' in the Notification as 'Two Column 50-50'.
That way, you can add any dynamic content within the two columns.
You can use css grid
Css Grid is good documentation
.row {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
}
<div class="row">
<div class="column-left" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>text</p>
</div>
<div class="column-right" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>text</p>
</div>
</div>
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;
}
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; }
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" />
}