Im using jsGrid, not jqGrid..
I have bug problem on column.
here is the picture
Add the following css rule:
.jsgrid-cell {
overflow: hidden;
}
See the working fiddle https://jsfiddle.net/tabalinas/kL291xp5/
Related
I am working on Angular, and now I have problem with dropdown z-index issue.
When I inspect in chrome, there is a new class called dropdown.
In this dropdown class there some information include z-index (z-index: 1050).
However, there is no dropdown class found in my html file and the whole project as well.
.dropdown {
z-index: 1052;
background-color: red;
}
I updated my scss code with dropdown class, and it changed color to red, but z-index is not change to 1052.
Note: position of dropdown is absolute.
Can anyone help or suggest me how to solve this issue? Thank you!
.dropdown {
z-index: 1052 !important;
background-color: red;
}
It works now!
Just add !important to set z-index value.
Maybe !important help z-index value that set here overwrite to its default value???
I'm facing difficulty to solve an issue. I have made a custom pagination in my view page, but the pagination items get line breaks like following picture:
I tried to avoid that by adding <div>, but couldn't get it solved.
I used the following line just after the end of my </table> tag.
{{ $managementReport->render()}}
There's nothing wrong with your pagination code; it's likely just outputting an unordered list, in which every item is rendered in it's own line by default. You can easily override this behaviour with plain CSS using the following rule (I'm assuming you've added the .pagination class to your ul):
.pagination {
padding-left: 0;
list-style: none;
}
.pagination > li {
display: inline-block;
}
I've tried several methods to disable scroll, including using CSS position: fixed, attribute overflow-scroll="false" and etc, but all methods failed.
When I swipe down, the buttons will go up and while I swipe up the buttons will go down, like bouncing effect.
May I know any solutions to this issue? Thank you very very much.
Tested with ionic 3 (should work on ionic 2):
<ion-content no-bounce></ion-content>
I solved same problem using css. (Ionıc 3.6)
Step1: In ion-content add a new class :
<ion-content class="no-scroll">
Step2: In your CSS add the code below :
.no-scroll .scroll-content{
overflow: hidden;
}
The ion-content has a class called 'scroll-content'.
With that in mind, go to your app.css, inside the src/app and add:
app.css:
.scroll-content{overflow-y: hidden;}
That should leave your ion-content with no scroll, but I'd rather user:
app.css:
.scroll-content{overflow-y: auto;}
since this allows the scroll-content only if the page content overflows the ion-content.
This works in ionic 5:
ion-content {
--overflow: hidden;
}
<ion-content scroll-y="false">
For disable scroll in ion-content can use setScrollDisabled() method. You should follow steps below.
In hello.ts
import { app } from 'ionic-angular';
public class HelloPage
{
constructor(private app: App) {};
ngAfterViewInit(){
this.app.setScrollDisabled(true);
}
}
If you don't want the scroll you may also don't need the ion-content itself, in my status for example I want to use the ion-grid directly.
<!-- my-page.ts >
<ion-header>.......</ion-header>
<ion-grid class="has-header fixed-content">
</ion-grid>
and I added some scss for the has-header class:
ion-app {
&.md {
.has-header {
margin-top: $toolbar-md-height;
}
}
&.wp {
.has-header {
margin-top: $toolbar-wp-height;
}
}
&.ios {
.has-header {
margin-top: $toolbar-ios-height;
}
}
}
Content is placed in the scrollable area if provided without a slot. To show a fixed content add slot="fixed".
<ion-content>
<div slot="fixed">
</div>
</ion-content>
As iflagri posted in this issue and #shaneparsons pointed in the comments, using
<ion-content padding>
<div ion-fixed>
Your content here...
</div>
</ion-content>
Solve the problem.
Hope it help!
If you want to disable the content scrolling you can use
<ion-content [scrollY]="false" >
https://ionicframework.com/docs/api/content
<ion-content [attr.noScroll]="shouldScroll"></ion-content>
// scss file:
[noScroll] {
overflow: hidden;
}
Surprisingly, no-bounce attribute did work on my previous project and is not working on a new project that I am currently working on.
I tried #rodrigo-chave's solution with ion-fixed. It solved the scrolling problem, but made my content small (as if was zoomed out). Adding 100% CSS width and height properties fixed it.
<ion-content no-bounce>
<div ion-fixed style="height: 100%; width: 100%">
...
</div>
</ion-content>
I cant find any related solution to my problem here on stack over flow but here we go. i have checked footer space and marked related module with zero spacing for slide but still it is not working.
Please see www.sateeni.com and under main homepage slider i have some unwanted space and don't know why its there. Please need help to find out why and where the problem is. sorry if its very basic thing but i am new to magento so cant figure out the reason. I have tried all options but no luck.
Thanks in advance.
Adam
Your main content container is showing and even though it is empty, the CSS has padding and a minimum height:
.main {
padding: 20px 0;
min-height: 370px;
}
You can either use CSS to overwrite this min-height on the homepage only
.container.full-width {
padding: 0;
min-height: 0;
}
or just hide this element on the homepage only.
.container.full-width {
display: none;
}
I'm using twitter bootstrap dropdown menu in a fixed navbar at the top of my page.
It all works fine but am having issues with the drop down menu items showing behind other page elements rather than in front of them.
If I have anything on the page with position: relative (like jquery ui accordion, or a google chart) then the drop down menu shows behind it. Tried changing the z-index of the dd menu and of the nav-bar, but doesn't make any difference.
The only way I can get the menu to sit above the other content is to change the content to position: fixed; OR z-index: -1; -but both of these solutions cause other problems.
Appreciate any help you can give me.
I think this is probably some standard issue with CSS positioning that I've misunderstood, so haven't posted any code, but can do if needed.
Thanks.
Just realized what's going on.
I had the navbar inside a header which was position: fixed;
Changed the z-index on the header and it's working now - guess I didn't look high enough up the containers to set the z-index initially !##!?
Thanks.
IE 7 on windows8 with bootstrap 3.0.0.
.navbar {
position: static;
}
.navbar .nav > li {
z-index: 1001;
}
fixed
Ran into the same bug here. This worked for me.
.navbar {
position: static;
}
By setting the position to static, it means the navbar will fall into the flow of the document as it normally would.
This will fix it
.navbar .nav > li {
z-index: 10000;
}
In my case in addition to z-index I had to set overflow: visible in parents elements
I had the same problem and after reading this topic, I've solved adding this to my CSS:
.navbar-fixed-top {
z-index: 10000;
}
because in my case, I'm using the fixed top menu.
Still the issue with Bootstrap v3, navbar and dropdown have same z-index ;-( I just increased .dropdown-menu z-index to 1001.
Solved by removing the -webkit-transform from the navbar:
-webkit-transform: translate3d(0, 0, 0);
pillaged from https://stackoverflow.com/a/12653766/391925
Just give
position: relative;
z-index: 999;
to the navbar
This fixed it for me:
.navbar-wrapper {
z-index: 11;
}
Solved this issue by removing transform: translateY(50%); property.
This worked for me:
.dropdown, .dropdown-menu {
z-index:2;
}
.navbar {
position: static;
z-index: 1;
}
I had the same problem, in my case because i forgot this in my NavBar style:
overflow: hidden;
I ran into a situation where a button with a Bootstrap drop down was embedded in a DataTables row. In that instance, I had to remove fixedColumns: true in the settings because that was injecting a position: sticky into the element style.
Did not work:
$(document).ready(function () {
var table = $('#order').DataTable({
fixedColumns: true,
fixedHeader: true, ...
Did work:
$(document).ready(function () {
var table = $('#order').DataTable({
fixedHeader: true, ...
I'm late to the party here but for anyone using the bootstrap sticky-top class beware that it's z-index is higher than what is defined for the dropdown so anything within it will bleed through the dropdown's menu.
https://github.com/twbs/bootstrap/issues/31747
This was my scenario and the other answers here that referenced position: sticky put me onto it.
In my case, this was caused because I had a CSS animation with transform operations applied to a parent <div>. I worked around the problem by moving the animation to a different element.