I'm using PrimeNG TabView, i have enabled vertical scrolling inside the tab content, the problem is that when I change tab, the content horizontal position is the same as the previous. I'm only using JS/TS, CSS, HTML, PrimeNG for the tabs and Ionic Framework.
I want the content of the new selected tab to be at the initial state, "unscrolled"
#FabianStrathaus It is more efficient to look directly at the code in this official documentation, it is what I used, plus however I added this CSS:
:host ::ng-deep .p-tabview-panels {
height: 38vh;
overflow-y: auto;
overflow-x: hidden;
padding: 0px;
}
looking at the documentation again I maybe figured out what the problem might be, I set horizontal scrolling to p-tabview-panels, maybe I should have set it to p-tabview-panel, the differences:
p-tabview-panels are the Container panels.
p-tabview-panel is the Content of a tab.
Related
So I'm using bootstrap as my responsive framework and I have a container, row I also have two div's that I'm going to be switching between using a button. So I setup my HTML and my second div I set the display to "none" to hide it. However when using Jquery fadeIn/fadeOut you can see there is some shifting/expanding in terms of the Height.
Now I think to get around this I have to set the position to Absolute and also change the z-index of the first and second div so one is hidden behind the other. Using absolute however breaks the bootstrap container... So is there a way to switch the Div without the shifting in height when the button is clicked. Added some source so you can see what happens when to buttons are clicked.
http://www.bootply.com/hBNIHfCpxR
Try this:
http://www.bootply.com/PIG2icyErI
Relevant CSS:
.row {
position: relative;
padding-top: 50px;
}
#content-one, #content-two {
position: absolute;
width: 100%;
top: 0;
}
I'm using angularjs to develop a web application. I have several nested div. Each of them correspond to an item that the user can select.
A good example of my div display is in the official angularJs documentation :
http://plnkr.co/edit/qncMfyJpuP2r0VUz0ax8?p=preview
In my code each div have a ng-click="gotoAnchor(x)" event so when I click on a div if it is partially hidden, it pull it up on the page and the user can see all the clicked div.
But I have a header in my page so the first div with an anchor and a click event is not directly at the top of the page. And if I click on the first div, it will scroll and the header won't be visible.
So my question is, is there a way to activate the anchor only if the div isn't fully displayed on the screen ?
If you have an other solution than anchors, I take it.
Thank you in advance.
If I understand your question correctly the issue is that when using $anchorScroll your header is either
a: Being covered up by the div scrolled into frame,
or
b Partially covering up the div that is scrolled into frame.
Either way there are two solutions you should review:
First
make sure you're employing CSS to properly layer your elements, your header (if fixed) should have a z-index that supersedes your divs.
.header { position: fixed; top:0; width: 100%; z-index: 99}
.content { position: relative; margin-top: 10px; z-index: 1;}
REMEMBER Z-index only works on positional elements (See ref)
Second
Employ $anchorScroll.yOffset to make sure your scroll distance is bumped down to compensate for the header height. As seen in the Angular docs, you can use this method in your application:
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 50; // always scroll by 50 extra pixels
}])
Update 50 to be the pixel height of your header.
Regarding visibility
There are a few great libraries and directives for checking the visibility of an element - try https://github.com/thenikso/angular-inview as you can specify whether you want to enable an action when only the top, bottom or none of the div is visible.
Note Posistioning the first div correctly on the page will prevent any scroll from being necessary as seen in this plunkr.
I'm trying to add a off canvas menu into my site and the one I picked was the mmenu(http://mmenu.frebsite.nl/index.php). Everything else other then my footer works. I have a sticky footer in the site and every time the menu is clicked open the footer flys out of position.
For a fixed footer, add the class mm-fixed-bottom:
id="footer" class="mm-fixed-bottom">Goodbye<
Example: http://jsfiddle.net/1eddy87/Lx5ps/1/
I have tried the documented way which says you should use "mm-fixed-bottom" for any fixed elements, however that didn't do the trick.
Documentation: http://mmenu.frebsite.nl/tutorial.php
scroll to the bottom of the page and then open the menu via the header and you will see the footer move out of position.
any ideas??
I realize that I am using absolute, and not fixed. Its a requirement for the sticky footer(http://mystrd.at/modern-clean-css-sticky-footer/). I tried to fix my way through hoping that the mm-fixed-bottom would work, however it didn't. I need a fix for using the absolute.
You've got position:absolute on the footer when it's supposed to be fixed. You're also overwriting the CSS from mm-fixed-bottom. I thought the whole reason for a sticky footer is for it to stay at the bottom of the screen and not move.
I removed all positioning and it worked.
http://jsfiddle.net/Lx5ps/3/
Solution found:
On further inspection, looks like the library changes <div class="mm-page"> to height:100% which screws with height:auto. I toggled it off in browser inspector and it works.
Changed this:
html.mm-opened .mm-page {
height: auto;
overflow: hidden;
position: absolute;
}
http://jsfiddle.net/Lx5ps/4/
Just been having the same problem but I came up with using css calc.
html.mm-opened .mm-page {
height: -webkit-calc(100% - 320px);
height: -moz-calc(100% - 320px);
height: calc(100% - 320px);}
320px being the height of the footer. Calc is pretty well supported. See calc browser support
I am currently using CodeMirror to edit CODE in text area in browser. If i have more than 20 lines of code, it is adding a vertical scroll bar to right. But i do not need this scroll bar. Instead i need the editor size to grow vertically.
Can anyone help ?
In CodeMirror 3, there is an option to disable the scrollbars : scrollbarStyle: "null"
From the documentation :
scrollbarStyle: string
Chooses a scrollbar implementation. The default is "native", showing native scrollbars. The core library also provides the "null" style, which completely hides the scrollbars. Addons can implement additional scrollbar models.
Combining this with :
automatic height: height: auto & viewportMargin: Infinity (Example: http://codemirror.net/demo/resize.html)
wrapping lines: lineWrapping: true
And then controlling the height/width of the parent div works well
The CodeMirror doco talks about a style CodeMirror-scroll which controls whether a scrollbar appears, and whether the textarea expands to fit the content. Specifically it says:
CodeMirror-scroll
Whether the editor scrolls (overflow: auto + fixed height). By default, it does. Setting the CodeMirror class to have height: auto and giving this class overflow-x: auto; overflow-y: hidden; will cause the editor to resize to fit its content.
Thus the idea is to add to your own CSS something like:
.CodeMirror {
border: 1px solid #eee;
height: auto;
}
.CodeMirror-scroll {
overflow-y: hidden;
overflow-x: auto;
}
as illustrated here in the official demo that accompanies the documentation on the style CodeMirror-scroll.
What worked for me:
For my personal situation using CodeMirror 2.34 all I did was add the following style to my own stylesheet:
div.CodeMirror-scroll { height: auto!important; overflow: visible; }
CodeMirror 3:
In my brief initial testing of CodeMirror 3, both the above techniques didn't work and I still got the scrollbars. Interesting, since you'd think the official doco on subject would be valid - unless CodeMirror 3 has changed its styles a bit and the doco hasn't caught up yet...
For me wrapping codemirror textarea on an element with display:flex, fixed the unwanted horizontal scroll issue:
<div style='display: flex'>
<textarea></textarea>
</div>
<script>
//codemirror setup
</script>
plz see the below link :
Long File Name Inside A Div
when you see those long file names with firebug you will find a span that tell us ->
.FileName {
float: left;
width: 438px;
}
we have predefined width for this span!
q#1 : so why we have overflow in that div and how can i fix that ?
q#2(important) : is it possible to make that file name scrollable without showing scroll bars ?
edit
(with jquery or javascript or css)
thanks in advance
You have an overflow because this text can't break (there are no spaces):
R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210
You could change the span's into div's and give them a height and an overflow:hidden.
Html:
<div class="FileName">R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210 asangsm.com.rar</div>
Css:
.FileName{
float: left;
width: 438px;
height: 20px;
overflow: hidden;
}
I don't think it's possible to make that file name scrollable without showing scrollbars.
If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
I've tried one of them (http://www.demo.creamama.fr/plugin-scrollbar/), setting the div containing the text to overflow: hidden; and the div containing the scrollbar to display: none; to mimic your situation, and that gives me a scrollable div with no scrollbar.
However, I think from a UI point of view it's not the best idea to have a scrollable section without a scrollbar. At least something should light up (as with the Mac OS Lion scrollbars) indicating you can, or are, scrolling. You could style one of the javascript solutions out there to make this happen, for instance with a tiny scrollbar or indicator.
Short of using CSS3's marquee, I can see no simple solution. You would have to use Javascript.
As per avoiding the line break, you can use white-space: nowrap;.