Display values into blocks - html

I have these value which I would like to display into key-value pairs similar to table:
<div class="element-box">
<div class="details-wrapper">
<p><b class="label">Remote IP</b>{{apiattempt.remote_ip}}</p>
<p><b class="label">Raw Request</b>
<pre>
{{apiattempt.raw_request | xmlBeautyfier }}
</pre>
<p><b class="label">Raw Response</b>{{apiattempt.raw_response | xmlBeautyfier }}</p>
</div>
</div>
CSS code:
details-wrapper {
padding: 20px 0;
h4 {
margin-bottom: 0;
}
.activity {
margin-bottom: 20px;
font-size: .8em;
color: #9e9e9e;
}
p {
.label {
display: inline-block;
width: 100px;
margin-right: 10px;
}
}
}
I want to use instead of I tried this:
API Attempt details
<div class="element-box">
<div class="details-wrapper">
<div><b class="label">Remote IP</b>{{apiattempt.remote_ip}}</div>
<div><b class="label">Raw Request</b><pre>{{apiattempt.raw_request | xmlBeautyfier }}</pre></div>
</div>
</div>
I get this visual result:
Can you give some advice how to fix this padding?
I want to get his visual result:

While actual tables are really usefull here, and grid and flexbox are interesting options you actually had most of the layout fixed. It simply breaks because <pre> is a block element by default. Setting its display to inline or inline-block should fix your problem.
Note that block elements always try to take up the complete horizontal space.

Related

Add a background color to text, but with space blank space between lines of paragraph

I was wondering if something was possible to do in CSS. Basically i want to recreate the text on the RHS of the image using html/css, but currently I'm getting the LHS of the image.
The HTML:
<div id="banner">
<div id="text">
<p>This is an example of what I have</p>
</div>
</div>
The CSS:
div#banner { background: green; width:300px; height:300px;}
div#text { margin: 20px auto; }
div#text p { background:#fff; padding: 5px; margin: 5px; font-size: 2em; }
Now I realise that this can be done already either by:
Using an image
Using separate p tags
(By Point 2 I mean:
<div id="banner">
<div id="text">
<p>This is an</p>
<p>example of</p>
<p>what I have</p>
</div>
</div>
)
But what I would really like to know is if it's actually possible to do what is on the RHS of the image, using only css and a single p tag?
alt text http://chris.carrotmedialtd.com/example.jpg
You can achieve your desired effect by using:
display: inline; to force the background styling on the p to apply to the text, rather than the block on the p, and
line-height: 2.2em (slightly more than your font size) to force lines between your text
like such:
div#text p {
display: inline;
background: #fff;
padding: 5px;
margin: 5px;
font-size: 2em;
line-height: 2.2em;
}
Because a paragraph tag is a block element, the background will be painted between lines. If you change it to an inline element, or wrap the text in an inline element, you should be able to get the effect you want.
<p><span>This is an example of what I have</span></p>
span {
background: #fff;
}

Format data in blocks

I use this Angular code to format text into profile page as blocks of data:
<div class="element-box">
<div class="details-wrapper">
<p><b class="label">Remote IP</b>{{apiattempt.remote_ip}}</p>
<p><b class="label">Raw Request</b>
<pre>
{{apiattempt.raw_request | xmlBeautyfier }}
</pre>
<p><b class="label">Raw Response</b>{{apiattempt.raw_response | xmlBeautyfier }}</p>
</div>
</div>
CSS code:
.details-wrapper {
padding: 20px 0;
h4 {
margin-bottom: 0;
}
.activity {
margin-bottom: 20px;
font-size: .8em;
color: #9e9e9e;
}
p {
.label {
display: inline-block;
width: 100px;
margin-right: 10px;
}
}
}
But I get this visual result:
As you can see the XML data is not aligned properly. Is there some way to move it aligned like the rest of the text?
I think you can use [innerHTML] and pass your content in a pre tag instead. But you need to make sure it is intended properly.
<p><b class="label">Raw Response</b>
<pre [innerHTML]="apiattempt.raw_response"></pre>
</p>
Text in a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

Width of Dates are not the same because width of number 1 and 2 are different?

