The screenshot below includes a Power BI report (the entire box) and some buttons that will be used to navigate it. The Power BI report has to have an exact height/width (1600X800), but I want the buttons to align just beneath it, regardless of screen resolution.
Full markup: https://plnkr.co/edit/B6iDWud66SKx15ctYL3o?p=info
<div style="width:100%; float: left; height:96%;">
<div id="reportContainer" style="height: 800px; width: 1600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"> </div>
<div style="position: absolute; top: 85%; left: 50%;">
<button class="button-secondary" onclick="pageChange()">Test button</button>
<button class="button-secondary" onclick="pageChange()">Test button 2</button>
</div>
</div>
You can wrap the report and buttons into a container, e.g. main-container. Then apply flexbox to achieve your goal.
<div style="width:100%; float: left; height:96%;">
<div class="main-container" style="
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;">
<div id="reportContainer" style="height: 400px;width: 800px; background: red;">Hi, I'm 400x800. I'm always centered and the buttons are right below me!</div>
<div style="margin-top: 20px;">
<button class="button-secondary" onclick="pageChange()">Test button</button>
<button class="button-secondary" onclick="pageChange()">Test button 2</button>
</div>
</div>
</div>
Note: I modified the dimension to 400x800 (intead of 800x1600) for render purposes.
If you must use position: absolute for the reportContainer, then do it on a shared parent container and place the buttons below the container with bottom: -20px.
#mainContainer {
width: 100%;
float: left;
height: 96%;
}
#subContainer {
height: 800px;
width: 1600px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: red;
}
#buttonContainer {
position: absolute;
bottom: -20px;
left: 50%;
}
<div id="mainContainer">
<div id="subContainer">
<div id="reportContainer"></div>
<div id="buttonContainer">
<button class="button-secondary" onclick="pageChange()">Test button</button>
<button class="button-secondary" onclick="pageChange()">Test button 2</button>
</div>
</div>
</div>
You can achieve this most simply, by applying to the <body>
display: flex
flex-wrap: wrap
justify-content: center
If you then add to #reportContainer
flex: 0 0 1600px
you will ensure that #reportContainer maintains an inflexible width of 1600px, with zero capacity to either grow or shrink.
Working Example:
body {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#reportContainer {
flex: 0 0 1600px;
height: 800px;
background-color: orange;
}
.button-secondary {
margin: 12px;
}
<div id="reportContainer"></div>
<button class="button-secondary">Test button</button>
<button class="button-secondary">Test button 2</button>
To align your buttons always in center, you can use something like this.
.buttons {
text-align: center;
}
<div class="buttons">
<button class="button-secondary">Test button</button>
<button class="button-secondary">Test button 2</button>
</div>
Related
I'm trying to align several div containers with several other divs, but am having a problem.
I can't get the red (checkbox-container) divs to align next to the grey (button-container) divs.
Here's what it looks like now (I think the button being cut off at the bottom is just an issue with setting the developer options to view as mobile when I took a screenshot, because it looks alright in codepen).
And this is how I'm trying to make it look.
Could anyone help me out? I was thinking that I could have each checkbox as a child element of the button container, and then position it relative to that. The problem with that method is I want to ensure that when the screen is resized, the red checkbox-container divs don't overlap with anything in the green character-container div. So I figured having a separate div would be the best way to keep everything where it needs to be when the screen is resized, unless I'm mistaken?
Here's a codepen with the full code:
https://codepen.io/TheNomadicAspie/pen/NWjKwxE
And here's the relevant css:
.bottom-container {
position: absolute;
height: 31.8%;
width: 100vw;
background-color: green;
bottom: 0%;
}
.checkbox-grid {
float: right;
background-color: blue;
width: 7.45vh;
height: 100%;
}
.checkbox-container {
background-color: red;
width: 88%;
height: 22.5%;
top: -0.5vh;
margin-top: 0.5vh;
}
.buttons-grid {
float: right;
background-color: pink;
width: 38.2%;
right: 0%;
}
.button-container {
background-color: purple;
width: 88%;
height: 90%;
right: 0%;
margin-top: 0.5vh;
}
.buttons-grid button {
position: relative;
display: block;
background: grey;
height: 7.45vh;
width: 100%;
top: -0.5vh;
right: 0;
text-align: center;
}
And the HTML:
<div id="menu_bar" , class="menu-bar">
<div id="logo", class="logo">
</div>
<div id="title", class="title">Title</div>
<div id="menu", class="menu">
</div>
</div>
<div id="display" , class="display">
<div id="speech_bubble" , class="speech-bubble">
<div id="email_container" class="email-container">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<button id="submit_email_btn" class="buttons">Submit</button>
</div>
<div id="question_text" class="question-text">Question</div>
</div>
</div>
</div>
<div id="bottom_container" , class="bottom-container">
<div id="buttons_grid" , class="buttons-grid">
<div id="button_1_container" , class="button-container">
<button>Button 1</button>
</div>
<div id="button_2_container" , class="button-container">
<button>Button 2</button>
</div>
<div id="button_3_container" , class="button-container">
<button>Button 3</button>
</div>
<div id="button_4_container" , class="button-container">
<button>Button 4</button>
</div>
</div>
<div id="checkbox_grid" , class="checkbox-grid">
<div id="checkbox_1_container" , class="checkbox-container">
</div>
<div id="checkbox_2_container" , class="checkbox-container">
</div>
<div id="checkbox_3_container" , class="checkbox-container">
</div>
<div id="checkbox_4_container" , class="checkbox-container">
</div>
</div>
<div id="character_container" , class="character-container"></div>
</div>
</div>
I was able to get it working. I aligned checkbox-grid to the top of bottom-container, then added a margin-bottom to each checkbox-container until the spacing was correct, and added a margin-right to checkbox-grid to add spacing. Looks perfect now.
.bottom-container {
position: absolute;
height: 31.8%;
width: 100vw;
background-color: green;
bottom: 0%;
}
.checkbox-grid {
display: absolute;
float: right;
background-color: blue;
width: 7.45vh;
height: 100%;
margin-right: 1vh;
}
.checkbox-container {
background-color: red;
width: 100%;
height: 22.5%;
margin-bottom: 0.8vh;
}
.buttons-grid {
float: right;
background-color: pink;
width: 38.2%;
right: 0%;
}
.button-container {
background-color: purple;
width: 88%;
height: 90%;
right: 0%;
margin-top: 0.5vh;
}
.buttons-grid button {
position: relative;
display: block;
background: grey;
height: 7.45vh;
width: 100%;
top: -0.5vh;
right: 0;
text-align: center;
}
I'm trying to replicate the
following mockup
just to practice to place a square inside the circle but this is as close as I can get,
I tried using JS but just get weird looking circles.
This is my code
Index.html
.action-selection {
display: flex;
justify-content: space-between;
}
.action {
height: auto;
flex: 0 1 30%;
border-radius: 100%;
border: 2px solid orange;
text-align:center;
}
.action img {
width: 30px;
}
.action div {
border: 2px dashed black;
height : auto;
}
<div class="action-selection">
<div class="action">
<div><img src="img/phone.png"><p>I'm already lincenced and I want to join BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm licensed but I'd like to know more about BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm ready to start my career with BeUrban</p>
</div>
</div>
</div>
There are a lot of little elements here. First of all, don't be afraid to use multiple wrapping divs when you have a lot of behaviors to handle rather than trying to put too many responsibilities on too few elements.
You already have the width set using flex-basis.
To make the circles have a fixed 1:1 width to height ratio you can use 50% border, height of 0, and padding-top 100%. That last bit is tricky but padding top or bottom with a percentage is a percentage of the width.
To center the squares, use another div with absolute position, top 50% and left 50% and then translate:transform( -50%, -50% ). The translate values are a percentage of the element itself and the top and left positioning percentages are percentages of the parent.
To add padding to the square without affecting it's size, use box-sizing: border-box
Finally, I used width and height of 72% to get the squares to contact the circles. That's pretty close to the ( square root of 2 ) / 2 * 100% which is 70.7% but it worked for me with your border thicknesses.
.action-selection {
display: flex;
justify-content: space-between;
}
.action {
flex: 0 1 30%;
text-align: center;
}
.action img {
width: 30px;
}
.action__container-circle {
border-radius: 50%;
border: 2px solid orange;
height: 0;
padding-top: 100%;
position: relative;
}
.action__content-square {
border: 2px dashed black;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50%);
width: 72%;
height: 72%;
box-sizing: border-box;
padding: 5px;
overflow: hidden;
}
<div class="action-selection">
<div class="action">
<div class="action__container-circle">
<div class="action__content-square">
<img src="img/phone.png">
<p>I'm already lincenced and I want to join BeUrban</p>
</div>
</div>
</div>
<div class="action">
<div class="action__container-circle">
<div class="action__content-square">
<img src="img/phone.png">
<p>I'm licensed but I'd like to know more about BeUrban</p>
</div>
</div>
</div>
<div class="action">
<div class="action__container-circle">
<div class="action__content-square">
<img src="img/phone.png">
<p>I'm ready to start my career with BeUrban</p>
</div>
</div>
</div>
</div>
The trick with creating perfect circles that are dependent on the viewport width is to use width and the same value for padding-top. Padding percentage, is based on width, whereas if you used a height percentage, that would be based on the height of the parent.
In this case, if you're basically using width: 30% then you'd use padding-top: 30%, and then set the content to position: absolute and then just center it inside the relatively positioned circle. You'll likely have to fiddle around with the exact width/height combo that you want, but this'll get you the perfect circle you're looking for.
Note there's no way though CSS only to calculate the exact points where the internal square/rectangle should meet the external circle. That would require more complex math than what CSS calc can do, because you'd have to determine that based on the height of the content inside the rectangle and adjust your width from there.
.action-selection {
display: flex;
justify-content: space-between;
}
.action {
height: auto;
flex: 0 1 30%;
position: relative;
padding-top: 30%;
border-radius: 100%;
border: 2px solid orange;
text-align:center;
display: flex;
}
.action img {
width: 30px;
}
.action div {
border: 2px dashed black;
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
}
<div class="action-selection">
<div class="action">
<div><img src="img/phone.png"><p>I'm already lincenced and I want to join BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm licensed but I'd like to know more about BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm ready to start my career with BeUrban</p>
</div>
</div>
</div>
.action-selection {
display: flex;
justify-content: space-between;
}
.action {
border-radius: 50%;
border: 2px solid orange;
text-align: center;
height: 200px;
width: 200px;
}
.action img {
width: 30px;
}
.action div {
border: 2px dashed black;
/* height: auto; */
width: 75%;
margin-left: 50%;
margin-top: 50%;
transform: translate(-50%, -50%);
height: 65%;
}
}
<div class="action-selection">
<div class="action">
<div><img src="img/phone.png">
<p>I'm already lincenced and I want to join BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png">
<p>I'm licensed but I'd like to know more about BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png">
<p>I'm ready to start my career with BeUrban</p>
</div>
</div>
</div>
hey check this please add the code in your page then it will look as per your requirement.
.action-selection {
display: flex;
justify-content: space-between;
}
.action {
border: 2px solid orange;
text-align: center;
width: 250px;
height: 250px;
position: relative;
border-radius:100%;
}
.action div {
border: 2px dashed black;
height: 125px;
position: absolute;
left: 0;
top: 52px;
padding-top: 15px;
width: 200px;
right: 0;
margin: auto;
}
.action img {
width: 30px;
}
<div class="action-selection">
<div class="action">
<div><img src="img/phone.png"><p>I'm already lincenced and I want to join BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm licensed but I'd like to know more about BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm ready to start my career with BeUrban</p>
</div>
</div>
</div>
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 5 years ago.
i have a div and within div i want to center a image.
here is code
<div class="inner-div">
<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/5-1.gif"/>
</div>
.inner-div
{
margin: auto;
width: 100px;
height: 100px;
border-radius: 3px;
display: table;
vertical-align:middle;
text-align:center;
background-color:red;
}
img {
display:inline-block;
margin-left: auto;
margin-right: auto;
}
i use above css but still no luck. image is not getting center in div vertically and horizontally. here is jsfiddle link https://jsfiddle.net/year4qt1/4/
looking for suggestion.
Now it looks fine https://jsfiddle.net/7t2fghtf/1/
thanks for the help Mr #Highdef
You can use absolute positioning and transform on the img while setting the parent container (inner-div) to relative position:
position:absolute; /* Absolute relative to inner-div */
left:50%; /* Top, left and transform for horizontal and vertical alignment without the use of margin or changing the display */
top:50%;
transform: translate(-50%,-50%);
Fiddle : https://jsfiddle.net/7t2fghtf/
$("#mybutton").click(function() {
// $.ajax("").done(function(){
// $("#mycontent").html( $("#anothermymodal").html());
// })
setTimeout(function() {
$("#mycontent").html($("#anothermymodal").html());
}, 10000);
});
.inner-div {
margin: 0 auto;
width: 100px;
height: 100px;
border-radius: 3px;
display: table;
vertical-align: middle;
text-align: center;
background-color: red;
position: relative;
}
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-block;
margin-left: auto;
margin-right: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Small Modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" id="mybutton" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
<div style="display:none" id="anothermymodal">
<div class="modal-body">
<p>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content" id="mycontent">
<div class="inner-div">
<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/5-1.gif" />
</div>
</div>
</div>
</div>
There are more ways to do this I would suggest using flex. Add this to your code:
.inner-div {
margin: auto;
width: 100px;
height: 200px;
border-radius: 3px;
display: table;
vertical-align:middle;
text-align:center;
background-color:red;
display: flex;
align-items: center;
}
Fiddle example: https://jsfiddle.net/femu288x/
https://css-tricks.com/centering-css-complete-guide/ there are many examples or ways to do this. The position:absolute answer is one way and another is flex (my fav) - check them on the link and try
As you can see the steps in image are not centered well. May be someone has some suggestions how to center it properly ?
CSS:
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
/*width: 70px*/
}
HTML:
<div class="stepwizard">
<div class="stepwizard-row">
<div class="stepwizard-step">
<button type="button" class="btn btn-default">1</button>
<p>Uploading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">2</button>
<p>Parsing</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">3</button>
<p>Downloading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">4</button>
<p>Showing</p>
</div>
</div>
</div>
FIDDLE
I'm assuming you're talking about the horizontal distance between the steps not being of equal size. This is due to the text of the step, e.g. Uploading, being part of the table cell. The width of the table is distributed to the table cells based on the width of their contents, a cell with more text will therefore become wider than one with less text.
The easiest way to solve this might be to take the text of the step outside of the document flow by giving it a position: absolute, width: 100% and text-align: center.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
/*width: 70px*/
}
.stepwizard-step p {
position: absolute;
width: 100%;
text-align: center;
}
<div class="stepwizard">
<div class="stepwizard-row">
<div class="stepwizard-step">
<button type="button" class="btn btn-default">1</button>
<p>Uploading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">2</button>
<p>Parsing</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">3</button>
<p>Downloading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">4</button>
<p>Showing</p>
</div>
</div>
</div>
go by this code it may work out
html
<div class="stepwizard">
<div class="stepwizard-row row">
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">1</button>
<p>Uploading</p>
</div>
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">2</button>
<p>Parsing</p>
</div>
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">3</button>
<p>Downloading</p>
</div>
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">4</button>
<p>Showing</p>
</div>
</div>
</div>
css code
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard {
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
text-align: center;
position: relative;
/*width: 70px*/
}
jsfiddle
change only stepwizard-row:before top 14px to 18px it's center vertically.
I have div as below:
<div id="divObservationInput" style="height: 55%; vertical-align: text-bottom;" class="sloInputBox">
<div id="divEnlargeTextarea" style="height: 97%; width: 99%">
<textarea onkeyup="txtobservationbox_onTextChanged();return false;" name="txtobservationbox" id="txtobservationbox" style="height: 100%; width: 100%; overflow: auto; font-size: 12pt;">#ViewBag.ObserverText</textarea>
</div>
</div>
And button div as:
<div id="DivShowInModal" style="background: rgba(0,0,0,0.8);">
<div>
<div style="padding-top: 1%; text-align: right; position: relative; width: 80%; height:2%">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
<div id="divModal" style="max-height: 500px; min-height: 500px;">
</div>
</div>
</div>
Its looking:
I want to shoft that close button to extreem right of div.
i.e. It should be extreem right to textarea.
Please help me.
I tried button setting its right padding to 100%.
But it didnt helped.
Change your '80%' 'width' to '100%' for this 'div'
<div style="padding-top: 1%; text-align: right; position: relative; width: 100%; height:2%">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
I guess you have to do
in HTML
<div class="relative">
<div class="button">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
<div id="divModal" style="max-height: 500px; min-height: 500px;">
</div>
</div>
In CSS
.relative { position: relative; } .button { position: absolute; top: 0; right: 0; }
use this code n try once
<div id="DivShowInModal" style="background: rgba(0,0,0,0.8);">
<div style="position:relative">
<div style="padding-top: 1%; text-align: right; position: absolute; width: 80%; height:2%;right:0">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
<div id="divModal" style="max-height: 500px; min-height: 500px;">
</div>
</div>
</div>
i have scaled it by position:absolute and right:0
You can use position absolute with right 0 for button. For that you need to give position relative for it's parent div.
[Demo](http://jsfiddle.net/Rj3Mh/)