I have a JQuery Mobile listview with a custom item height (50px). Whenever the item is clicked, its height changes. How can I fixate the custom height?
Fiddle: http://jsfiddle.net/3gnvhxth/6/
I am using JQuery Mobile v1.45 and JQuery 1.11.1.
Before click:
After click:
HTML:
<ul data-role="listview" data-inset="true">
<li class="custom_item">
<a class="custom_link" href="http://google.com" target="_blank">
<img class="custom_image" src="http://placehold.it/120x120&text=image1">
Click Item 1
</a>
</li>
<a class="custom_link" href="http://google.com" target="_blank">
<img class="custom_image" src="http://placehold.it/120x120&text=image2">
Click Item 2
</a>
</li>
<li class="custom_item">
<a class="custom_link" href="http://google.com" target="_blank">
<img class="custom_image" src="http://placehold.it/120x120&text=image3">
Click Item 3
</a>
</li>
</ul>
CSS:
.custom_item {
height: 50px;
max-height: 50px;
}
.custom_link {
padding-left: 50px !important;
height: 50px;
max-height: 50px;
}
.custom_image {
width: 50px;
height: 50px;
max-width: 50px;
max-height: 50px;
}
Luis is right about the min-height from the jQM CSS file. You need to override it, but also remove top and bottom padding on the link as that causes the height issue on click:
.custom_link {
padding-left: 50px !important;
padding-top: 0;
padding-bottom: 0;
line-height: 50px;
max-height: 50px;
min-height: 0 !important;
height: 50px;
}
Updated FIDDLE
Setting line-height keeps the text vertically centered. If that is not important to you, just remove it.
You have a default min-height in your css that causing the problem
CSS
.ui-listview > .ui-li-has-thumb > .ui-btn, .ui-listview > .ui-li-static.ui-li-has-thumb {
min-height: 3.625em; // Remove this or adjust to your needs
padding-left: 6.25em;
}
Related
I'm learning Responsive Media Query, I would like to do two things:
Remove arrow icon
Adapt the submenu, I guess I just have to decrease the font size?
Here is an illustration below:
How to remove this icon, please?
HTML
<ul class="nav-links">
<li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
<ng-container>
<a class="item" (click)="selectMenu(menu)">
<i [class]="menu.iconClass"></i>
<span class="links_name">{{ menu.name }}</span>
<i class="fa fa-chevron-down"></i>
</a>
<ul
class="submenu"
#submenu
[ngStyle]="{ 'height': menu.active ? submenu.scrollHeight + 'px' : 0 + 'px' } "
>
<li *ngFor="let submenu of menu.submenu">
<a routerLink="{{ submenu.url }} "
><span class="links_subname">{{ submenu.name }}</span>
</a>
</li>
</ul>
</ng-container>
</li>
</ul>
CSS
/* Responsive Media Query */
#media (max-width: 400px) {
.sidebar {
width: 0;
}
.sidebar.active {
width: 60px;
}
.home-section {
width: 100%;
left: 0;
}
.sidebar.active~.home-section {
left: 60px;
width: calc(100% - 60px);
}
.home-section nav {
width: 100%;
left: 0;
}
.sidebar .logo-details .logo_name img {
height: 30px;
width: 65px;
margin: 0 auto;
}
.sidebar.active~.home-section nav {
left: 60px;
width: calc(100% - 60px);
}
.sidebar .nav-links .submenu .links_subname {
color: #fff;
font-size: 14px;
margin: 0 auto;
}
}
Here is a reproduction here.
Thank you for your help and comments.
#media (max-width: 400px) {
.fa-chevron-down{
display: none;
}
}
this code will remove your icon
but about the text
NO
Please do not make font-size smaller, this is a wrong approach to making websites responsive. In Responsive Web Design as your device size decreases you should generally increase your sizes(absolutely there are a few exceptions but generally that's true)
because the device size is Already Small Enough!
consider yourself trying to use this page with a device with below 400px width, is it easier to read smaller texts on that site? or larger ones? is it easier to TAP on smaller buttons? or larger ones (With enough distance)
so I suggest you increase the size of your side-bar instead of decreasing your font-size
so I am having an issue with setting up NG-ZORROs layout
I have the following layout
HERE IS A STACKBLITZ EXAMPLE OF THE SETUP
Where the HEADER should be fixed in position
The SIDE NAVIGATION (on the left) should also be fixed in position when the user is scrolling the content, but it also has an internal scroll if the menu items dont fit the screen
The CONTENT should have internal scroll so that
// WRAPPER
.wrapper {
height: 100vh;
}
// HEADER
.header {
color: white;
background-color: rgb(24, 132, 255);
height: 45px;
display: flex;
justify-content: center;
position: fixed;
z-index: 999999;
width: 100%;
}
// SIDE NAV MENU
[nz-menu] {
line-height: 64px;
height: 100vh;
overflow: auto;
}
[nz-menu]::-webkit-scrollbar {
display: none;
}
// CONTENT
.input {
border: solid 1px rgb(24, 132, 255);
}
.before {
margin-bottom: 20px;
display: flex;
justify-content: center;
background-color: rgb(184, 216, 208);
opacity: 0.3;
height: 300px;
align-items: center;
}
.after {
margin-top: 20px;
display: flex;
justify-content: center;
background-color: rgb(184, 185, 216);
opacity: 0.3;
height: 800px;
align-items: center;
}
// HERE IS WHERE THE ISSUE IS
nz-content {
padding: 0 50px;
margin-top: 64px;
// WE NEED THE OVERFLOW SO THAT ONLY THE CONTENT IS SCROLLABLE AND THE REST OF THE ELEMENTS ARE NOT
overflow: auto;
}
<nz-layout class="wrapper">
<!-- HEADER -->
<header class="header">
HEADER
</header>
<nz-layout class="content">
<!-- SIDE NAVIGATION -->
<nz-sider nzCollapsible nzWidth="200px">
<ul nz-menu nzMode="inline" nzTheme="dark" class="menu-children">
<li nz-menu-item>
<span>Menu 0</span>
</li>
<li nz-submenu *ngFor="let item of menuItems" (nzOpen)="openMap.menu+item"
(nzOpenChange)="openHandler('menu'+ item)" nzTitle="{{'Menu' + item}}">
<ul>
<li *ngFor="let submenuItem of menuItems" nz-menu-item>
Menu {{submenuItem}}
</li>
</ul>
</li>
<li nz-menu-item (click)="openHandler('menu11')">
<span>Templates</span>
</li>
</ul>
</nz-sider>
<!-- CONTENT -->
<nz-content>
<!-- ONLY CONTENT IN THE NZ-CONTENT SHOULD BE SCROLLABLE -->
<p class="before">
CONTENT BEFORE SEARCHBAR
</p>
<!-- SEARCHBAR + AUTOCOMPLETE -->
<nz-input-group class="search-wrapper" nzSize="large">
<!-- INPUT -->
<input
class="input"
type="text"
nz-input
placeholder="Click here and scroll..."
[nzAutocomplete]="auto"
/>
<!-- AUTOCOMPLETE -->
<nz-autocomplete #auto>
<nz-auto-option [nzDisabled]="true">
<span class="no-results"> No Results </span>
</nz-auto-option>
</nz-autocomplete>
</nz-input-group>
<p class="after">
CONTENT AFTER SEARCHBAR
</p>
</nz-content>
</nz-layout>
</nz-layout>
My issue is that in order to achieve that i have set up the CONTENT with overflow: auto and everything works as expected... until I added a search bar with an autocomplete box.
Now when you click the search box and scroll on the content the autocomplete box stays in position instead of sticking to the input field of the the search bar - see image
HERE IS A STACKBLITZ EXAMPLE OF THE SETUP
I was able to do some hacky workarounds, but they dont work 100%.
Does anyone know why setting up the nz-content with overflow:auto breaks the autocomplete box position ?!
Ok, after a lot more research I was able to find a working solution to the problem.
It turned out to be the following
In the usage of tooltip (including popconfirmăpopover), body element's scroll event will update the position of tooltip. It will never update the position of tooltip if the scroll event happens in a custom element.You can add cdkScrollable directive to achieve the goal. Take notice that you need to import relative package import {ScrollingModule} from '#angular/cdk/scrolling';, for more information you can visit scrolling/api.
source - ng-zorro (bottom of the page)
I also found this stackoverflow question about Material Design Autocomplete
So based on those two, what ended up doing is I imported the ScrollingModule to my module like so
import { ScrollingModule } from '#angular/cdk/scrolling';
#NgModule({
imports: [
// ...
ScrollingModule,
],
// ...
})
export class MyAppModule { }
and then just applying the cdkScrollable to NZ-CONTENT
<nz-content cdkScrollable> CONTENT GOES HERE </nz-content>
Here is a link with the working solution - line 37
Fellow Coders,
I encountered a problem while putting dropdown menu into my app's navigation. When I drag my mouse over my dropdown element, menu below expands together expanding div element above (which is dropdown menu's name) and pushing all other items in navigation's menu to the right side. Here is my code:
const listItems = links.map((link_name) =>
<li className="nav-item" key={link_name}>
<div className="nav-link"><DropDown name={link_name} /></div>
</li>
);
return (
<nav className="navbar-light" style={{ backgroundColor: '#333333' }}>
<div>
<div className="container-fluid">
<Link to="/" className="navbar-brand">
<img alt="dribbble" style={styles.style_img} src={"http://www.underconsideration.com/brandnew/archives/dribbble_logo_detail.png"} />
</Link>
<ul className="nav navbar-nav" style={styles.style_l}>
{listItems}
</ul>
</div>
<ul className="nav navbar-nav" style={styles.style_r}>
{this.renderLinks()}
<li className="nav-item" key={10}>
<input type="search" ref="city" placeholder="Search"/>
</li>
</ul>
</div>
</nav>
);
const styles = {
style_r: {
margin: 10,
top: 5,
right: 17,
bottom: 20,
left: 'auto',
position: 'fixed',
},
style_l: {
margin: 5,
top: 10,
left: 134,
bottom: 20,
position: 'absolute',
},
style_img: {
margin: 5,
left: 10,
width: 100,
height: 42,
}
};
dropdown is defined as:
if(this.state.menuActive) {
menu = <div>
<ul className="drop">
<li>First Item </li>
<li>Second Item </li>
<li>Third Item </li>
</ul>
</div>
} else {
menu = "";
}
return (
<div id = "menu">
<div id = "dropdown_name" style={{ color: '#F5F5F5' }} onMouseOver = { this.toggleMenu } onMouseLeave = { this.toggleMenu }>{this.props.name}</div>
<ReactCSSTransitionGroup transitionName = "menu" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
{menu}
</ReactCSSTransitionGroup>
</div>
)
if I put style={{ position: absolute }} on div (dropdown_name), in my nav bar every element collides into one gibberish weird looking unreadable name...
and here's mine css:
.menu-enter {
max-height: 0px;
-webkit-transition: max-height;
overflow: hidden;
width: 100%;
}
.menu-enter.menu-enter-active {
height: auto;
max-height: 100px;
width: 100%;
}
.menu-leave {
max-height: 100px;
-webkit-transition: max-height;
width: 100%;
}
.menu-leave.menu-leave-active {
overflow: hidden;
max-height: 0px;
width: 100%;
}
ul.drop {
margin-top: 7px;
background-color: #333333;
color: #6D6D6D;
border: #333333 solid 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
width: 100%;
padding-left:0.4em;
font-size: 12pt;
list-style-type: none;
}
How can I prevent dropdown from expanding my dropdown's name above? I want that my divs that represent dropdown's names would remain the same width.
From MDN:
The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static).
Keep your absolute positioning on the dropdown component, and place a position: relative; style on the dropdown's container component (nav-link). This will allow the dropdown to be positioned relative to it's containing nav link.
It seems like your issue with every element combining when you added the absolute position was because they were all being absolutely positioned to the body element.
I am trying to align these four separate spliced images from an original image. I am doing this because each portion of the image has a separate link.
I have the images align. Now all I want to do is shrink the size of the images via width: #%;
For some reason this just isn't seeming to work.
Any help would be appreciated.
Here is a link to the CodePen: http://codepen.io/anon/pen/pvGgdp
.split,
.split2,
.split3,
.split4 {
display: inline-block;
margin: -2px;
}
.spliter {
margin-top: -3px;
}
<div class="splitWrapper">
<div class="split">
<a href="#">
<img src="http://i.imgur.com/Jnah8Y0.png" title="source: imgur.com" />
</a>
</div>
<div class="split2">
<a href="#">
<img src="http://i.imgur.com/mGftOCN.png" title="source: imgur.com" />
</a>
</div>
<div class="spliter"></div>
<div class="split3">
<a href="#">
<img src="http://i.imgur.com/ZooSwpU.png" title="source: imgur.com" />
</a>
</div>
<div class="split4">
<a href="#">
<img src="http://i.imgur.com/sMsHX14.png" title="source: imgur.com" />
</a>
</div>
</div>
You could use background images and assign them to the a tags. I have amended your codePen here > http://codepen.io/anon/pen/YPBwJX
However, it may be better to just use one image, and overlay transparent a-tags, set them to display block and then you don't have to worry about the image lining up! Anyways, please see the code below for the question asked =)
.splitWrapper {
width: 850px;
margin: auto;
}
a.split1 {
background: url('http://i.imgur.com/Jnah8Y0.png');
}
a.split2 {
background: url('http://i.imgur.com/mGftOCN.png');
}
a.split3 {
background: url('http://i.imgur.com/ZooSwpU.png');
}
a.split4 {
background: url('http://i.imgur.com/sMsHX14.png');
}
a.split{
width: 417px;
height: 300px;
float: left;
margin: 0;
padding: 0;
display: block;
background-size: 417px 300px;
}
.clear { clear: both; }
<div class="splitWrapper">
<div class="clear"></div>
</div>
I don't think you quite understand how % works in CSS. % means that percentage of the parent element. Also, for it to work, the parent element has to have a defined width. Here's the CSS changes you need:
.splitWrapper {
width: 100%;
}
.split, .split2, .split3, .split4 {
display: inline-block;
margin: -2px;
width: 25%;
}
.split img,
.split2 img,
.split3 img,
.split4 img {
max-width: 100%;
}
.spliter {
margin-top: -3px;
}
http://codepen.io/anon/pen/KwJVGQ
You'll need to adjust your margins accordingly. You should use percentage margins since you're working with percents. Just divide the width of the margin by the width of the element and multiply it by 100 to get your margin percentage.
<div class="oringal">
<ul class="rank">
<li class="rank-1">
<img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/Tetra_pak_New_packaging_Juice7_by_KATOK.jpg" />
<p>1</p>
</li>
<li class="rank-2">
<img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/21.jpg" />
<p>2</p>
</li>
I want to get the ranking sequence as follows, but i do not want change the html, how can i just change the css in the div.oringal to get the ranking sequence as follows.first in center, second rights, third lefts
please see the full code on jsfiddle page http://jsfiddle.net/6grsm/1/, thanks a lot
You could try using absolute positioning. It looks like you are creating a shopping cart layout so I assume that you have a fairly structured page to start with.
See demo at fiddle: http://jsfiddle.net/audetwebdesign/rC59T/
Your HTML is basically this:
<div calss="panel-wrap">
<ul class="rank">
<li class="rank-1">
<img ... />
<p>1</p>
</li>
<li class="rank-2">
<img ... />
<p>2</p>
</li>
<li class="rank-3">
<img ... />
<p>3</p>
</li>
</ul>
</div>
For the CSS:
.panel-wrap {
width: 460px;
}
The .panel-wrap is useful if you want to add background images and so on.
ul.rank {
list-style: none outside none;
padding: 0;
margin: 0;
position: relative; /* this will force the li to be positioned with respect
to this block level container */
border: 1px solid gray;
height: 200px;
}
ul.rank li {
width: 150px;
top: 0; /* pin top and bottom so that the li fills in the height
of the parent container */
bottom: 0;
border: 1px solid red;
position: absolute;
}
ul.rank img {
width: 150px;
xheight: 90px; /* Careful not to adjust both width and height which could
distort your images */
}
ul.rank p {
border: 1px dotted blue;
text-align:center;
position: absolute;
bottom: 10px;
left: 0; /* pin left and right so the p fills in the
width of the li... */
right: 0;
margin: 0;
}
The trick is to adjust the left offset for each list item in uniformly spaced increments:
.rank-3 {
top: 0;
left: 0;
}
.rank-1 {
top: 0;
left: 160px;
}
.rank-2 {
top: 0;
left: 320px;
}
The Big Advantage
What you could do is set the left offset dynamically using JavaScript/jQuery, and create an interactive page where the user can click buttons and scroll through a series of catalog items.
"i want get the sequence 3 1 2, but i do not want to change the sequence in html in div.original, my question is, how should i change the css"
From that comment, it seems that what you actually is not to change the positioning of elements, but change the order of numbering, which is a completely different question. The easiest way to do this is to use the (deprecated, but still seemingly supported) start attribute of the ol tag. In CSS, you can also set counter-increment for li tags, which will enable customisation of what the li tags display. Examples of the various methods are in this Stackoverflow answer