With Bootstrap 4 is it possible to go from
| | b | |
| a |---| c |
| | d | |
on xs to
| | a |
| |---|
| b | c |
| |---|
| | d |
on sm and up?
Been looking through the flex documentation and can't find a way to achieve both without hiding and revealing duplicate layout elements.
<div class="container pl-0 pr-0">
<div class="row no-gutters">
<div class="col-2 categories">
a
</div>
<div class="col-8">
<div class="mainPanel">
b
</div>
<div class="colors">
d
</div>
<div class="item"><< Select Item >></div>
</div>
<div class="col-2 patterns">
c
</div>
</div>
</div>
This builds the first example, but nesting b and d within another div means they can't be reordered as I want.
Related
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 |
|===
--
First I get an array of data by SELECTing from mysql database. The array looks like:
[
{client:A, day:mon, product_name:product1},
{client:A, day:mon, product_name:product2},
{client:A, day:tue, product_name:product3},
{client:B, day:mon, product_name:product4},
]
With the array I made a html table that looks like:
client | day | product_name
---------------------------
A | mon | product_1
---------------------------
A | mon | product_2
---------------------------
A | tue | product_3
---------------------------
B | mon | product_4
But instead, I would like to make a merged table like below. How would I do this? I know I have to use rowspan. But since this is a large array, I am looking for some simple algorithm or npm module that does this for me.(array)=>(html code)
client | day | product_name
---------------------------
| mon | product_1
--------------
A | | product_2
--------------------
| tue | product_3
---------------------------
B | mon | product_4
You can use the rowspan property of <td> to make a cell span multiple rows vertically.
Since you didn't provide any sample code, here's a quick generic example based on your placeholder data:
<table>
<tr>
<th>client</th>
<th>day</th>
<th>product_name</th>
</tr>
<tr>
<td rowspan="3">A</td>
<td rowspan="2">mon</td>
<td>product_1</td>
</tr>
<tr>
<td>product_2</td>
</tr>
<!-- And so on -->
</table>
Of course you'd want to apply the rowspan values dynamically based on how many rows you need, but how to do that would depend on how you're construcing the table HTML.
I'm trying to use bootstrap 4 and perhaps flexbox to achieve the following:
Small screen:
| | |
| 1 | 2 |
| | |
|______________________________|
| |
| |
| 3 |
| |
Large screen:
| | |
| 1 | |
| | |
|_________________| 2 |
| | |
| | |
| 3 | |
| | |
What I have so far: https://jsfiddle.net/aq9Laaew/180926/
I've tried to play around with order-* and align-self-stretch but they don't give the desired result. (I'm looking for something like rowspan)
Extra details that might be important:
The height of column 2 is 68px on small screens and 140px on larger screens (breakpoint for larger is 992px and up)
I've answered a similar questions here:
How to fix unexpected column order in bootstrap 4?
One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
You need to override the flexbox on the row to get the taller column to float right. This can be done using d-md-block on the row, and the float-* on the columns.
<div class="container">
<div class="row d-md-block">
<div class="col-9 border float-left">
1 of 3
</div>
<div class="col-3 border taller float-right">
2 of 3
</div>
<div class="col-12 col-md-9 border">
3 of 3
</div>
</div>
</div>
https://www.codeply.com/go/yYtp645znZ
I want to show the data from the database but can not repeat the same profile, just add a location to the existing profile. With the example above becomes clear:
+-------------------+---------------+---------------+
| PROFILE | LOCATION | STATUS |
+-------------------+---------------+---------------+
+-------------------+---------------+---------------+
| Admin | Chief | OK |
+-------------------+---------------+---------------+
| Director | Supervision | OK |
+-------------------+---------------+---------------+
| Secretary | Supervision | OK |
+-------------------+---------------+---------------+
| | Admin | OK |
| | Chief | OK |
| Chief-accessor | Director | OK |
| | Secretary | OK |
| | Supervision | OK |
+-------------------+---------------+---------------+
With this piece of code that is my datatable, I can only repeat them, but I can not group them:
<rich:panel header="User location info" style="margin: 20px 0 !important;">
<h:dataTable id="userLocationList"
value="#{userLocation.list()}" var="row"
styleClass="rich-table"
headerClass="rich-table-subheader rich-table-subheadercell rich-table-thead"
rowClasses="rich-table-row"
columnClasses="rich-table-cell,rich-table-cell,rich-table-cell">
<h:column>
<f:facet name="header">
<h:outputText value="Profile" />
</f:facet>
<center>
<h:outputText value="#{row.profile}" />
</center>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Location" />
</f:facet>
<h:outputText value="#{row.location}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Status" />
</f:facet>
<center>
<h:outputText value="#{row.profile.status ? 'OK' : 'Inactive'}" />
</center>
</h:column>
</h:dataTable>
</rich:panel>
Like this:
+-------------------+---------------+---------------+
| PROFILE | LOCATION | STATUS |
+-------------------+---------------+---------------+
+-------------------+---------------+---------------+
| Admin | Chief | OK |
+-------------------+---------------+---------------+
| Director | Supervision | OK |
+-------------------+---------------+---------------+
| Secretary | Supervision | OK |
+-------------------+---------------+---------------+
| Chief-accessor | Admin | OK |
+-------------------+---------------+---------------+
| Chief-accessor | Chief | OK |
+-------------------+---------------+---------------+
| Chief-accessor | Director | OK |
+-------------------+---------------+---------------+
| Chief-accessor | Secretary | OK |
+-------------------+---------------+---------------+
| Chief-accessor | Supervision | OK |
+-------------------+---------------+---------------+
Method list() from UserLocation is just a select in table_user_location:
select userLoc from UserLocation userLoc where userLoc.user.id = :userId
I've tried to follow some answers here in StackOverflow that say to put a datatable inside another datatable, but as I could was to repeat all locations without group profiles, example:
+-------------------+---------------+---------------+
| PROFILE | LOCATION | STATUS |
+-------------------+---------------+---------------+
+-------------------+---------------+---------------+
| | Chief | |
| | Supervision | |
| | Supervision | |
| | Admin | |
| Admin | Chief | OK |
| | Director | |
| | Secretary | |
| | Supervision | |
+-------------------+---------------+---------------+
| | Chief | |
| | Supervision | |
| | Supervision | |
| | Admin | |
| Director | Chief | OK |
| | Director | |
| | Secretary | |
| | Supervision | |
+-------------------+---------------+---------------+
| | Chief | |
| | Supervision | |
| | Supervision | |
| | Admin | |
| Secretary | Chief | OK |
| | Director | |
| | Secretary | |
| | Supervision | |
+-------------------+---------------+---------------+
| | Chief | |
| | Supervision | |
| | Supervision | |
| | Admin | |
| Chief-accessor | Chief | OK |
| | Director | |
| | Secretary | |
| | Supervision | |
+-------------------+---------------+---------------+
| | Chief | |
| | Supervision | |
| | Supervision | |
| | Admin | |
| Chief-accessor | Chief | OK |
| | Director | |
| | Secretary | |
| | Supervision | |
+-------------------+---------------+---------------+
And so it goes...
My doubt is the generic query I'm doing, so the duplicate content in the table. Does anyone have an idea for this operation?
Questions related:
Nested datatable in JSF 2.0
JSF: Empty nested dataTable
JSF, datatable in datatable
As I was not able to do it the way they return all locations for the same profile and using only one query, I decided to do differently, I thought of using two queries, one for all without repetition profiles (select distinct ...) and one for each location according to the profile. Only realized (correct me if I'm wrong) the property h:datatable renders by columns rather than rows. So, in part, was the first profile column returned all without repeating profiles, however the locations were the same in each cell was shown all user locations without distinction if the cell that the location would appear was of a given profile. That's when I realized I was very focused in locations where the focus was to be on user profiles.
Ran the select distinct the profiles and created a method to return the locations that profiles at the time the table was created. Just as the reported questions, a datatable inside another datatable.
Finally got my code:
<rich:panel header="Informations" style="margin: 20px 0 !important;">
<h:dataTable id="userLocationList"
value="#{userLocation.list()}" var="row"
styleClass="rich-table"
headerClass="rich-table-subheader rich-table-subheadercell rich-table-thead"
rowClasses="rich-table-row"
columnClasses="rich-table-cell,rich-table-cell,rich-table-cell">
<h:column>
<f:facet name="header">
<h:outputText value="Profile" />
</f:facet>
<center>
<h:outputText value="#{row.name}" />
</center>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Localizations" />
</f:facet>
<h:dataTable id="uLoc" var="c"
value="#{home.getLocByProfile(row.idProfile)}">
<h:column>
<h:outputText value="#{c}" />
</h:column>
</h:dataTable>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Status" />
</f:facet>
<center>
<h:outputText value="#{row.active ? 'OK' : 'Inactive'}" />
</center>
</h:column>
</h:dataTable>
</rich:panel>
Is it possible to have the inside grid surrounded where the outer grid contents flows around the inside grid as what happens in an image float left/right.
---------------------------|
| |
| grid_8 |
| |
|------------| |
| | |
| grid_4 | |
| | |
|------------| |
| |
| |
|--------------------------|
Thank you
try this
http://jsfiddle.net/qCJEF/2/
CSS
.grid_8{
width:960px;
background-color:red;
border:#FFF 1px dashed;
padding:95px 0 110px;
vertical-align:middle;
}
.grid_4{
width:480px;
background-color:blue;
border:#FFF dashed 1px;
padding:100px 0;
margin:100px 0 0 0;
}