I build bootstrap table with chosen jquery popup inside and I set the table to be x-scrollable when the table viewed on max-width:512px media query to:
#media (max-width:512px){
table {
overflow-x: auto;
overflow-y: hidden;
display: block;
white-space: nowrap;
}
}
so the table keeps the width and just scroll horizontally.
The problem i'm facing, when the view with width more than the media queries limits the popup, which I built using chosen jquery plugin, it displays correctly but when the view gets smaller width the popup appears under the borders of the table, I tried all the positions and displays in css but no luck.
you can view the table: http://plnkr.co/edit/rQmrAwjQO0tg1SH2CIko?p=preview
To see the problem re-size the preview to smaller width until you see the horizontal scroller.
I want to make the popup display above the table.
Please Advice,
Related
I have a div containing a form like this:
The results table below is very wide, so horizontal scroll is needed.
How can I make the form div sticky so that when I horizontally scoll
over the results the form stays on the top?
Only found documentation on vertical scroll with position:sticky, but nothing about horizontal scroll. Any advice will be welcome.
try to wrap the table in the div with class name wrapper or any name you want and add these styles:
.wrapper {
width: 100vw;
overflow-x: scroll;
}
I am working on a Lightbox (tutorial), a div container which opens on a click.
This div container isn´t displayed and is located under the click element.
Now i tried to center it vertical but withouth success.
Found some other questions here on Stackoverflow, but no one worked for me, like this.
$(window).resize(function() {
$(".modal-box").css({
top: (($(window).height() - $(".modal-box").outerHeight() / 2) + $(window).scrollTop() + "px")
});
});
The problem is: At the beginning the div is almost out of the bottem screen and divs below gone out of top screen.
I would have each div in the middle of the screen, no matter of the position.
As #Rakesh commented on the question, this can be done with CSS alone; see this fiddle https://jsfiddle.net/xc2vrghx/1/
You have to use 2 div's.
Outer one with full 100% width/height, absolutely positioned, display set to table & alignments to center & middle - like this:
display: table;
min-width: 100%;
min-height: 100%;
position:absolute;
The the inner div (which is your centered container) must have css display set to table-cell, and give center & middle alignments to this container:
display: table-cell;
vertical-align: middle;
text-align: center;
place whatever you want inside this; fiddle example contains additional html inside this middle container to show as example.
CSS display property's table & table-cell values are playing the magic role here. http://colintoh.com/blog/display-table-anti-hero is a very good article to understand
Is there a way to set a max-height on a Bootstrap accordion in an AngularJS app, such that the whole accordion can be made to fit on screen and only the expanded pane scroll it's content if needed?
So far I've only been able to have the whole accordion scroll, rather than the content.
Edit to add:
A bare-bones plunk of what I've been working with: http://plnkr.co/edit/97fqbx1Wg84hcTpW24Yi?p=preview
To get the content of each panel to scroll properly I've tried variants of:
.content {
max-height: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
but since the parent elements are all full-height regardless of any CSS I've tried that doesn't do any good.
I've tried setting heights and max-heights on every combination of the relevant elements but nothing seems to get close, especially taking into account the fact that the accordion will hold an unknown number of items.
I am using Html and Css to create DropDown Menu in Vertical Direction as shown here.
[http://jsfiddle.net/techspartan/8u8NH/][1]
I am using div to divide my page in two parts such that menu is displayed on left side followed by some content in the remaining space. For example if width of webpage is 1024px than I am allocating 200px to menu and remaining 824px to div that has content. But after using div I am not able to navigate to submenu "3.4.1" and "3.4.2" as shown in the url posted above as I can understand this is happening because the submenu is crossing the space allocated to it.
So how can I solve this problem and I don't want to allocate more width to my menu and that menu should be followed by content.
Any help would be most welcome.
Thanks.
Quick fix is to ensure that the Z-Index is for your nav is higher than the z-index for your content.
The reason it's closing in your fiddle because once you touch the text, you're no longer hovering over your nav but instead hovering over your text.
#nav li {
background-color: #000000;
margin-top: 1px;
position: relative;
width: 125px;
border-radius: 15px;
z-index:10;
}
Increasing z-index on the #nav li fixes this issue.
Fiddle
I've set jQuery's accordion ui widget to fill space and resize on demand. Whenever the resize takes place, the accordion cuts through the page footer, which I've 'fixed' to the bottom of the page. I've also tried setting the footer to: #footer {position: absolute; bottom: 0; } but on resize the footer moves nearly to the middle of the page. Does anyone have any ideas/suggestions on how I can handle the resize so the newly sized accordion does NOT pass through the footer?
Try make a container and set its CSS to
overflow:auto;
Or try set the container to:
display: table;
and the #footer:
display: table-row;
Add the following CSS in the same div. (which is resizable).
overflow:auto;