Border around content in container created with ng-repeat - html

So I have a div with content inside that is pulled using the ng-repeat and am trying to put a border and all around it. The content could stretch 1, 4, or even 10 items as shown in image below. Is this even possible with using ng-repeat and if so, how? My code that generates this is:
<div class="claimedTable" style="background-color: yellow;">
<div ng-repeat="item in claimsSubmit" style="background-color: yellow; border-style: solid; border-width: 1px; box-shadow: 0 0 8px rgba(0,0,0,.5); border-radius: 2px;">
<div class="col-md-12" style="padding: 0;">
<span>service date:</span>
<span style="float: right; padding-right: 15px;">{{ item.fromDate }}</span>
</div>
<div class="col-md-12" style="padding: 0;">
<span>provider:</span>
<span style="margin-left: 60%;">{{ item.provider }}</span>
</div>
<div class="col-md-12" style="padding: 0;">
<span>amount:</span>
<span style="margin-left: 60%;">{{ item.amount }}</span>
</div>
</div>
</div>
What this currently produces is (notice the thick line at top, that is my border and such):
Actually, if I revise now and my code looks like (previously the background color was just checking what was being rendered in the view):
<div class="claimedTable" style="min-height: 400px; box-shadow: 0 0 8px rgba(0,0,0,.5); border-radius: 2px;">
<div ng-repeat="item in claimsSubmit">
<div class="col-md-12" style="padding: 0; padding-top: 25px;">
<span>service date:</span>
<span style="float: right; padding-right: 15px;">{{ item.fromDate }}</span>
</div>
<div class="col-md-12" style="padding: 0;">
<span>provider:</span>
<span style="margin-left: 60%;">{{ item.provider }}</span>
</div>
<div class="col-md-12" style="padding: 0;">
<span>amount:</span>
<span style="margin-left: 60%;">{{ item.amount }}</span>
</div>
</div>
</div>
Then I get this image to start because I specified a min-height:
But as I enter data and it exceeds, I get this over run as shown:
It seems that since I only specified a "minimum", that the border would grow. Why is this not true?

Related

I cannot configure PDF using Page Print

I'm creating a report using html and CSS.
I'm not able to make the PDF view equal to the html in an expressed way.
My page looked like this:
![enter image description here][1]
In PDF it didn't look like HTML:
I tried:
<style>
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {
width: 12cm;
height: 100%;
}
page[size="A4"][layout="landscape"] {
width: 29.7cm;
/*height: 21cm;*/
}
</style>
HTML:
<page size="A4">
<div class="container body-content">
<table class="table table-bordered table-condensed" style="margin-top: -22px">
<tbody>
<tr style="">
<td style="border: 1px solid #ffffff !important; padding-top: 13px;">
<div class="row">
<div class="col col-xs-6" style="margin-top: 14px;margin-bottom:1%; padding-right: 0px;">
<div class="col-md-12">
<img class="pull-right border-solid-1 img-prod" src="#itens.xFileImagePrincipal" alt="">
</div>
</div>
<div class="col col-xs-5 col-md-2" style="padding-left: 0px; ">
<div class="col-md-12 border-solid-1" style="padding-left: 20px; min-height: 200px !important; margin-top: 14px !important;">
#*TODO: Modelo*#
<div class="row p-t-10">
<h6><strong>Cód.:</strong> <strong style="font-size: 17px !important;">#itens.xCodAlternativo</strong></h6>
</div>
<div class="row margem p-r-10">
<h6><strong>Descrição: #itens.xDetalhes</strong></h6>
</div>
<div class="row produto p-t-5">
{
<div class="row" style="padding-top: 10px;">
<strong class="color-red">Preço: R$ #itens.vlrTabela1Formatado / #itens.xUnidadeMedida</strong>
</div>
}
#if (!string.IsNullOrEmpty(itens.xTabela2))
{
<div class="row" style="padding-top: 10px;">
<strong class="color-red">Preço: R$ #itens.vlrTabela2Formatado / #itens.xUnidadeMedida</strong>
</div>
}
#if (!string.IsNullOrEmpty(itens.xTabela3))
{
<div class="row" style="padding-top: 10px;">
<strong class="color-red">Preço: R$ #itens.vlrTabela3Formatado / #itens.xUnidadeMedida</strong>
</div>
}
#if (!string.IsNullOrEmpty(itens.xTabela4))
{
<div class="row" style="padding-top: 10px;">
<strong class="color-red">Preço: R$ #itens.vlrTabela4Formatado / #itens.xUnidadeMedida</strong>
</div>
}
#if (!string.IsNullOrEmpty(itens.xTabela5))
{
<div class="row" style="padding-top: 10px;">
<strong class="color-red">Preço: R$ #itens.vlrTabela5Formatado / #itens.xUnidadeMedida</strong>
</div>
}
#if (!string.IsNullOrEmpty(itens.xTabela6))
{
<div class="row" style="padding-top: 10px;">
<strong class="color-red">Preço: R$ #itens.vlrTabela6Formatado / #itens.xUnidadeMedida</strong>
</div>
}
#if (!string.IsNullOrEmpty(itens.xTabela7))
{
<div class="row" style="padding-top: 10px;">
<strong class="color-red">Preço: R$ #itens.vlrTabela7Formatado / #itens.xUnidadeMedida</strong>
</div>
}
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I've tried everything and researched a lot about it, but I didn't get any results. Final result:
An A4 page is 21cm (210mm) wide, which is hard-coded to be that wide in portrait.
The page should not be assigned as size A4 when you don't need it:
page {
width: 12cm;
// ...
}
So, removing [size="A4"].
Reference: CSS page size at MDN

