I need to display div's equal in height and width with AngularsJS that needs to make a 7x5 square:
----------------------
| | | | | | | |
----------------------
| | | | | | | |
----------------------
| | | | | | | |
----------------------
| | | | | | | |
----------------------
| | | | | | | |
----------------------
I could easily use flex and md-wrap to have this automatically breakline, but it's not possible with 7 div's in a row. Because:
container = 100%
container/7 = 14.28
but values can only be 10 or 15!
I need to use Angular, so I need this structure:
<div ng-repeat="item in Ctrl.items">
{{item}}
</div>
You can use the CSS:
div:nth-of-type(8n) {
...
}
to give every 8th div a specific display behaviour
(eg. using either clear or flex).
Example:
div {
float: left;
}
div:nth-of-type(8n)::before {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: left;
}
You can use the nth-child and after pseudo selcetors, as demonstrated in this jsfiddle:
div {
display:inline;
}
div:nth-child(7n) {
color:red
}
div:nth-child(7n):after {
content:' ';
display:block;
}
Related
I am using mpdf to convert html page. I have added code like below.
$html=$this->load->view('client_admin/test_poepdf',$data, true);
$pdfFilePath ="Test_".$task_id.'_'.$startdate.'.pdf';
$pdf = $this->m_pdf->load();
$stylesheet ='';
$stylesheet .= file_get_contents(base_url().'assets/css/bootstrap.min.css'); // external css
$stylesheet .= file_get_contents(base_url().'assets/css/icons.css'); // external css
$pdf->WriteHTML($stylesheet,1);
$pdf->WriteHTML($html,2);
$pdf->Output($pdfFilePath, "D");
$pdf->Output($destination2, "F");
I added one image in mpdf page and added width for it like below:
<td style="width:100%;"><img src="<?php echo base_url();?>assets/poeimages/<?php echo $filename;?>" class="side_logos" id="poeid" style="width:1300px;height:auto;"></td>
</tr>
but image width is not applying if i open in browser it is applying. Please help me.
When mPDF generates your PDF it puts nearly all your content inside the "print area". The print area is calculated as: page box minus margins.
______________________________
| | |<- sheet
| |<--+-- crop marks
| ______________________|___|
| | A | |
| | ______________ |<--+-- page box
| | | HEADER | | |
| | D | | B | |
| | | | | |
| | | |<--+---+-- page box minus margins = printed area
| | | | | |
| | | | | |
| | | | | |
| | |___FOOTER_____| | | A: margin-top
| | C | | B: margin-right
| |______________________| | C: margin-bottom
| | D: margin-left
|_____________________________|
Ref: http://mpdf.github.io/paging/using-page.html
From your example, I see you've got your image inside a <table> tag. If the table width (not the <td>) isn't set to 100% then that would further restrict the total width of your image.
You've a couple of options here. You can set the page margins to zero and your table to 100%:
<style>
#page {
margin: 0;
}
table {
width: 100%;
}
</style>
Doing this will mean you need to add left and right margins / padding back into the elements you don't want to have a 100% width though.
Or you can extract your image from the table and place it in a top-level <div> tag which you absolute position on the page:
<div style="position: absolute; left: 0; width: 100%; >
<img src="" />
</div>
Absolute positioning will mean you don't have to mess with the page margins, but you take the image out of the document flow which could cause display problems if you aren't careful.
I am trying to center a table in markdown so i was thinking of putting it inside a div and then text-align the content to center.
<div class="myWrapper" markdown="1">
| Col1 | Col2 | Col3 |
| ------ | ------ | ------ |
| r0 | r0 | r0 |
| r1 | r1 | r1 |
| r2 | r2 | r2 |
| r3 | r3 | r3 |
| r4 | r4 | r4 |
</div>
But doing this will transform it into pure HTML
My question is: How can i use that markdown table inside a div ? And get properly rendered
This answer is aside of the question. I was solving the problem of defining different table styles inside one Markdown document. I'm using Python-Markdown.
The default table stile:
Item No | Name | Description | Price
--------|------|-------------|------
1 | Chair | Kitchen chair | 101.50
2 | Table | Kitchen table | 450.00
The "plated" table style:
<div class="tablePlated"></div>
|Item No | Name | Description | Price|
|--------|------|-------------|------|
|1 | Chair | Kitchen chair | 101.50|
|2 | Table | Kitchen table | 450.00|
And the "gridded" table style:
<div class="tableGridded"></div>
Item No | Name | Description | Price
--------|------|-------------|------
1 | Chair | Kitchen chair | 101.50
2 | Table | Kitchen table | 450.00
Here are the CSS rules:
table {
font-size: 16px;
}
td, th {
padding: 7px 14px;
}
div.tablePlated+table {
border-spacing: 1px;
border-collapse: separate;
}
div.tablePlated+table td, div.tablePlated+table th {
background-color: lightblue;
}
div.tableGridded+table {
border-spacing: 0;
border-collapse: collapse;
}
div.tableGridded+table td, div.tableGridded+table th {
border: solid 1px dodgerblue;
}
And here is the result:
Look at this
Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style emphasis inside an HTML block.
but
Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.
Let's as is that I have a bootstrap modal, in the body of the modal. I have two <div> the <div> from the left contains an image while the <div> from the right contains the caption of the image.
Target Output!
Let's assume that this is a bootstrap modal body:
-------------- ----------------
| | | |
| | |Name: |
| <image> | |Description: |
| | |Price: |
| | | |
-------------- ----------------
Nevermind of the space in between the two divs, let's just assume that it is just a small space. So the question is how can I put two <div> in a same alignment where the first <div> is on the left and the other one is on the right?
As of now, this is what I have done.
---------------
| |
| |
| <image> |
| |
| |
---------------
---------------
| |
| |
|Name: |
|Description: |
|Price: |
| |
---------------
The other <div> goes down instead to the right.
Here is my code for the above wrong output.
CSS
#divforimg{
position: left;
}
#divforinfo {
position: right;
}
HTML
<div class="modal-body">
<div id = 'divforimg'>
<img style="height:50%; width:50%;" id = 'appimage'>
</div>
<div id = "divforinfo">
<i><p id = "appdesc"></p></i>
<strong>Price: </strong><label id = "appprice"></label><br>
<strong>Brand: </strong><label id = "appbrand"></label><br>
<strong>Color: </strong><label id = "appcolor"></label><br>
<strong>Model: </strong><label id = "appmodel"></label><br>
<strong>Available Quantity: </strong><label id = "appqty"></label><br>
<strong>Date Posted: </strong><label id = "appposted"></label><br>
</div>
</div>
Nevermind of the image source above, and other fields included. Thank you!
Should be a simple matter of giving them both a width and floating them:
CSS
#divforimg{
width:200px;
float:left;
}
#divforinfo {
width:200px;
float:left;
}
To get it more like your example, change the second to float:right; and it'll stick to the right side of its container.
I have a page in which I have a structure of divs in an inline block. Now each of the block divs have a minimum size and when the window size reduces to a size smaller than the sum of all the inner divs minimum width, I move some of the elements to the next line. I would now like a padding to be added to the div which moves to the next line alone and I am not looking to use js to achieve this. How can I do this in just CSS?
<div width="100%">
<div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
<div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
<div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
</div>
Rendering
------------------- ------------------- -------------------
| | | || |
| | | || |
| div1 | | div 2 || div 3 |
| | | || |
------------------- ------------------- -------------------
constrained space
------------------- -------------------
| | | |
| | | |
| div1 | | div 2 |
| | | |
------------------- -------------------
<^margin 5px inserted^>
-------------------
| |
| |
| div 3 |
| |
-------------------
You can use media queries to apply CSS rules based on the width of the viewport.
#media all and (max-width: _width_value_) {
/* When the screen size is less than or equal to _width_value_ the css rules here will apply */
}
Here's a jsfiddle offering a solution to your original question.
margin-bottom will do the trick, however, it'll be there even when all of the divs are on one line. There's no other way without the JavaScript imho:
.innderDiv {
display:inline-block;
width: 33%;
max-width: 300px;
min-width: 135px;
border: 1px dashed;
margin-bottom: 5px;
}
http://jsfiddle.net/ruslans/KNDFE/
Unfortunately I have to support IE7 (and preferably IE6)
In IE8, Safari, Firefox, Chrome, I get a perfectly good layout ujsing an outer div to enlose two boxes.
------------------------------------
| |
| -------------- ----------- |
| | | | | |
| | A | | B | |
| | | | | |
| -------------- ----------- |
| |
------------------------------------
I'm using inline-block to style A and B. A is floated left, B right. Both boxes have internal divs and other elements.
However, when I use IE6 and IE7 I get this monstrosity.
------------------------------------
| |
| -------------- |
| | | |
| | A | |
| | | |
| -------------- |
| ----------- |
| | | |
| | B | |
| | | |
| ----------- |
| |
------------------------------------
Any definitive answers to what is going on and how to solve it?
Firstly, put a DOCTYPE at the top of your document. This forces IE into standards compliant rather than quirks mode (both euphemisms). For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Secondly, if you want IE6 compatibility use floats (Andrew is quite correct in stating that display: inline-block only works in IE7 on elements with natural display: inline and <div> has natural display: block). This should work:
<div id="outer">
<div id="left"></div>
<div id="right"><>/div>
</div>
with:
#outer { overflow: hidden; }
#left { float: left; }
#right { float: right; }
as long as the widths of left and right are less than the width of outer including padding, borders and margins. If not, right will drop down to the next line.
In IE 6 and 7 inline-block works only on elements that have a natural display: inline. Are your boxes <div>s? If yes, it should work.. Do you have a test case? (See quirksmode.org for more info!)
IE block level element inline-block hack: this may be useful for you