0

When I rotate text (or rather a div containing text) this results in the div escaping it's parent. Not only that, but the height of the div is it's original width. I'd rather just stick with CSS to get the desired result rather than relying on javascript/jquery even though those tools are available since I'm using Bootstrap-4 How can I make sure a rotated div stays inside it's parent, and use's it's parents' width/height as it's basis for height/width because of being rotated 90° ?

THANKS!

.emptydropzone{
	height: 10vh;
	border: 1vh dashed #000; 
	border-radius: 1vh;
	background-color:  #CCC;
}

.taflag{
	width: 98%;
	min-height: 50px;
	margin: 10px 125px 10px 5px;
	padding: 10px 10px 10px 10px;
	border: 5px solid #90C;
	border-radius: 5px;
	background-color:  #90C;
	color: #FFF;
	font-size:xx-large;
	font-weight: bolder;
}

.rotateparent {
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: yellow; /* this is just to see the parent div in testing */
}

.agentflag{
	transform: rotate(-90deg);
	border: 5px solid #F00;
	border-radius: 5px;
	background-color:  #F00;
	color: #FFF;
	font-size:xx-large;
	font-weight: bolder;
	
	
	
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<body>

<div class="container-fluid">
	<div class="row">
		<div class="col-12">
			<div class="row">
				<div class="col-2">
                	 <div class="taflag"> TA </div>
				</div>
				<div class="col-10">
                	<div class="emptydropzone" id="ta" > </div>
				</div>
			</div>
			<div class="row">
				<div class="col-2">
                	 <div class="rotateparent">
                       <div class="agentflag"> AGENTS </div>
                     </div>
			 	</div>
				<div class="col-10">

	  <div class="emptydropzone" id="agent1"> </div>
	  <div class="emptydropzone" id="agent2"> </div>
	  <div class="emptydropzone" id="agent3"> </div>
	  <div class="emptydropzone" id="agent4"> </div>
                
				</div>
			</div>
		</div>
	</div>
</div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

enter image description here

1 Answer 1

4

writing-mode might be much more efficient here .

possible update with less html and more boostrap classes

.emptydropzone {
  min-height: 10vh;
  border: 1vh dashed #000;
  border-radius: 1vh;
  background-color: #CCC;
}

.taflag {
  width: 98%;
  min-height: 50px;
  margin: 10px 125px 10px 5px;
  padding: 10px 10px 10px 10px;
  border: 5px solid #90C;
  border-radius: 5px;
  background-color: #90C;
  color: #FFF;
  font-size: xx-large;
  font-weight: bolder;
}

.rotateparent {
  background: yellow;
  padding: 10px 0;
}

.agentflag {
  writing-mode: vertical-lr;
  transform: scale(-1, -1);
  /* untill 
  writing-mode:sideways-lr; works everywhere */
  margin: auto;
  border: 5px solid #F00;
  border-radius: 5px;
  background-color: #F00;
  color: #FFF;
  font-size: xx-large;
  font-weight: bolder;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="row">
          <div class="col-2">
            <div class="taflag"> TA </div>
          </div>
          <div class="col-10">
            <div class="emptydropzone" id="ta"> </div>
          </div>
        </div>
        <div class="row">

          <div class="col-2 d-flex rotateparent m-0">
            <div class="agentflag m-auto"> AGENTS </div>
          </div>

          <div class="col-10 d-flex flex-column justify-content-around">

            <div class="emptydropzone" id="agent1"> </div>
            <div class="emptydropzone" id="agent2"> </div>
            <div class="emptydropzone" id="agent3"> </div>
            <div class="emptydropzone" id="agent4"> </div>

          </div>
        </div>
      </div>
    </div>
  </div>



  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.