Make div not affect other div's size

I'm creating a messenging website that look like Facebook Messenger as follow. The problem is that when user send a message that is shorter than 13 characters then the message box wrapped around will become longer than the message due to the sender's name above it.
Image of the problem
Here is the code:
<img src="/images/phatdeptrai.jpg" style="width: 28px;border-radius: 50%;float: left;clear: both;margin-left: 7px;margin-right: 7px;position: relative;top: 38px;">
<div style="float: left;max-width: 45%;">
<div style="font-size: .6875rem;color: #65676b;margin-left: 13px;margin-top: 10px;">Hoàng Phát đẹp trai</div>
<div style="background-color: #e4e6eb;border-radius: 20px;padding: 7px 10px 7px 10px;margin-top: 2px;">
<div style="color: black;">'.$row['body'].'</div>
</div>
</div>
Change the inner div into a span that is display: inline-block;. And move the styles of the outer div to the span. You can leave the margin.
<img src="/images/phatdeptrai.jpg" style="width: 28px;border-radius: 50%;float: left;clear: both;margin-left: 7px;margin-right: 7px;position: relative;top: 38px;">
<div style="float: left;max-width: 45%;">
<div style="font-size: .6875rem;color: #65676b;margin-left: 13px;margin-top: 10px;">Hoàng Phát đẹp trai</div>
<div style="margin-top: 2px;">
<span style="display: inline-block; padding: 7px 10px 7px 10px; color: black; background-color: #e4e6eb;border-radius: 20px;"> sas</span>
</div>

Text-Truncate class is not working at various browser size If browser size is small

I am writing a chat room message template. I used a text-truncate class for long message ellipse. But It is not working in my code.
<div style="display: flex; background-color: beige; font-size: 14px; width: 10%;">
<!-- favorite-->
<div>
<img src="./images/ic-mentor.png" style="border-radius: 15px; border: 1px solid #dddddd; width: 75px; height: 75px;"/>
</div>
<div style="flex-grow: 1;">
<div class="clearfix">
<img src="./images/ic-mentor.png"/>
<span>
TEST_USER
</span>
<span>
<!-- | -->
<!-- Characters -->
</span>
<span style="float:right">
PM 01:16
</span>
</div>
<div class="text-truncate">
adssasdaasdsadsaasdadsadssdasdadsaadsadssadasasddassad
</div>
</div>
</div>
Above code is my sample code. I want to write a working at small browser size with truncate class. But my code is not working text truncate.
I don't want to set width. I want to make flexible template, If I set width, then it does not use in small size browser
I don't want to overflow contents.
You need to set the width of the div that's containing the overflowing content. Else truncate class will not produce ellipses.
Try this code:
<div style="display: flex; background-color: beige; font-size: 14px; width: 10%;">
<!-- favorite-->
<div>
<img src="./images/ic-mentor.png" style="border-radius: 15px; border: 1px solid #dddddd; width: 75px; height: 75px;"/>
</div>
<div style="flex-grow: 1;">
<div class="clearfix">
<img src="./images/ic-mentor.png"/>
<span>
TEST_USER
</span>
<span>
<!-- | -->
<!-- Characters -->
</span>
<span style="float:right">
PM 01:16
</span>
</div>
<div class="text-truncate" style="width: 300px;">
adssasdaasdsadsaasdadsadssdasdadsaadsadssadasasddassad
</div>
</div>
</div>
Note: I've added inline-styles for now.
I'm solved this problem myself as follows:
<div style="display: flex; background-color: beige; font-size: 14px; width: 10%;">
<!-- favorite-->
<div>
<img src="./images/ic-mentor.png" style="border-radius: 15px; border: 1px solid #dddddd; width: 75px; height: 75px;"/>
</div>
<div class="text-truncate" style="flex-grow: 1;">
<div class="clearfix">
<img src="./images/ic-mentor.png"/>
<span>
TEST_USER
</span>
<span>
<!-- | -->
<!-- Characters -->
</span>
<span style="float:right">
PM 01:16
</span>
</div>
adssasdaasdsadsaasdadsadssdasdadsaadsadssadasasddassad
</div>
</div>
I just remove the text-truncate div tag and then put parent div tag.

Making a DIV element deep in structure scrollable

