I recently started using Atom and try to make it as nice to work with as possible.
However I couldn't figure out how to change the height of the bottom window (a name for it would already help).
My goal is to have my console etc. as minimalistic as possible.
E.g.:
Atom's bottom window shown here with an output example from Atom-Runner
How do I only show the atom-runner's output and not the grey rest of the window on top of it?
How can I get rid of unnecessary labels like "Atom Runner: data.py"?
I found that you can change quite a bit within the styles.less file with commands like:
atom-workspace {
height: calc(...);
}
But that didn't really help me.
However I couldn't figure out how to change the height of the bottom window (a name for it would already help).
atom-runner displays its results in a bottom panel. There are a few different types of containers in the Atom window:
Panes are the content in the middle of the editor. Panes can hold as many items as you want, which are usually associated with a specific file (see TextEditors)
Docks are the expandable areas just outside the panes (the tree-view and github packages use docks). They can have multiple items and will create tabs for them.
Panels are the spaces on the edge of the Atom window. You can't hide them without disabling the whole package.
How do I only show the atom-runner's output and not the grey rest of the window on top of it?
The "grey rest of the window" is the bottom dock. You can hide it by clicking on the semicircle with the down arrow.
How can I get rid of unnecessary labels like "Atom Runner: data.py"?
I disagree that it's unnecessary, and you might some day find that you need to know what file you ran. However, if you want to do this, you can add the following to your styles.less:
.atom-runner h1 {
display: none;
}
Related
This Stackblitz example opens a simple dialog which contains a radio group in the mat-dialog-content div.
You can see that the dialog-content shows an ugly scrollbar:
This does not happen when other components are used: e.g. input, etc.
Using chrome dev-tools, I can see that the mat-radio-buttons have a height of 20px:
but the mat-radio-group only has a height of 17px:
Is this a bug in angular material components (the example uses version 12.0.4), or is there a simple workaround/css that we can use to get rid of the scrollbar?
I've tried explicitly setting the height on the mat-radio-group, but this has no effect.
Notes:
in production we do of course have many dialogs and some of them are large and need the scrollbars
we need an application wide solution/workaround
simply hiding the scrollbars is not okay: it must remain auto so that the dialog can react to size changes (e.g. user rotates device, some items are shown/hidden dynamically, etc.
For now we came up with a workaround that fixes the issue in all our 30+ dialogs.
The nice thing is that we can apply it in one place, in styles.scss:
.mat-dialog-content {
padding-bottom: 10px !important;
}
We just add a padding to the bottom of the dialog content area and then scrollbars: auto works as expected in all our dialogs (small and large). i.e. when you make the browser window larger/smaller, the scrollbar is automatically shown/hidden.
And it also works when there are multiple mat-radio-groups in one dialog.
The additional padding between the content and bottom dialog-actions is acceptable for our ui.
Stackblitz example with workaround
The reason this happens is due to the ripple effect on the radio button - which takes up additional space and causes the scrollbar to show. See https://github.com/angular/components/issues/20344
There are a number of ways to resolve this, such as using padding or margins on the components or on the dialog content itself like you did. The important thing is that there is enough space added to accommodate the ripple.
I am trying to load a widget (through HTML code) into my Jupyter Notebook's cell. I am trying out ways to get rid of the block shown on left side which shows "click to scroll output;double click to hide" in the below picture:
It's obtrusive. And also is there a way i can make the frame of the slide (highlighted in blue) larger (for only the current cell) so that it's clearer for view ?
I tried changing the "height" and "width" of RISE extension from "Nbextensions" tab but in vain.
This might sound ridiculous but, have you tried to remove this block using your browser's element inspector?
Example (remove code input)
Slide before deleting code input
Selecting correct div
Deleting input div
Slide after deleting code input
Of course it's just a temporarily solution and as soon as you refresh/reload your notebook it will be back as before.
By default, vue-js-modal scales from the central point, which is pretty strange. Is it possible to scale it like all other windows (according to one of the edges)?
EDIT
On the official page (http://vue-js-modal.yev.io/), when you 'click' resizable, you can see what I mean. In the docs there is a line, which describes 'resizable' attribute: "If true allows resizing the modal window, keeping it in the center of the screen". I didn't find other info and don't want to change the source code. I don't want it to be keeping in the center, because I think that this is not correct.
You need to use CSS styles to configure it manually before Overlay
.v--modal-overlay{
//add style like u r requirement
}
In style, you can also add these line to make it left align after it overlays
v--modal-box v--modal.{
left:0px !important
}
So we have custom QSS for tabs, and i want to recreate this look from standard tabs and for some reason im having trouble recreating it. I want the selected tab to look like its on top and go straight into the pane.
I have the borders of the tabs working when selected or not selected, but what i cant figure out is how you get the line at the top that spans the top of the pane but does not go under the tabs.
This is what i want it to look like with the line only going from the right most tab to the edge of the tabbar/pane.
This is what happens obviously when i try setting my QTabWidget::Pane border-top
When my tab is selected i dont want that blue line going across the bottom of the selected tab.
How do i keep the line from going all the way across my tab. Im sure this is a very simple task but for some reason i just cant figure out what property i need to be changing.
The answer was hidden in the QT documentation
By setting
position: absolute;
top: -2px;
On my QTabWidget::Pane, i can shift the pane top border upwards by 2 pixels, which is the width of my top border, so it goes behind my buttons and gives the proper effect.
I have based a settings dialog on the Qt config dialog example found here:
http://doc.qt.io/qt-5/qtwidgets-dialogs-configdialog-example.html
I would like the QListWidget to fill the left of the window (except for the button bar at the bottom) regardless of the vertical size of the window. In Delphi there was a simple property to set. I can't find a similar thing in Qt.
Is this possible? If so, how?
--- edit ---
The example I linked to has the same behaviour. My code is virtually a copy of that example.
Here is a screen shot showing the problem:
This can be fixed by removing mainLayout->addStretch(1); from configdialog.cpp. This line adds empty space that stretches instead of other content when extra space is available.