Here is my code :
<body>
<div class="headerCont noprint">
<div class="headerHold">
<div class="logoCont"><img src="images/logo.jpg" width="104" height="74" alt="Logo"></div>
<ul id="navCont">
<li>blogs</li>
<li>products</li>
<li class="active">Expert</li>
<li>events</li>
<li>Business</li>
</ul>
<div class="rightHeadCont">
<div class="smIcon fbIcon"></div>
<div class="smIcon twtIcon"></div>
<form id="search">
<input type="submit" value="Submit" class="searchBtn">
<input type="text" name="search" placeholder="search" class="searchInput">
</form>
</div>
</div>
</div>
<div class="breadCrumbs noprint">
<ul>
<li>Home</li>
<li><a>></a></li>
<li><a>Expert</a></li>
</ul>
</div>
<div class="cl"></div>
<div class="container">
<ul class="banner noprint">
<li><img src="images/headerImg.jpg" /></li>
<li><img src="images/headerImg.jpg" /></li>
<li><img src="images/headerImg.jpg" /></li>
<li><img src="images/headerImg.jpg" /></li>
</ul>
<div class="bannerShdw noprint"><img src="images/bannerShdw.jpg" width="100%" height="13"></div>
<div class="titleCont">
<h1>Expert</h1>
<ul id="docIcons">
<li class="a"></li>
<li class="b"></li>
<li class="c"></li>
<li class="d"></li>
</ul>
</div>
<?php
$expertsql = "SELECT * FROM experts WHERE is_active = '1' ";
$expertex = mysqli_query($db,$expertsql);
$ispresent = #mysqli_num_rows($expertex);
if($ispresent > 0)
{
while($experts = mysqli_fetch_assoc($expertex))
{
?>
<div class="expertCont">
<div class="imgCont">
<div class="imgHold">
<img src="<?php echo base_url;?>thumbnail.php?file=admin/uploads/experts/<?php echo $experts['image'];?>&width=170&height=169&maxw=170&maxh=169">
</div>
</div>
<h2><?php echo ucwords($experts['name']);?></h2>
<?php echo trim($experts['short_description']);?>
<div class="readMore">
Read more >
</div>
</div>
<?php
}
}
else
{
echo 'No Expert Found';
}
?>
</div>
CSS :-
#media print
{
.noprint {display:none;}
}
The section which I don't want to show while printing is :- noprint and I have declared display:none to this class. It also get hidden but it leaves blank page at the top. See the screen shot below :
How to remove the blank space at the top? I also saw html #MEDIA print {}, to hide markup leaves blank space in the print but it it not worked for me. Thanks in advance
EDIT :-
CSS :-
.headerCont {
width: 100%;
height: 85px;
background: url(../images/headerBg.jpg) repeat-x bottom center;
.breadCrumbs {
width: 1001px;
margin: 0 auto;
height: 38px;
}
.bx-wrapper {
position: relative;
margin: 0 auto 60px;
padding: 0;
}
.bannerShdw {
width: 100%;
height: 13px;
margin-bottom: 30px;
}
if your headerCont class has css which enables the class to have any other display value and/or height you might still see that space even when printing. I suggest you use !important:
#media print
{
.noprint {
display:none !important;
height:0px !important;
}
}
Related
As the title says, I want to add a class i.e. .show to an anchor tag, where the class equals the .image_category, for e.g. CNC_Machining.
(See HTML in DevTools AND/OR PHP row from DB)
The button elements receive the active class when it has been clicked by a user.
This is part of a filterable image gallery. The images are loaded from a DB and displayed in the browser via PHP. This means that the images are already available, it's only about showing them or hiding them with the well-known display: none; / display: block; attribute.
I believe I must have made an error in the code somewhere, because to the best of my knowledge I have followed instructions from other e.g.
Help would be appreciated.
Please have a look at the relevant code below. So far I have only writen code which includes checks for an active CNC_Machining in order to reduce complexity.
EDIT:
I also indluded the code which assigns ACTIVE to the clicked button. I was reluctant first, because I thought it makes it too complex to analyze, however maybe it will help with trouble shooting.
To make this more palpable:
User clicks button CNC_Machining -- active class is assigned to the same button.
When active class is assigned to button -- .show class is added to anchor tag where the class is .CNC_Machining.
Image shows in the browser
Here is an image of the HTML in devTools:
DevTool Image
JS CODE TO ASSIGN "ACTIVE" CLASS to clicked button:
// The button which would be used to add 'active' class to
// all the buttons.
let allButton = document.querySelector('#All');
let btns = Array.from(document.querySelectorAll('.category-button'));
let activeButton = null;
const handleClick = (e) => {
e.preventDefault();
e.currentTarget.classList.add('active');
// Checks that the activeButton is defined (initially it's null).
// Also checks that the button that was clicked is not the button which is
// already active to avoid removing the active class on double click.
if (activeButton != null && activeButton != e.currentTarget) {
activeButton.classList.remove('active');
}
activeButton = e.currentTarget;
}
btns.forEach(node => {
node.addEventListener('click', handleClick)
});
// Listen to a click event from the "allButton" and when it's clicked,
// loop through the buttons array and add 'active' class to all buttons
// in it.
allButton.addEventListener('click', function() {
btns.forEach(btn => {
btn.classList.add('active');
})
});
let category_btn = category_btns.getElementsByClassName('category-');
category_btn.addEventListener("click", function() {
addClassShow(category_btn)
});
JS CODE TO ASSIGN SHOW CLASS:
let category_btns = document.getElementById('category-buttons');
let category_btn = category_btns.getElementsByClassName('category-button');
// if the CNC_Machining button is "active" give anchor tags with .CNC_Machining classes the CSS .show atttribute.
let category_btn = getElementsByClassName('category-button');
let CNC_Mach_btn = document.getElementById("CNC_Machining_button");
let CNC_Machining_Class_In_AnchorTag = document.getElementsByClassName("CNC_Machinery");
CNC_Mach_btn.addEventListener("click", function() {
// if the the CNC_Machining button is active make classes with Images with CNC_Machining active.
if (CNC_Mach_btn.classList.contains("active")) {
CNC_Machining_Class_In_AnchorTag.classList.add("show");
}
});
CSS:
#category-buttons {
float: left;
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 12.5%;
margin: 10vh 10px;
}
.category-button {
padding: 20px;
margin: 2px 0;
color: white;
background: rgb(153, 124, 124);
}
.product-gallery-title {
text-transform: uppercase;
}
.wrapper {
text-align: center;
width: 65%;
margin: auto;
}
.gallery-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 13px;
margin: auto;
width: 100%;
background: rgb(236, 236, 236);
justify-content: center;
}
.images {
display: none;
height: 300px;
width: 300px;
max-width: 300px;
max-height: 300px;
text-decoration: none;
}
.show {
display: block;
}
HTML and PHP CODE from code editor:
<div id="category-buttons">
<h5>Choose image category</h5>
<button id="All" class="category-button active" >All Categories</button>
<button id="CNC_Machining_button" class="category-button CNC_Mach_btn">CNC_Machining</button>
<button id="HP_Die_Casting_button" class="category-button HP_Die_btn">HP Die Casting</button>
<button id="Iron_Casting" class="category-button">Iron Casting</button>
<button id="Steel_Casting" class="category-button">Steel Casting</button>
<button id="Precision_Casting" class="category-button">Precision Casting</button>
<button id="Aluminium_Casting" class="category-button">Aluminum Casting</button>
</div>
<section class="gallery-links">
<div class="wrapper">
<h2 class="product-gallery-title">Product Gallery</h2>
<div class="gallery-container">
<?php
include_once 'includes/dbh.inc.php';
$sql = 'SELECT * FROM gallery ORDER BY orderGallery DESC';
$stmt = mysqli_stmt_init($conn);
if (!mysqli_stmt_prepare($stmt,$sql)) {
echo 'SQL statement failed!';
} else {
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
while ($row = mysqli_fetch_assoc($result)) {
//what's echoed out by the database
echo ' <a class="images '.$row["image_category"].'" style="background-repeat:no-repeat; background-image: url(gallery/'.$row["imgFullNameGallery"].')">
<div class="color-overlay">
<h3>'.$row["titleGallery"].'</h3>
<p>'.$row["descGallery"].'</p>
</div>
</a>';
}
}
?>
</div>
</div>
<?php
if (isset($_SESSION['username'])) {
echo '<div class="gallery-upload">
<h3>Please fill in the text fields, select the image and upload to gallery by clicking upload.</h3>
<form action="includes/gallery-upload.inc.php" method="post" enctype="multipart/form-data">
<input type="text" name="filename" placeholder="File name...">
<input type="text" name="fileTitle" placeholder="Image title...">
<input type="text" name="fileDescription" placeholder="Image Description...">
<input type="text" name="category" placeholder="Category....">
<input type="file" name="imageFile" >
<br>
<br>
<button class="gallery-submit-btn" type="submit" name="submit">UPLOAD</button>
</form>
</div>';
}
?>
</section>
HTML output from browser DEV_Tools:
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="galleryTest.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>TEXATREK</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-expand-lg navbar-light bg-light" id="navi">
<a class="navbar-brand" href="/trexatex/trexatek_V4.php">
<img class="brand-logo" src="../images/logos/Trexatek_Logo_AND_Name_Gold-Orange.png" alt="">
</a>
<!--HAMBURGER Toggler Icon-->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<!-- NAVBAR -> div BELLOW -->
<div class="collapse navbar-collapse text-uppercase" id="navbarMenu">
<ul class="navbar-nav ml-auto mr-5 ">
<li class="nav-item mr-5"><a class="nav-link" href="../trexatek_V4.php">Home</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="../manufacturing.html">Manufacturing</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="/trexatex/PHPGallery/GalleryInPHP.php">Gallery</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">About</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Contact</a></li>
</ul>
</div>
</nav>
<div id="category-buttons">
<h5>Choose image category</h5>
<button id="All" class="category-button active">All Categories</button>
<button id="CNC_Machining_button" class="category-button active">CNC_Machining</button>
<button id="HP_Die_Casting_button" class="category-button">HP Die Casting</button>
<button id="Iron_Casting" class="category-button">Iron Casting</button>
<button id="Steel_Casting" class="category-button">Steel Casting</button>
<button id="Precision_Casting" class="category-button active">Precision Casting</button>
<button id="Aluminium_Casting" class="category-button">Aluminum Casting</button>
</div>
<section class="gallery-links">
<div class="wrapper">
<h2 class="product-gallery-title">Product Gallery</h2>
</div>
</section>
<div class="login-container">
<p>Login area</p>
<form class="login-form" action="../Login-System/login_user.php" method="POST">
<input class="login" type="text" name="userName" placeholder="username">
<br>
<input class="login" type="text" name="userPassword" placeholder="password">
<br> <br>
<button class="login-button" type="submit" name="submit_usrName_and_psw">Sign in</button>
</form>
<br>
<h3>You currently logged out!</h3> </div>
</body><div class="gallery-container">
<a class="images " style="background-repeat:no-repeat; background-image: url(gallery/asf.UNIQid5c3f6d21e13ba8.48416291.jpg)">
<div class="color-overlay">
<h3>asf</h3>
<p>asdf</p>
</div>
</a> <a class="images " style="background-repeat:no-repeat; background-image: url(gallery/1234.UNIQid5c3f6d0fe3b117.37260531.jpg)">
<div class="color-overlay">
<h3>wqer</h3>
<p>qwer</p>
</div>
</a> <script src="jsCode.js"></script><a class="images Sand_Casting" style="background-repeat:no-repeat; background-image: url(gallery/castingwork.UNIQid5c3769cc010891.70586628.jpg)">
<div class="color-overlay">
<h3>Caster at work</h3>
<p>Image of one of our workers casting</p>
</div>
</a> <a class="images HP_Die_Casting" style="background-repeat:no-repeat; background-image: url(gallery/cast_pulley.UNIQid5c3723915a1120.39380036.jpg)">
<div class="color-overlay">
<h3>Precision Molding</h3>
<p>Cast Pulley made by PM</p>
</div>
</a><a class="images CNC_Machinery" style="background-repeat:no-repeat; background-image: url(gallery/steelcastminiturbine.UNIQid5c372f45d3fba6.30267243.jpg)">
<div class="color-overlay">
<h3>MiniTurbine</h3>
<p>MiniTurbine from SteelCasting</p>
</div>
</a> <a class="images CNC_Machinery" style="background-repeat:no-repeat; background-image: url(gallery/galvanized_cast_iron.UNIQid5c3720c4502f92.46784406.jpg)">
<div class="color-overlay">
<h3>Galvanized_Cast_Iron</h3>
<p>Image of connector manufactured in Galvanized_Cast_Iron_Way</p>
</div>
</a> <a class="images Sand_Casting" style="background-repeat:no-repeat; background-image: url(gallery/pizza-pie.UNIQid5c372f19564787.51280655.jpg)">
<div class="color-overlay">
<h3>Cool pic</h3>
<p>When workers work</p>
</div>
</a> <a class="images Sand_Casting" style="background-repeat:no-repeat; background-image: url(gallery/greensandmoulding.UNIQid5c372eec267ff2.76912593.jpg)">
<div class="color-overlay">
<h3>Green Sand Molding</h3>
<p>Casting process for Green Sand Molding</p>
</div>
</a>
</div></html>
I'm working on a Vue poject and I let the user choose the width and height of app main container by clicking on each device specific icon (mobile, tablet, laptop and desktop). something like firefox responsive tool. how can I force elements inside the main container respond to it's own viewport rather than browser viewport?
I'm using UIKit width component to define my breakpoints. I know I can achieve this by adding/removing classes dynamically, but my Vue components are added dynamicallly by the user, so it's more complex.
I thought there might be a more generic way to do this. here's the sample code ( number of visible slides changes in defferent viewports and if my component is a grid element items inside it should wrap ( based on container width ) ):
<div id="main-container" :style="{width: deviceWidth, height: deviceHeight}">
<!-- Dynamically added component -->
<div class="uk-position-relative uk-visible-toggle uk-light" uk-slider>
<!-- UIKit Width classes -->
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="../../img/01.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>1</h1></div>
</li>
<li>
<img src="../../img/02.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>2</h1></div>
</li>
<li>
<img src="../../img/03.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>3</h1></div>
</li>
<li>
<img src="../../img/04.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>4</h1></div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
</div>
Explanation
This is a very simple, and minimal answer, it's literally been written to simply illustrate how you can tackle your problem, but as you can see within this answer, pressing the different buttons makes the containing element grow/shrink.
As you can see within this solution, all of the elements that are responsive will respond based on the parent element's size. It's really easy to achieve this if you use fixed sizes, like in my example.
Although, take note, I only selected to use a very minimal implementation, no use of Vue or anything sophisticated, this is a simple solution, using native technologies only.
Edit
After having learned exactly what you're looking for, the long story short is that there's no clean & easy way to do that, at least to my knowledge, your best bet would be to simply change & alter the classes, that, by far makes the most sense.
Because your question is somewhat vague, to me it appears that you're trying to execute logic similar to what #arieljuod has stated, where you're trying to run media queries on specific DOM elements rather than the user's viewport.
I'm sorry to inform you that to my knowledge there's no clean and easy way to achieve this, not to say that there isn't a way, I'm sure someone has found a way, but a clean, concise, easy to read, solution, I highly doubt there's such a solution.
const clickHandler = txt => {
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
break;
case 'Tablet':
clName = 'tablet';
break;
case 'Mobile':
clName = 'mobile';
break;
default:
clName = 'desktop';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>
Possible Solution
What I would do in this scenario is as stated above, alter classes on the slider, like so, I mean you could use extra/additional logic to check the user's width & whatnot, but this is possibly the most simplistic approach possible.
const clickHandler = txt => {
const slider = document.getElementById("mySlider");
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
break;
case 'Tablet':
clName = 'tablet';
slider.className = 'uk-slider-items uk-child-width-1-3';
break;
case 'Mobile':
clName = 'mobile';
slider.className = 'uk-slider-items uk-child-width-1-2';
break;
default:
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul id="mySlider" class="uk-slider-items uk-child-width-1-4">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>
<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow">
<li ng-repeat="user in searchUserList">
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="{{user.faceIcon}}" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname" ng-bind="user.username"></div>
<span ng-bind="'账号：'+user.account" class="wm_search_uacc"></span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="resources/images/default_faceicon.jpg" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname">fdsfsfds</div>
<span class="wm_search_uacc">fsdfds</span>
</div>
</a>
</li>
</ul>
.wm_clearfix3{
overflow: auto;
height: 1%;
}
I added a clearfix css class in my label,and it was working well when I had not add angular codes into my HTML.But when I added angular into HTML,the clearfix class became don't work.The cut picture like this:
Maybe because of 'ng-repeat'?Can somebody help me?
You don't need to add ng-class unless you are adding a class with logic. So just add class is enough
Why use 'ng-class' if you have not an angular expression ?
try with:
ng-class="{wm_clearfix3}"
or:
.wm_clearfix3{
overflow: auto;
height: 1%;
clear: both;
}
Does the solution at the below JSFiddle link help you out at all?
https://jsfiddle.net/6vm4csjb/
ul {
list-style: none;
}
[class*="wm_clearfix"] {
display: inline-block;
width: 100%;
}
[class*="wm_clearfix"]:before, [class*="wm_clearfix"]:after {
display: table;
content: " ";
}
img {
display: inline-block;
width: 20px;
height: 20px;
}
.pull-left {
float: left;
}
<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow">
<li ng-repeat="user in searchUserList">
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="{{user.faceIcon}}" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname" ng-bind="user.username"></div>
<span ng-bind="'账号：'+user.account" class="wm_search_uacc"></span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="resources/images/default_faceicon.jpg" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname">fdsfsfds</div>
<span class="wm_search_uacc">fsdfds</span>
</div>
</a>
</li>
</ul>
When I make a simple demo of pop up having 2 or 3 items my triangle arrow is visible on the bottom.
http://jsfiddle.net/TFX6p/8/
When I add more items and set height and overflow:auto; my triangle arrow does not display, why?
http://jsfiddle.net/TFX6p/12/
<div data-role="page" id="MainPage">
<div data-role="popup" id="Mainnavpanel" data-theme="b" data-arrow="b">
<ul data-role="listview">
<li> Close
</li>
<li>Page1
</li>
<li>Page2
</li>
<li>Page3
</li>
<li> Close
</li>
<li>Page1
</li>
<li>Page2
</li>
<li>Page3
</li>
</ul>
</div>
<div data-role="header" id="MainPageheader" data-position="fixed" data-tap-toggle="false" data-fullscreen="false">
<h1>Header</h1>
</div>
<div data-role="content">content</div>
<a href="#Mainnavpanel" data-rel="popup" data-role="button" >openpopup</a>
</div>
Scroll on ul element will not work, try to apply width-height on outer div#Mainnavpanel-popup like,
#Mainnavpanel-popup{
width: 300px;
height: 200px;
overflow: auto;
}
Demo
Updated if it should be visible then apply css on class ui-listview like,
.ui-listview{
width: 300px;
height: 200px;
overflow: auto;
}
Updated Demo
when I run the below code, the page doesn't scroll, and doesn't show all of my page container. first I used Ajax but my menu didn't work. then I had to use Iframe tag. but it has a problem too. I try to discover the problem but I didn't succeed. can anybody help me to solve this?
<div id="maincontainer" style="position: fixed; width: 80%; height:500px; right: 10%; ">
<table style="background-color: rgb(100, 100, 100); border-radius: 5px;" dir="rtl">
<tr>
<td style="width: 90px; height: 30px;">صفحه اصلی</td>
<td style="width: 60px; height: 30px;">پروفایل</td>
</tr>
</table>
<div id="three" style="font-family: 'B Homa'; font-size: large;">
<ol>
<li data-slide-name="slide-one">
<h2>
<span>مدیریت مدیران</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/1.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-two">
<h2>
<span>مدیریت فرم ها</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/2.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-three">
<h2>
<span>مدیریت فرهنگی</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/3.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-four">
<h2>
<span>مدیریت آپلود سنتر</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/4.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-five">
<h2>
<span>مدیریت اخبار</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/5.jpg" alt="image" />
</div>
</li>
</ol>
<noscript>
<p>
Please enable JavaScript to get the full experience.
</p>
</noscript>
</div>
<div>
<ul class="menu">
<li><span class="l"></span><span class="r"></span><span class="t">مديريت کاربران</span>
<ul>
<li>کاربران فعال</li>
<li>کاربران بلاک</li>
<li>تمام کاربران</li>
<li>کاربران تایید نشده</li>
</ul>
</li>
<li><a href="#"><span class="l"></span><span class="r"></span>
<span class="t">مديريت آپلودسنتر</span></a>
<ul>
<li>نمایه جدید</li>
<li>لیست نمایه ها</li>
<li>دسته بندی جدید</li>
<li>لیست دسته ها</li>
<li>آیتم جدید</li>
<li>لیست آیتم ها</li>
</ul>
</li>
</ul>
</div>
<div id="contentwrapper">
<div id="contentcolumn"><%--<div id="newContent" style="float:left; width: 100%; height: 615px; direction: rtl; ">
</div>--%>
<iframe id="frame" runat="server" style="width: 1095px; height: 1600px;"></iframe>
</div>
</div>
<div id="stickybar" class="expstickybar">
</div>
<div style="text-align: center; padding-top: 3px">
<b>Copyright (c)</b>
</div>
<!-- LeftPanel Plugin -->
<div class="float">
<div class="moduletable">
<p>
برنامه امروز
</p>
</div>
</div>
<script language="javascript" type="text/javascript">
//$(document).ready(function () {
// $('#accordion').accordion();
//});
function ChangeSrc(trg) {
var frm = document.getElementById("frame");
if (frm) {
frm.src = trg;
}
}
</script>
<script type="text/javascript">
(function ($, d) {
$('#three').liteAccordion({ autoPlay: true, theme: 'dark', rounded: true, enumerateSlides: true, firstSlide: 1, easing: 'easeInOutQuart' });
})(jQuery, document);
</script>
</div>
Please, just remove the css property position: fixed; from maincontainer div.
As you can see at this sample that I made from you sample html code, I just remove that property.
You could also play around with the css property overflow:auto; that controls when to show the scroll, or show/hide the content beyond the limited area of a div.