I've been trying to figure this one out, but haven't been successful yet. I understand the 'overflow' attribute, but I can't quite get it to work in my case. Below is a simplified version of my widget structure:
The black DIV element is a specifically-sized placeholder for my widget that the host application provides. It has height and width set to a specific value.
The red DIV is my widget container which I specify the height and width to be 100%, taking up the entire parent container.
The green DIVs are general visual sections of my widget ( which in fact could be a few DIVs deep ). The first three heights are determined by static labels or buttons. I don't specifically set a height or width on them.
The blue DIV at the bottom within the last green DIV is intended to contain dynamic content which is populated at runtime.
What I'd like is that the blue DIV becomes scrollable when it overflows its parent container. Simply adding "overflow: auto" to the blue DIV doesn't work.
Here's a simulated HTML structure:
<div id="placeholder" style="margin: 8px; height: 300px; width: 300px; background-color: gainsboro;">
<div id="widget-container" style="height: 100%; width: 100%;">
<div id="widget">
<div id="section-1-container">
<div id="section-1">
<div style="display: block; padding: 4px">
Some static stuff (buttons, labels...)
</div>
</div>
</div>
<div id="section-2-container">
<div id="section-2">
<div style="display: block; padding: 4px">
Some static stuff (buttons, labels...)
</div>
</div>
</div>
<div id="section-3-container">
<div id="section-3">
<div style="display: block; padding: 4px">
Some static stuff (buttons, labels...)
</div>
</div>
</div>
<div id="section-4-container">
<div id="section-4" style="display: block; padding: 4px;">
Some dynamic stuff (rows of records...)
<div id="record-container" style="display: block; margin-left: 12px; padding: 4px;">
<div class="record" style="padding: 4px">
Record 1
</div>
<div class="record" style="padding: 4px">
Record 2
</div>
<div class="record" style="padding: 4px">
Record 3
</div>
<div class="record" style="padding: 4px">
Record 4
</div>
<div class="record" style="padding: 4px">
Record 5
</div>
<div class="record" style="padding: 4px">
Record 6
</div>
<div class="record" style="padding: 4px">
Record 7
</div>
<div class="record" style="padding: 4px">
Record 8
</div>
<div class="record" style="padding: 4px">
Record 9
</div>
<div class="record" style="padding: 4px">
Record 10
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've tried adding "overflow: auto" to "section-4-container", "section-4", and "record-container", but the records still overflow the container space. How could I modify this such that the last section (ideally the "record-container") adds the vertical scrollbar when needed?
Thanks in advance!
You have to set the section-4-container height, the browser does not know its size, so it will just increase the size as more content is added.
I removed the id="widget", and applied flexbox styles.
the id="widget-container" is the flexbox container, so it requires two css roles:
display: flex; flex-direction: column;
then we tell to section-4-container to fill the remaining space:
flex: 1 1 auto; overflow: auto;
<div id="placeholder" style="margin: 8px; height: 300px; width: 300px; background-color: gainsboro;">
<div id="widget-container" style="height: 100%; width: 100%; display: flex; flex-direction: column;">
<div id="section-1-container">
<div id="section-1">
<div style="display: block; padding: 4px">
Some static stuff (buttons, labels...)
</div>
</div>
</div>
<div id="section-2-container">
<div id="section-2">
<div style="display: block; padding: 4px">
Some static stuff (buttons, labels...)
</div>
</div>
</div>
<div id="section-3-container">
<div id="section-3">
<div style="display: block; padding: 4px">
Some static stuff (buttons, labels...)
</div>
</div>
</div>
<div id="section-4-container" style="flex: 1 1 auto; overflow: auto;">
<div id="section-4" style="display: block; padding: 4px;">
Some dynamic stuff (rows of records...)
<div id="record-container" style="display: block; margin-left: 12px; padding: 4px;">
<div class="record" style="padding: 4px">
Record 1
</div>
<div class="record" style="padding: 4px">
Record 2
</div>
<div class="record" style="padding: 4px">
Record 3
</div>
<div class="record" style="padding: 4px">
Record 4
</div>
<div class="record" style="padding: 4px">
Record 5
</div>
<div class="record" style="padding: 4px">
Record 6
</div>
<div class="record" style="padding: 4px">
Record 7
</div>
<div class="record" style="padding: 4px">
Record 8
</div>
<div class="record" style="padding: 4px">
Record 9
</div>
<div class="record" style="padding: 4px">
Record 10
</div>
</div>
</div>
</div>
</div>
</div>

Box shadow not working for 2 adjacent divs

I have a problem with using box-shadow. Below is the code:
<div class="container-fluid h-100" style="background-color : #F0F0F0;">
<div id="row1" class="row" style="box-shadow : 0 5px 10px 0 black; height: 100px;">
<div class="col-lg-3">
LOGO
</div>
<div class="col-lg-9" style="background-color: aqua">
HEADER
</div>
</div>
<div id="row2" class="row" style="height: 300px;">
<div id="sectiona" class="col-lg-3" style="background-color: aqua;">
Section A
</div>
<div id="sectionb" class="col-lg-9">
Section B
</div>
</div>
</div>
The box-shadow is not working for the id="sectiona" div? I tried using z-index but still not working. Any solution to this? I'm using bootstrap 4.
z-index property requires that the element's position is set.
<div id="row1" class="row" style="position: relative; z-index: 1; box-shadow : 0 5px 10px 0 black; height: 100px;">
Try applying the box-shadow style to the div with id="row2". That will give you a box-shadow in that section.