List element is not aligning center in Internet explorer. But in Chrome the element is centered. Attached is the sample code. I am using Bootstrap CSS Framework for all the classes.
Here is the JSfiddle
https://jsfiddle.net/8cunpsvy/
HTML:
<div class="card-body">
<table class="table-sm table-hover">
<thead>
<tr class="text-center">
<th class="w-25" scope="col"></th>
<th style="width: 54%" scope="col"></th>
<th style="width: 10%" scope="col">Actual</th>
<th style="width: 1%;" scope="col">Status</th>
<th style="width: 10%" scope="col">Expected</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td class="text-center">2/13/2019</td>
<td class="text-center">
<ul class="status-circle"><li></li></ul>
</td>
<td class="text-center"></td>
</tr>
</tbody>
</table>
</div>
CSS:
.status-circle {
list-style: none;
margin: 0;
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
border-spacing: 0px;
line-height: 0;
}
.status-circle li {
display: inline-block;
border-radius: 50%;
border: 1px solid #000;
width: 15px;
height: 15px;
background: #737373;
}
I have change the element inside into div and transferred all the styles from the li element also adding content.
HTML:
<div class="card-body">
<table class="table-sm table-hover">
<thead>
<tr class="text-center">
<th class="w-25" scope="col"></th>
<th style="width: 54%" scope="col"></th>
<th style="width: 10%" scope="col">Actual</th>
<th style="width: 1%;" scope="col">Status</th>
<th style="width: 10%" scope="col">Expected</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td class="text-center">2/13/2019</td>
<td class="text-center">
<div class="div-status-circle"></div>
</td>
<td class="text-center"></td>
</tr>
</tbody>
</table>
</div>
CSS:
.div-status-circle {
display: inline-block;
border-radius: 50%;
border: 1px solid #000;
width: 15px;
height: 15px;
content: "";
background: #737373;
}
Try this fiddle
Fiddle
.status-circle {
border-radius: 50%;
border: 1px solid #000;
width: 15px;
height: 15px;
background: #737373;
display: block;
margin: auto;
}
instead of using list element for a single item you can achieve this by using a div or span
Related
I am trying to create a circle css and add some more changes to it,
Here is my code for circles
.container {
display: flex;
flex-wrap: nowrap;
width: 200px;
height: 50px;
}
.holder {
margin-right: 5px;
width: 30px;
height: 30px;
border-radius: 50%;
}
.h1 {
background: blue;
}
.h2 {
background: red;
}
.h3 {
background: green;
}
.h4 {
background: grey;
}
and the html code
<div class="container">
<div class="holder h1"></div>
<div class="holder h2"></div>
<div class="holder h3"></div>
<div class="holder h4"></div>
</div>
works well for the circles, but my end goal is to do this
https://prnt.sc/KCA2zWq435oK
how can i do this, any help will be much appreciated
regards
I created this table
.container {
display: flex;
flex-wrap: nowrap;
width: 200px;
height: 50px;
}
.holder {
margin-right: 5px;
width: 30px;
height: 30px;
border-radius: 50%;
}
.h1 {
background: blue;
}
.h2 {
background: red;
}
.h3 {
background: green;
}
.h4 {
background: grey;
}
th {
writing-mode: vertical-rl;
min-width: 30px;
transform: rotate(180deg);
text-transform: capitalize;
}
td {
min-width: 30px;
height: 30px;
}
<table>
<tr>
<th>
drafted
</th>
<th>
submitted
</th>
<th>
approved
</th>
<th>
processed
</th>
</tr>
<tr>
<td>
<div class="holder h1">
<div/>
</td>
<td>
<div class="holder h2">
<div/>
</td>
<td>
<div class="holder h3">
<div/>
</td>
<td>
<div class="holder h4">
<div/>
</td>
<td>
<div class="holder h3">
<div/>
</td>
<td>
Not drafted - missing
</td>
</tr>
</table>
I hope it helps you
You can easily customize it for yourself
Semantically this is a table.
This snippet creates the circles as radial-gradient backgrounds to the relevant cells.
The headings are written vertically and rotated to give the desired orientation.
thead>tr>th {
writing-mode: vertical-lr;
transform: rotate(180deg);
text-align: left;
}
tbody>tr>td {
width: 50px;
height: 50px;
--bg: gray;
background-image: radial-gradient(circle, var(--bg) 0 70%, transparent 70% 100%);
background-size: 70% 70%;
background-repeat: no-repeat;
background-position: center center;
}
tbody>tr>td:last-child {
width: 400px;
--bg: transparent;
}
.gold {
--bg: gold;
}
.green {
--bg: green;
}
.red {
--bg: red;
}
<table>
<thead>
<tr>
<th>Drafted</th>
<th>Submitted</th>
<th>Approved</th>
<th>Processed</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Not drafted - missing</td>
</tr>
<tr>
<td class="gold"></td>
<td></td>
<td></td>
<td></td>
<td>Drafted but not submitted</td>
</tr>
<tr>
<td class="green"></td>
<td class="green"></td>
<td></td>
<td></td>
<td>Submitted - not approved</td>
</tr>
<tr>
<td class="green"></td>
<td class="green"></td>
<td class="green"></td>
<td></td>
<td>Approved not processed</td>
</tr>
<tr>
<td class="green"></td>
<td class="green"></td>
<td class="green"></td>
<td class="green"></td>
<td>Processed</td>
</tr>
<tr>
<td class="gold"></td>
<td></td>
<td class="red"></td>
<td></td>
<td>Rejected, back in draft</td>
</tr>
<tr>
<td class="green"></td>
<td class="green"></td>
<td></td>
<td></td>
<td>Rejected initially, submitted again</td>
</tr>
</tbody>
</table>
I'm trying to automatically expand the rotated columns automatically when there is more text.
I have tried a variety of css such as removing the tranform-origin or using translateX(-50%) translateY(-50%) rotate(-90deg); options.
I wondered if I am missing anything?
Sample of code below is what I'm working on.
.tcentre {
text-align: center;
}
/*Events Matrix*/
.matrix table,
.matrix td,
.matrix th {
border-spacing: 0;
border: 1px solid;
text-align: left
}
.matrix .vert>th:nth-child(1n+3) {
position: relative;
height: 150px;
min-width: 40px;
padding: 4px;
}
.matrix .vert>th {
overflow: hidden;
}
.matrix .vert>th>div>div {
height: 100%;
line-height: 18px;
width: 150px;
position: absolute;
bottom: -145px;
/*border: 1px solid blue; */
transform: rotate(-90deg);
transform-origin: top left;
}
.matrix .tbottom {
vertical-align: bottom !important;
text-align: left !important;
}
<DIV id="content" class="matrix">
<table>
<thead>
<tr class="vert">
<th class="tbottom" style="Width: 100px;">Part</th>
<th class="tbottom" style="Width: 100px;">Name</th>
<th style="Width: 20px;">
<div>
<div>Park<br>2018-08-12</div>
</div>
</th>
<th style="Width: 20px;">
<div>
<div>War Memorial Lots more text in this cell<br>2018-08-19</div>
</div>
</th>
<th style="Width: 20px;">
<div>
<div>Charity Collection<br>2018-10-13</div>
</div>
</th>
<th style="Width: 20px;">
<div>
<div>Concert<br>2018-10-28</div>
</div>
</th>
<th style="Width: 20px;">
<div>
<div>Remembrance<br>2018-11-10</div>
</div>
</th>
</tr>
<tr>
<td class="nowrap">Score</td>
<td class="nowrap">Person 1</td>
<td class="tcentre colour-Y">Y</td>
<td class="tcentre colour-Y">Y</td>
<td class="tcentre colour-Y">Y</td>
<td class="tcentre colour-Y">Y</td>
<td class="tcentre colour-Y">Y</td>
</tr>
<tr>
<td class="nowrap">Solo Cornet</td>
<td class="nowrap">Person 2</td>
<td class="tcentre colour-Y">Y</td>
<td class="tcentre colour-" />
<td class="tcentre colour-" />
<td class="tcentre colour-" />
<td class="tcentre colour-" />
</tr>
</thead>
</table>
</Div>
I am trying to align my table2 to the right using the align="right" attribute of table, however, it's not exactly aligning next to the table1, as shown in the JSFiddle here. Instead it is getting aligned next to the Third Heading which I don't want.
I want table 1 and table 2 to be next to one another and then Heading 3 should come below it.
Another issue, I was trying to resolve is the position of the Heading 2 with the float:right as shown below. It's not going to extreme right.
.enc-data-table {
margin: 0 0 45px 0;
}
.enc-data-table th {
font-size: 12pt;
/*font-weight: 700;*/
padding: 0 5px 5px 0;
text-align: right;
}
.enc-data-table td {
font-size: 12pt;
padding: 0 0 5px 0;
}
h3 {
font-size: 20px;
}
h3 {
width: 50%;
height: 40px;
margin: 0;
padding: 0;
display: inline;
}
hr {
width: 100%
}
<h3>Heading 1</h3>
<h3 style="float:right">Heading 2</h3>
<hr/>
<table class="enc-data-table">
<tr>
<th>Location:</th>
<td >A</td>
</tr>
<tr>
<th>Type:</th>
<td >B</td>
</tr>
<tr>
<th>Dates:</th>
<td >Today</td>
</tr>
<tr>
<th>Reason for visit:</th>
<td >D</td>
</tr>
</table>
<table align= "right" class="enc-data-table">
<tr>
<th > Number:</th>
<td >1111</td>
</tr>
<tr>
<th >Plan Information:</th>
<td >1111</td>
</tr>
<tr>
<th >Date of service:</th>
<td >Today</td>
</tr>
<tr>
<th >Location Description:</th>
<td >USA</td>
</tr>
</table>
<h3>Third Heading <button class="btn btn-xs btn-success add-attribute-ctrl">ADD</button></h3>
<hr />
Do you want something like this? To set the table alignment properly I recommend setting the th and td elements width separetely!
.enc-data-table th{
width:20%
}
.enc-data-table tr{
width:80%
}
.enc-data-table {
margin: 0 0 45px 0;
width: 50%;
}
.enc-data-table th {
font-size: 12pt;
/*font-weight: 700;*/
padding: 0 5px 5px 0;
text-align: right;
}
.enc-data-table td {
font-size: 12pt;
padding: 0 0 5px 0;
}
h3 {
font-size: 20px;
}
h3 {
width: 50%;
height: 40px;
margin: 0;
padding: 0;
display: inline;
}
hr {
width: 100%
}
/*.enc-data-table th{
width:20%
}
.enc-data-table tr{
width:80%
}*/
<h3>Heading 1</h3>
<h3 style="float:right">Heading 2</h3>
<hr/>
<table class="enc-data-table" align="left">
<tr>
<th>Location:</th>
<td>A</td>
</tr>
<tr>
<th>Type:</th>
<td>B</td>
</tr>
<tr>
<th>Dates:</th>
<td>Today</td>
</tr>
<tr>
<th>Reason for visit:</th>
<td>D</td>
</tr>
</table>
<table align="right" class="enc-data-table">
<tr>
<th> Number:</th>
<td>1111</td>
</tr>
<tr>
<th>Plan Information:</th>
<td>1111</td>
</tr>
<tr>
<th>Date of service:</th>
<td>Today</td>
</tr>
<tr>
<th>Location Description:</th>
<td>USA</td>
</tr>
</table>
<h3>Third Heading <button class="btn btn-xs btn-success add-attribute-ctrl">ADD</button></h3>
<hr />
I'm trying to organize two sets of information in a particular way. I have a very crude mock-up here:
https://imgur.com/a/LrSCg
I have everything working except for the diving line between the two sets of info. I've tried setting up the entire thing as a table and then setting the appropriate border styles, but that didn't work out so well.
Here's what I currently have that gets me everything except the middle dividing line:
<table style="margin: 0 auto; border: 1px solid black; table-layout: fixed">
<tr>
<td>
<img id="left_image" class="images" alt="left_image" height="auto" width="300" style="border: 2px solid #5b5b5b">
</td>
<td style="display:block;">
<div style="float: left; margin: 20px 0 0 20px;">
<table>
<tr>
<td style="width: 75px;">Name:</td><td><span id="left_name" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="left_category" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="left_id" style="font-weight: bold;"></span></td>
</tr>
</table>
</div>
<hr>
<div style="float: right; margin: 100px 20px 0 0;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="right_name" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="right_category" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="right_id" style="font-weight: bold"></span></td>
</tr>
</table>
</div>
</td>
<td>
<img id="right_image" class="images" alt="right_image" height="auto" width="300" style="border: 2px solid #5b5b5b">
</td>
</tr>
<tr>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="selectLeftID()">Select Left</button>
</td>
<td></td>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="electRightID()">Select Right</button>
</td>
</tr>
</table>
This is just experimental code, it hasn't been cleaned up yet, so please ignore all the in-line styling.
Here's a sloppy example I threw together: https://jsfiddle.net/33pc23w0/2/
I would like to make the line in code and not use any images since I'd like the elements to be flexible in size. Any suggestions on the middle lines?
Here's a quick solution. I set the main container to relative position and added two absolute position divs with appropriate borders and dimensions to handle the dividers.
.main-container {
width: 800px;
position: relative;
}
.divider-top {
position: absolute;
width: 150px;
height: 150px;
left: 300px;
border: 2px solid black;
border-left: 0px;
border-top: 0px;
}
.divider-bottom {
position: absolute;
width: 150px;
height: 167px;
top: 150px;
left: 300px;
border: 0px;
border-left: 2px solid black;
}
.details_images {
display: block;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 10px;
}
.btn4 {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
width: 150px;
height: 50px;
}
.btn4.focus,
.btn4:focus,
.btn4:hover {
color: #333;
text-decoration: none;
}
.btn4-confirm {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn4-confirm:active {
color: #fff;
background-color: #449d44;
border-color: #398439;
}
<div class="main-container">
<div class="divider-top"></div>
<div class="divider-bottom"></div>
<table style="width: 100%; border: 1px solid black; table-layout: fixed">
<tr>
<td>
<img id="left_image" class="images" alt="left_image" height="auto" width="200" src="https://catalogue.millsarchive.org/images/generic-icons/blank.png" style="border: 2px solid #5b5b5b">
</td>
<td style="display:block;">
<div style="float: left; margin: 20px 0 0 20px;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="left_name" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="left_category" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="left_id" style="font-weight: bold;">Blah</span></td>
</tr>
</table>
</div>
<div style="float: right; margin: 100px 20px 0 0;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="right_name" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="right_category" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="right_id" style="font-weight: bold">Blah</span></td>
</tr>
</table>
</div>
</td>
<td>
<img id="right_image" class="images" alt="right_image" height="auto" width="200" src="https://catalogue.millsarchive.org/images/generic-icons/blank.png" style="border: 2px solid #5b5b5b">
</td>
</tr>
<tr>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="selectLeftID()">Select Left</button>
</td>
<td></td>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="electRightID()">Select Right</button>
</td>
</tr>
</table>
</div>
I am able to show it ok in IE9, but in Chrome the number goes down. Trying to fix this for Chrome:
http://jsfiddle.net/we17rtoc/
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th></th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" style="padding-top: 5px; width: 25px;"><span class="label label-success" style="margin-bottom: 3px; display: inline-block; width: 100%; height: 22px; padding-top: 2px;"><i class='fa fa-check' style="font-size: 18px;"></i></span><span style='position: relative; top: -15px; right: 0px; left: 21px;'><span style='text-align: center; float: left; width: 22px; height: 22px; border: 2px solid #5cb85c; border-radius: 100%; background-color: #f0ad4e; color: white;'>6</span></td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>
Thanks for any info.
Remove the float and set display: inline-block to the span containing a number.
DEMO: https://jsfiddle.net/lmgonzalves/we17rtoc/4/