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
Related
I am working on a excel like this
I would like to create a condition from second table using matches between two tables columns values (Tool and tools) to automatically replace the column Unit prince
I want this result
<table>
| Tool | United Price |
| : ---|:------------:|
| Axe | 5,9 |
| : ---|:------------:|
| Axe | 5,9 |
| : ---|:------------:|
| Hoe | 9,1 |
| : ---|:------------:|
| Drill| 7,8 |
| : ---|:------------:|
| Hoe | 9,1 |
| : ---|:------------:|
| Hoe | 9,1 |
| : ---|:------------:|
| Drill| 7,8 |
</table>
I tried to use VLOOKUP(A2; E2:F4; 2; FALSE), but it's don't work
I think you want to use a Lookup function in the United Price cells. I’d suggest making both of them tables. From the image it just looks like loose cells but with tables you can use structured references to make the formulas cleaner and easier to maintain.
Try:
=VLOOKUP(A2; $E$2:$F$4; 2; FALSE)
This will fix the position of the lookup array.
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.
I don't even really know how to search for this, so I apologize if this has been asked already. I couldn't find anything.
I have data for a bunch of tests which is structured like so:
+---------+---------+-----------+-----------+
| TESTNUM | TEST_HR | CHEM1_HRX | CHEM2_HRX |
+---------+---------+-----------+-----------+
| 1 | 1 | 5 | 3 |
| 1 | 2 | 6 | 7 |
| 1 | 3 | 10 | 15 |
| 1 | 4 | 15 | 25 |
| 2 | 1 | 4 | 3 |
| 2 | 2 | 5 | 9 |
| 2 | 3 | 9 | 18 |
| 2 | 4 | 12 | 30 |
+---------+---------+-----------+-----------+
This chart is being pumped in by a database query, so I want it to be expandable and dynamic. It's basically two tests worth of chemical analysis, where a sample is taken every hour and tested. I cannot seem to wrap my head around a method of using a pivot table to display a scatter plot of TEST_HR and CHEM_1_HRX, and similar for CHEM_2_HRX. I had a method going using just tables, and it worked well, but required rework every time I updated the query to include more tests.
It seems that Pivot Tables don't support Graphing to XY (Scatter), bubble, or Stock chart types. But if you use line graph, and format the graph to remove the lines, it will look some what like a XY scatter graph.
Can you provide an example of what the chart should look like with the sample data you provided? (I would comment, but don't have enough rep points yet).
The Issue
I want to transpose data given in rows to columns.
The Problem
The Excel Paste Special -> Transpose on the full dataset goes by rows instead of by column.
Example
Data
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|----|
| 6 | 7 | 8 | 9 | 10 |
Desired Result
| 1 |
| 6 |
| 2 |
| 7 |
| 3 |
| 8 |
| 4 |
| 9 |
| 5 |
| 10 |
I'd like to automate this process, however, I'm not too familiar with VBA. Thanks for any and all help.
Here's one way.
Enter the formula shown in A4 and fill down:
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.