I am working on a react project, and I list some operations ( objects ) in a Table, everything looks fine but the client for something I found very weird and hard, here is how it looks :
But that is not how he wanted the datatable dates looks, he wants something like this :
Is there a CSS property that can make that possible ?
Any help would be much appreciated.
there is too much code to write, but those parts are enough :
HTML :
<div class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">04/07/2018</span>
</div>
SASS :
.co-operations-contrat {
&__date {
a {
margin-right: 5px;
display: inline-block;
cursor: pointer;
+.co-operations-contrat__date-text {
margin-left: 0;
}
}
&-text {
margin-left: 25px;
font-family: "Poppins", monospace;
}
}
}
Like others have said monospace for the dates would be best. If you can't change the font are you able to wrap each part of the date?
If so what you could do is something like this;
https://jsfiddle.net/8mLwot25/3/
Basically, I've set a width on each span and aligned them with flex on the parent container. (You could also float each span). But by doing this would align the items in a better way.
It's not perfect but its a solution.
.container {
display: flex;
}
.container span {
text-align: center;
width: 20px;
}
.container span:last-child {
width: auto;
}
<div class="container">
<span>01</span>/
<span>04</span>/
<span>2019</span>
</div>
<div class="container">
<span>01</span>/
<span>05</span>/
<span>2018</span>
</div>
<div class="container">
<span>13</span>/
<span>04</span>/
<span>2019</span>
</div>
Maybe letter-spacing can help you with that. I'm not sure if you can achieve a pixel perfect result with that but this property may be usefull.
The issue is related to the Poppins font you are using for these dates. The font is not monospaced (it is sans-serif only).
If using a regular monospace font, the issue no longer appears
See demo below
.co-operations-contrat__date a {
margin-right: 5px;
display: inline-block;
cursor: pointer;
}
.co-operations-contrat__date .co-operations-contrat__date-text {
margin-left: 0;
}
.co-operations-contrat__date-text {
margin-left: 25px;
font-family: "Poppins", monospace;
}
#no-poppins .co-operations-contrat__date-text {
margin-left: 25px;
font-family: monospace;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<h2>Poppins In</h2>
<div class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">30/06/2018</span><br/>
<span class="co-operations-contrat__date-text">31/03/2018</span><br/>
<span class="co-operations-contrat__date-text">04/07/2018</span><br/>
<span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>
<h2>Poppins Out</h2>
<div id="no-poppins" class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">30/06/2018</span><br/>
<span class="co-operations-contrat__date-text">31/03/2018</span><br/>
<span class="co-operations-contrat__date-text">04/07/2018</span><br/>
<span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>
<h1>Other workarounds include </h1>
<h2>Usign <TT></h2>
<div class="co-operations-contrat__date">
<tt>30/06/2018</tt><br/>
<tt>31/03/2018</tt><br/>
<tt>04/07/2018</tt><br/>
<tt>31/01/2011</tt><br/>
</div>
<h2>Using <PRE></h2>
<div class="co-operations-contrat__date">
<span>30/06/2018</pre>
<pre>31/03/2018</pre>
<pre>04/07/2018</pre>
<pre>31/01/2011</pre>
</div>
Of course, you can choose any monospaced font of your choosing, I just went the browser's defaults for the demo.

<p> Box is really big and I don't know why

Why is the box on my paragraph tag really big? I think this may be the reason why I can't push the <p> tag down with margin-top: 50px;
.train p {
margin: 0;
font-size: 2.5vw;
}
<div class="train">
<p class="train">In Training</p>
<hr>
</div>
The <p> tag is a block element. Block level elements, regardless of their width, take an entire line to themselves within their parent. try wrapping a span around the piece that you want to style
A simple example for you to see the problem (also a good way to debug HTML/CSS). <p> and <div> those are by default block level elements
Strongly suggest you to taking 3 mins to read the following link
REF: http://dustwell.com/div-span-inline-block.html
p.train {
margin: 0;
font-size: 2.5vw;
background: red;
}
<div>
<p class="train">In Training</p>
<hr>
</div>
Solution:
Set p to inline-block
or
just use a span which is an inline element:
p.train {
margin: 0;
font-size: 2.5vw;
background: red;
display: inline-block;
}
.green {
margin: 0;
font-size: 2.5vw;
background: red;
}
<div>
<p class="train">In Training</p>
<hr>
<span class="green">In Training</span>
</div>

CSS, two flexible fields of variable width, each takes up 50% if long

I have several rows of email address and name. I would like to show as much content as I can. So, if I have a short name, show more email address, and if I have a short email, show more name. If both name and email are long, I'd like them to take an equal amount of space. And for any long, truncated item, I'd like them to end with an ellipsis.
Is there anyways I can keep these requirements without resorting to Javascript? I'd prefer not to use flexbox layouts (not enough browser support), but I'd be open to it. Also, everything is a single line; no wrapping.
------------- -------------------------------------
| This is a long name...| This is a long email... |
------------- -------------------------------------
|<------------------100% width ------------------>|
<div class='result'>
<div class='textHolder'>
<h3>Name</h3>
<h4>Email</h4>
</div>
</div>
Without javascript, the only solution that I think would work is giving a max-width of 50% to each, and a text-overflow with an ellipsis (…) when the text overflows...
The only problem is if for instance the name is very small, if the email is very big it will ocupy only 50% of the full width.
I made this fiddle: http://jsfiddle.net/N36tY/
(also I agree with cimmanon, use other tags)
Example HTML:
<div class='result'>
<div class='textHolder'>
<h3>Name</h3>
<h4>Email</h4>
<div class="clear"></div>
<h3>Name and more text, etc and even more to make it overflow</h3>
<h4>Email</h4>
<div class="clear"></div>
<h3>Name and more text, etc and even more to make it overflow</h3>
<h4>Email and a lot of text and more and even more to make it overflow</h4>
<div class="clear"></div>
<h3>Small name</h3>
<h4>Email and a lot of text and more and even more to make it overflow</h4>
</div>
</div>
CSS:
.textHolder {
width: 100%;
}
h3 {
background: blue;
color: #FFF;
}
h4 {
background: green;
color: #FFF;
}
h3, h4 {
margin: 0;
padding: 0;
font-size: 14px;
font-weight: normal;
display: block;
float: left;
min-width: 10px;
max-width: 50%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.clear {
clear: both;
}
#Newtang I've updated the JSFiddle to your requirements. When you expand and contract the page, if the page width is too small the ellipses will appear.
Here's the link http://jsfiddle.net/6gFN9/1/
.textHolder {
width: 100%;
}
h3, h4 {
float: left;
max-width: 50%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

Resources