I create a documentation with asciidoctor and Maven.
I need to put a large table (more than page width), but I don't know how to put an equivalent to css overflow-x:auto for this table.
my.adoc:
Tables :
|===
10+|*usertable*
| id | hostname | ip | profile | username 5+|
10+|*tapplications*
| id | category | feature | app_license_type | app_long_desc | app_name | app_nam_exec | app_short_desc | id_feature | logo
10+|*licenseusertable*
| id | date_since_granted | display | feature_version | handler | server_host | server_port | id_feature | id_user |
|===
Thanks in advance
You would need to add some custom CSS to accomplish that.
You could supply your own stylesheet file, totally overriding the Asciidoctor styles, by adding -a stylesheet="mystyles.css" to your asciidoctor invocation.
Since you likely just want to add a style to the existing styles, you need to use a docinfo file. See: https://asciidoctor.org/docs/user-manual/#docinfo-file
Create a file called docinfo.html containing your styles. For example:
<style>
.scrollable {
overflow-x: auto;
}
</style>
Note the <style> tag: the docinfo.html file is an HTML file (which gets embedded into the <head> of the generated page), so you can also embed custom Javascript, meta tags, etc.
Then, in the document containing the table, add the following attribute definition immediately after the document's title:
:docinfo: shared
Also, since HTML tables don't support horizontal scrolling, you need to wrap your table in an open block (which translates to some <div> wrappers):
[.scrollable]
--
Tables :
|===
10+|*usertable*
| id | hostname | ip | profile | username 5+|
10+|*tapplications*
| id | category | feature | app_license_type | app_long_desc | app_name | app_nam_exec | app_short_desc | id_feature | logo
10+|*licenseusertable*
| id | date_since_granted | display | feature_version | handler | server_host | server_port | id_feature | id_user |
|===
--
Related
I would like my site to take on a different design when the browser is 500-700px as opposed to a full size browser.
This same layout occurs when i load the mobile page. For some reason this one works just fine with media queries .
the full size desktop version looks something like this
___________ _____________________
| | | |
| | | |
| | | |
| sidebar | | content |
| | | |
| | | |
| | | |
|_________| |___________________|
i would like that when the browser is 500-700px it should look like this
_____________________
| |
| |
| |
| content |
| |
| |
| |
|___________________|
_____________________
| |
| sidebar |
|___________________|
I am using this as my media query to change to this layout,
#media only screen
and (min-device-width: 500px)
and (max-device-width: 700px)
and the full screen desktop site is using this
#media screen
and (min-device-width: 750px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1)
However when i resize my browser screen as of now my site is just responsive to the full screen design...
If you could please help me i'd appreciate it ! thanks!
I tried using several different media queries ( #media screen, #media screen only) and for some reason the media queries only work for mobile and full screen desktop
There is the grid layout in vs-code, and there is the terminal panel. Is there a way to combine both?
Lets say I want this :
--------------------------------------------------------------
| | |
| | |
| | |
| | something |
| | here |
| editor here | |
| | |
| | |
| |---------------------------|
| | |
| | |
| | terminal |
| | here |
| | |
| | |
| | |
--------------------------------------------------------------
I know we can put the terminal on the right, but I do not know if we can put it in the bottom of the right column. It works with other panel though, like editor.
To my best understanding, you cannot put the whole terminal panel (thinking of the combined: problems, output, debug console, terminal, ... group) in the grid layout.
However, you can put individual terminal shells into the editor and they will behave like opened files, able to be moved between editor panes.
After you have opened the terminal panel, you can drag and drop the shell's name (located just left of the little + sign where you can create a new terminal. It will have a name like bash or any other shell you are using) into the editor.
To make it easier, there is a setting for terminal.integrated.defaultLocation where you can specify the value to be editor. You split the editor panel as you see fit and then press workbench.action.terminal.new (default keycode is Ctrl+`) and you terminal will appear in the selected grid section.
I'm working in a project with lots of files and switching between different tasks. And having a lot of files open at once clog the tabs in the panes (and my brain). So therefore I would like to be able to switch out all my panes/views much like switching workspace in Linux. And when I switch back it remembers the files/views/tabs.
In short: ability to toggle between this:
Layout 1 Layout 2
---------------------------- ----------------------------
| | | | | |
| file a | file a2 | | file b | file b2 |
| (+3 tabs) | | | | |
| | | | | |
| | | | | |
| |-------------| | | |
| | file a3 | | | |
| | | | | |
---------------------------- ----------------------------
Does Sublime 3 has this functionality or is there a package that can help with this?
Here is detail explenation for layout creating in sublime text : example
My suggestion is to create those two layouts and put key shortcut for both.
Install chain of command plugin. Create key shortcut for mulitple commands :
1. set layout 2
2. move focus to group 1
3. open "file b" by name [plugin]
4. move focus to group 2
5. open "file b2" by name [plugin]
Do same thing for layout 1 scenario. Here is example how to create plugin for opening file by name how-to-open-file-using-only-keyboard-in-sublime-text . You need to modify some part of that plugin because it use input dialog.
I have been using the Notion Window Manager (http://notion.sourceforge.net/) for a few weeks. I was wondering if it is possible to create a keybinding that splits a workspace in the same way that META+S and META+K S splits a frame horizontally and vertically.
So if I had two vertical frames in a workspace like this:
-----
|1|2|
| | |
| | |
| | |
-----
The keybinding to split horizontally should add a new frame that spans the workspace horizontally:
-----
|1|2|
| | |
-----
| 3 |
-----
Currently META+S only splits the selected frame horizontally:
-----
|1|2|
| | |
|-| |
|3| |
-----
Is there any way to accomplish splitting the entire workspace horizontally or vertically in Notion?
The solution I came up with is to add a keybinding to the split_top function in cfg_tiling.lua. To split horizontally I added:
kpress(META.."Z", "WTiling.split_top(_, 'bottom')")
to the WTiling defbindings function. I also added
kpress("Z", "Wtiling.split_top(_, 'left')")
to the submap META.."K" bindings.
The split_top function splits at the root of the split tree. This will create a new frame that splits the entire workspace rather than the current frame.
One sizing issue that I noticed with this approach is that it will try to split the workspace exactly in half. If there is a horizontal frame splitting a workspace split_top will resize it to the smallest size and add a new frame below it. If there is a vertical frame it will become about 10 pixels wide when the new frame is added.
Horizontal size issue. New frames are 0 height:
Start ->Mod1+Z ->Mod1+Z
-1--2-- -1--2-- -1--2--
| | | | | | | | |
| | | | | | | | |
-3----- -3----- -3-----
| | -4----- -4-----
| | | | -5-----
| | | | | |
| | | | | |
------- ------- -------
Vertical size issue. New frames are 0 width:
Start -> Mod1+K Z -> Mod1+K Z
-1----2---- -4--1-2---- -5-41-2----
| | | | || | | ||| |
| | | | || | | ||| |
| |3---| | ||3---| | |||3---|
| | | | || | | ||| |
| | | | || | | ||| |
----------- ----------- -----------
Another issue is the focus does not change to the newly create frame. Hitting Mod1+Z will create the frame but the user has to Mod1+TAB to the frame to manipulate it.
This is a start but a comprehensive solution would check for frames that already split the workspace and split them instead and change the focus to the new frame.
Yes, you can.
You either need to put your binding in the workspace context or from the frame/mplex context you need to look up the managing workspace and then call split on that.
(I'd post code and more concrete terms but I'm not in front of a notion machine at the moment and don't want to confuse things by using the wrong ones.)
I am trying to position an inner element inside the root element. The root element is set to be 100% high and 100% wide. However, I want the inner svg to be 10px or so from the edge of the outer svg--all except the right edge, which I would like to be 200px from the outer right edge. I want this to display in a web browser and so the user should be able to resize the browser and hence the outer svg while the inner svg should be able to maintain the correct distance from the outer svg on each side.
Like this:
+OUTER SVG------------------------------------------+
| |
| +INNER SVG----------------+ |
| | | |
| | | 200px |
| | | <---+-----+----> |
| | | |
| | | | 1
| | | | 0
| | | | 0
| | | | %
| | | |
| | | | h
| | | | i
| +-------------------------+ | g
| | h
| |
+---------------------------------------------------+
100% Wide
Is it possible to do this with SVG alone?
If I understand you correctly, this is trivial. SVG is built to have many visual elements in a Z stack, aligned, overlapped, whatever.
Use Inkscape, free and opensource, to create SVGs, and then you can edit the file directly in a text editor if you want to see how SVG is formed. In Inkscape you can use the alignment tools, the grid, the transform-scaling tool, drag and drop, and probably some other tools to accomplish this.