I wanna know if it's possible to edit chrome/chromium devtools layout.
The reason is with a x Width > actualWidth, the layout is the left one (this is what i want as full time layout) and over the x Width < actualWidth, the layout change with the right one and I got square monitor so I can put the width too much if I want to see my render and the code javascript side-by-side.
So does it have a way to edit the devtools layout? If there is a way, how I can change the devtools layout?
Layout sample
Note: I'm using the right layout (dock to right)
Thanks for the answer
In the tab area for the content you are editing. On each side there is an icon that looks like a triangle towards a sidebar. Click that and it will hide the sidebar it is beside to give you more space.
Beyond that, you can click the overflow menu in the primary panel menu (the three icons beside the close button) and then select "Dock to Bottom" from the top layout choices.
Finally, the latest method available is to go into the Settings. Then under "Appearance" find Panel layout and change that to horizontal. This will then force the panels in elements and sources at least to be at the bottom always.
Each of these methods should provide you more area to work.
Related
I have a rather complicated layout.
At the top and bottom are fixed header/footer.
The central display is broken up into two panels:
the left panel is hideable (may be visible, may not); if it is visible then it has a fixed width. It has a scroll within it if needed.
the right panel is always visible and has a variable width. It is scrolled by the window's scroll bar.
The right panel then consists of two parts that each fill the width of the panel - a set of tabs, of various heights (the visible tab should start at the top of the right panel, as the controlling buttons for those tabs are in the header), and directly below that a 'summary' box of unknown height, which comes immediately after the visible tab, no matter which tab we are looking at and how high it is.
Each of these panels/tabs/boxes consist of an outer div, and various internal divs as needed for the content.
The tabs are made by an outer div containing four inner divs, one after the other.
I can change the HTML and css as needed.
See https://jsfiddle.net/jvw8j62t/ (with thanks to JavaSpyder who provided the basic JSFiddle that I adapted for this demo)
I have tried various methods for the left and right panel, and the best one seems to be https://stackoverflow.com/a/4676510 but I would be happy to use a different method.
I then use jquery to hide/show the left panel (using display:none) and fix the right panel's left margin accordingly, though I am happy to use a different system for that.
However the tabs have to be made visible/invisible using visibility: visible and visibility: hidden (not display:none), because the contents of the tabs do not size correctly when using display:none. I cannot easily change this as there are three different libraries from three different sources having this issue.
This means that the different tabs' tops are then positioned incorrectly, because of the visibility css - they follow after each other, per https://stackoverflow.com/a/133064/1910690.
If I try different ways to make the top of the all the tabs fall at the top of the right panel then the summary box is positioned wrong and I can't align it to below the visible tab (changing position when you switch to a tab of a different height); or the right panel's scrolling is messed up; or the bottom of the tab disappears behind the footer; or one of several other problems.
Can anyone suggest a solution to the whole layout?
Is this the kind of thing you're looking for?
I used a flex container to create the left and right sections - the header and footer were easy enough with a fixed position. I used flex-shrink:0 on the left section so its width would be fixed, while leaving the right able to change to the screen width.
I'm not sure I did the tabs the way you specified, but feel free to correct if it isn't right. If you click on a tab, it will toggle visibility:hidden , but of course this leaves an empty gap. You said "the tabs have to be made visible/invisible using visibility: visible and visibility: hidden (not display:none), because the contents of the tabs do not size correctly when using display:none." Is this something we can also take a look at, or perhaps post in another question and link it here? If we could fix this problem, it could simplify this layout issue.
The left section is really another fixed position div with overflow:auto to give it the scrollbars. The height is handled by jquery.
Finally, clicking "Toggle Left Panel" will toggle the fixed position div and the width of the left section from 0 or 200.
With thanks to #JavaSpyder for his JSFiddle, and #Dhaval Chheda for the comment that inspired me...
I realised that I could use position:absolute on the tabs - NOT to position the visible tab correctly, but rather to REMOVE the invisible tabs from the layout of the page, leaving the visible tab and the summary ONLY in the layout of the page - and the result is as wanted.
See JavaSpyder's https://jsfiddle.net/JavaSpyder/fq43Lhez/ which also fixes an issue with the width of the right panel (my original solution is at https://jsfiddle.net/jvw8j62t/ ).
Again, thanks to JavaSpyder and Dhaval Chheda - could not have done it without you.
I have page based on fullPage.js and Bootsrap. By default is content in section vertically centered. But my content is dynamic and changes on click. It means, that my content has on every click different height and it cause div jumping on page.
Disabling vertical center solve the problem, but only for desktop. On smaller screen (mobiles, tablets) I can't see whole content in section.
With vertical center enabled the section is high as content.
Live example is more than word so:
Example with verticalCenter enabled (not working)
Example with verticalCenter disabled (not working)
Finally the solution was specify container height.
I would encourage you to use the responsiveWidth or responsiveHeight options provided in fullpage.js. That's going to create the best user experience for small screen devices.
But if you still want autoScrolling then you can always go for the scrollOverflow option as in this example and to adjust the scroll bar dynamically you would have to call $.fn.fullpage.reBuild() on any click that changes triggers a change in the section's height.
I'm using bootstrap-modal to render modal windows.
When the site is RTL, the vertical scrollbar is on the right side. When a modal opens, the scrollbar on the right side disappears and another scrollbar appears on the left side.
This can be reproduced on the demo site.
Just $("body").css("direction","rtl") on the console to get the scrollbar to the right side and than open any modal.
Why is second scrollbar on the left side? How can I make it stay on the right side?
I see just the opposite. When the site (body) is RTL, I never see the vert scrollbar on the right side. Always on the left. That's how it's "supposed" to be.
You can't change it -- at least not with a browser scrollbar. It's on the left because that's where the scrollbar "belongs" when the direction of the site is RTL (at least according to the browser...some RTL readers think it is weird).
You can use a javascript plugin or roll your own custom scrollbars, but if you put it on the left when the site is RTL, you're changing the default browser behavior, and you're going to give yourself a lot of difficulties to integrate with bootstrap.
EDIT
Per my first comment below, I was viewing the demo page incorrectly. Sorry. The scrollbar that appears when the modal opens is on a div that represents the modal backdrop. The browser applies this correctly according to the direction of the page being RTL. But it's not the window's scrollbar that is flipping when the page is RTL; it's a div.
You can potentially use CSS to remove the scrollbar of the modal backdrop (around line 16 of http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css).
This has other consequences, however, and probably similar to the ones you're trying to avoid with the swap in direction of the window's main scrollbar.
I believe everyone would have seen, facebook mobile app. Also in many flat UI patterns website.
I would like to make one such Left menu.
THis is what I did now.
Hide the menu initially (display:none)
On click of the menu button. Show the left menu (toogle), and increase the left margin on main content using javascript (style,maregin-left:100px;)
This is working fine, but I just want to know, is this the best practice, and will this responsive?
The design pattern is known as 'off canvas' layout.
Depending on the nature of the content you might not want to have it hidden on larger screen, depends on your requirements.
There is a good example of what I mean here: http://jasonweaver.name/lab/offcanvas/
Where the navigation is visible on full screen and hidden on smaller mobile viewports.
what you re doing is good but for best practice i will use the css3 transform with translate some thing like this
.menu{ -webkit-transform:translateX(-200px)
from there you can use the toggleClass("active") from jquery
.menu.active{-webkit-transfrom:translateX(0)}
hope this help!
Yes, this is a perfectly fine approach and it should behave responsively since it's only taking up 100px of width. If it was a full screen horizontal drop-down menu, then you would have to make sure its contents are responsive, but a 100px wide vertical menu will be fine on just about any resolution (especially if the user can choose to toggle it open or closed).
I'm trying to make the tabs in TabbedViewNavigatorApplication and ViewNavigator line up vertically instead of the original horizontal.
To be able to manipulate the tabBar I've followed this guide: http://devgirl.org/2011/06/14/flex-4-5-mobile-development-tabs-on-top/
I've managed to, via the guide, place the tabBar at the top of the screen.
So now the last thing left to do, how do I align the tabs vertical? I wan't one tab per row, as if they were buttons lying in a VGroup.
Should I use any kind of rotation to turn the tabBar 90 degrees or can I align the Tabs vertically? Should I manipulate the "TabbedViewNavigatorSkin" or in the TabbedViewNavigatorApplication.
How I want it to look: (picture has been Photoshopped for show)
http://imageshack.us/a/img96/2461/1234yl.jpg
Thanks
take the TabbedViewNavigatorSkin and modify it. if you are lucky, its just a matter of providing the layout orientation from horizontal to vertical