I need to press two buttons down in the screen. Is not there such a component (spacer) which would have 100% height and moved the buttons to the bottom?
Use tool bar for that purpose which put all the content into the bottom of the view
https://framework7.io/docs/toolbar.html
Related
I'm using this library https://github.com/bogoslavskiy/react-native-tabs-section-list
I want to put the components in the same screen above that tabs-section-list component when I pass property ListHeaderComponent={aboveMyListComps}
The component aboveMyListComps is being placed between the tabs and the section list.
I have already tried wrapping the whole screen inside a scroll view as a result either my tabs header scroll away from the screen, or when I try to use stickyHeaderIndices property of the tabs-section-list doesn't scroll.
example of the issue
In this example I want my text 'TEST' to be above the header tabs list
I'm trying to implement GetOrgChart with asp.net mvc in a complex scheme but stuck with some issues...
I need to remove top search bar. Tried to do this adding "display-none" to generated div's css class. But this resulted in main svg not filling screen, 'cause it's padding gets set to some value from inline styling.
Is there any way to access add/edit/delete/view buttons' click handlers? I want to display a custom page for each operation. And can we disable individual buttons (i.e. add or edit) selectively?
In order to remove the top bar you have to change the theme, lets assume that you are using "ula" theme, remove the top bar set getOrgChart.themes.ula.toolbarHeight = 0;
Regarding your second question use the following example as starting point:
http://www.getorgchart.com/Demos/Custom-Edit-Form
I have removed the toolbar by overriding it's css
.get-org-chart .get-oc-tb {
display: none;
}
My goal is to have two sidebars on the left that are fixed and collapsible, and having the main content on the right to "follow" the sidebars when they collapse/expand.
Illustration of the possible positions for sidebars and content:
But let's proceed step by step.
I want a fixed sidebar on the left that is collapsible, and the main content (on the right of the sidebar) to be expanded when the sidebar is collapsed.
The thing here is that the sidebar has a fixed position, so the content on its right has to be pushed right (with a left margin) to avoid overlap.
I know the width of the sidebar so it's not a problem to play with CSS/JavaScript, and I have a working example here: https://jsfiddle.net/Pawamoy/yamm7eLh/2/
Basically, when you click on the sidebar (bottom part), active class is toggled on the sidebar and expand class is toggled on the content. These classes will change the width of the sidebar and the left margin of the content.
$(document).ready(function() {
$('#sidebar').on('click', function(e) {
if ($(e.target).is("#sidebar")) {
$('#sidebar').toggleClass('active');
$('#content').toggleClass('expand');
}
});
});
I want to add a second fixed and collapsible sidebar, at the right of the first one.
But playing with toggled CSS classes will not be enough since I need to calculate which sidebar is active or not, to be able to set the left margin of the content. The left margin would be 160px when both sidebars are collapsed, 320px when only one is collapsed, and 500px when none are collapsed. Not only that but the second sidebar itself needs to be pushed back and forth on the right depending on the first sidebar width.
Solution as I imagine it: the content could just "follow" the element on its left (the second sidebar), without changing its left margin value. Is there a way to do that, knowing that both sidebars are fixed (they stay at the same position on the screen when the user scroll the main contents)? In other words, how can I position the second sidebar relative to the first one, and the content relative to the second sidebar, and at the same time have both sidebars "fixed"?
I solved this by thinking with boxes. Instead of trying to accomplish complex resizing between three side-to-side elements, I used one more layer of div. See the idea on the image below: on the left is what I was trying to do. On the right is how I solved it. I even managed to add a fixed navigation bar. I just took what I already had and used it a second time in a sub-div.
The key here is to NOT specify the left CSS positioning value for your fixed elements. Here is the updated fiddle: https://jsfiddle.net/Pawamoy/yamm7eLh/3/
First, Merry Christmas to all
I want to fix my top navigation menu bar on top when scrolling down like : csschopper.com
this happen by position: fixed; css property but when i put it in css menu will be fixed at top. this will require some javascript code but I don't know what exactly the code is. also when someone scroll down i also want to display small logo beside the menu like csschopper.com
Thanks in advance.
This is what the code would look like: jsFiddle In this example I created two navigation bars but you can also have one and then add an item
This is jQuery code, so make sure to load the jQuery libery:
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
Initial position of topbar is static. But when user scroll (you have to catch onscroll event) like this on jquery :
$(window).scroll(function());
with a scroll position bigger than header height, the Javascript modifiy the topbar position to fixed with this for example :
documentById().style.display
The same thing for the logo on left.
I am having a page that at some point shows a hidden div and adds a form for inputing some data. You can call it a modal div perhaps.
What I want to do is to grey out everything else and only allow interaction with the mentioned div. I want the background to be grey and transparent.
What is the best strategy for this? Adding a image and stretching it in some way and making it transparent? Is it possible to make that image catch all events that ends up outside my form-div? How to do this?
Any other, better way?
I am using jquery so best way is if I can se any jquery api for this.
This is actually not that complicated. It can be done in a line or two:
/* initialize it */
$(document.body).append("<div id='shadow' style='position:fixed;left:0px;top:0px;width:100%; height:100%; background:black;'></div>").find("#shadow").hide();
/* show it */
$("#shadow").fadeTo(200,0.5);
/* hide it */
$("#shadow").fadeTo(200,0);
then just make sure to set the form to a z-index higher than the shadow.
You can do this by using a Modal jQuery Dialog. It will grey out the background and disable editing on the page except for the dialog.
Make a div overlap the whole page. That div is 50% transparent and grey. Then your modal div comes on top of that.
More info: Snippets: Howto Grey-Out The Screen