I have a card with header information displayed inside it but an option to expand the card to see more info. The left side of the card is color coordinated with rotated text that says Critical or Not critical. When the card is expanded, the word Critical gets moved to the bottom of the card. I want it to be fixed at the top of the card whether it's expanded or not. Havent been able to figure this out.
My html isnt displaying or working properly in JSFiddle for some reason. I modified my code in the fiddle so you can see my problem. JSFiddle
But below is my actual code.
Thanks for the help.
<section style=" margin: 0 auto;">
<div style=" margin: auto; margin-bottom:20px; padding:0px 0px 0px 20px; border-radius:0px;
background-image: linear-gradient(rgb(255, 255, 255),rgb(255, 255, 255)),
linear-gradient(#E33B3E, #E33B3E);
background-clip: content-box, padding-box;">
<h5 style="position: absolute;transform: rotate(270deg);transform-origin:0% -7%;bottom: 0;left:0;margin-left: 0px; color:#FFFFFF;">
Critical
</h5>
<div style="padding:10px;">
<div style="display:flex;justify-content:space-between;">
<div style="float:left">
<h5 style="padding:0px" id="title1">TITLE</h5></div>
<div style="float:right">
<h6 id="priority1">P2</h6></div>
</div>
<div><span style="vertical-align: middle; background-color:#FFEE05; font-size: 15px; padding:5px; ">253</span>
<p style="vertical-align: middle;background-color: #DCDEDE; display: inline; font-size:15px; padding:5px"> Vulnerabilities</p> <span style="vertical-align: middle; background-color:#FF5005; font-size: 15px; padding: 5px; margin-left:10px">253</span>
<p style="vertical-align: middle;background-color: #DCDEDE; display: inline; font-size:15px; padding:5px"> TTR Breached</p> <a data-value="1" data-flag="false" style="float:right; padding-top:10px" data-toggle="collapse" id="collapseAnchor1" href="#collapseData1" role="button" aria-expanded="false" aria-controls="collapseData1">Expand</a> </div>
<div id="collapseData1" style="margin-top: 10px;">
<div>
<p style="margin-bottom: 3px;"><strong><i>Description</i></strong></p>
<p id="description1" style="margin-bottom:0px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p style="margin-bottom: 3px;"><strong><i>Solution</i></strong></p>
<p id="solution1" style="margin-bottom:0px">N/A</p>
</div>
</div>
</div>
</div>
</section>
CodePudding user response：
I have edited the Critical text element and it's suppose to stay at the top just like you wanted, even though, I suggest working on the html since the whole structure is kind of messy and can easily produce other bugs.
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<section>
<div
style="
margin: auto;
margin-bottom: 20px;
padding: 0px 0px 0px 20px;
border-radius: 0px;
background-image: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)),
linear-gradient(#e33b3e, #e33b3e);
background-clip: content-box, padding-box;
"
>
<h6
style="
position: absolute;
top: 10px;
left: 0;
transform: translateX(-190%);
writing-mode: vertical-rl;
color: white;
"
>
Critical
</h6>
<div style="padding: 10px">
<div style="display: flex; justify-content: space-between">
<div style="float: left">
<h5 style="padding: 0px" id="title1">TITLE DATA</h5>
</div>
<div style="float: right"><h6 id="priority1">P2</h6></div>
</div>
<div>
<span
style="
vertical-align: middle;
background-color: #ffee05;
font-size: 15px;
padding: 5px;
"
>253</span
>
<p
style="
vertical-align: middle;
background-color: #dcdede;
display: inline;
font-size: 15px;
padding: 5px;
"
>
Vulnerabilities
</p>
<span
style="
vertical-align: middle;
background-color: #ff5005;
font-size: 15px;
padding: 5px;
margin-left: 10px;
"
>253</span
>
<p
style="
vertical-align: middle;
background-color: #dcdede;
display: inline;
font-size: 15px;
padding: 5px;
"
>
TTR Breached
</p>
<a
aria-expanded="true"
id="TLink1"
href="#"
onclick="toggle('navbar', 'TLink1')"
>Expand</a
>
</div>
<div id="navbar" style="margin-top: 10px">
<div>
<p style="margin-bottom: 3px">
<strong><i>Description</i></strong>
</p>
<p id="description1" style="margin-bottom: 0px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<p style="margin-bottom: 3px">
<strong><i>Solution</i></strong>
</p>
<p id="solution1" style="margin-bottom: 0px">N/A</p>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
function toggle(id, id2) {
var n = document.getElementById(id);
if (n.style.display != "none") {
n.style.display = "none";
document.getElementById(id2).setAttribute("aria-expanded", "false");
} else {
n.style.display = "";
document.getElementById(id2).setAttribute("aria-expanded", "true");
}
}
</script>CodePudding user response：
The word "critical" is moving downward upon expanding because you have it's element positioned as Bottom: 0; This anchors it to the bottom of the parent div, therefor it moves down when the parent gets taller.
Try changing Bottom: 0; to Top: 60px; OR Top: 20%;