Problem
When I try to use the code (see below), the div is only centered when I use width: 100px;.
<div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; margin-left: auto; margin-right: auto;">
Since I want to assign a much longer width to the text and set the width to 500px, the div is no longer centered.
<div style="border: solid 1px black; width: 500px; height: 100px; background-color: blue; margin-left: auto; margin-right: auto;">
Problem #2
The svg isn't centered
<div class="col-xl-3 col-lg-3 col-sm-6">
<div class="ud-single-feature wow fadeInUp" data-wow-delay=".25s" >
<div class="ud-feature-icon" >
<i class="lni lni-layers"></i>
</div>
<div class="ud-feature-content" style="position:absolute; width: 100%; text-align: center;">
<h3 class="ud-feature-title" style="text-align: center;">test</h3>
<p class="ud-feature-desc" style="text-align: center;">
test
</p>
<!-- <a href="javascript:void(0)" class="ud-feature-link">
Learn More
</a>-->
</div>
</div>
</div>
Although your question does not define your desired goal, using margin-left or right will not justify the centre point of the page. Instead, consider using position: fixed in order to centre exactly in the page.
This should also mean you can set the dimensions of the div as you like.
<div style="background: blue; width: 100px; height: 100px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)">Div should be properly centred in page.</div>
You can set the div as a child of another div like so :
<div style="justify-content: center; align-items: center; display: flex;">
<div style="border: 1px solid black; width: 500px; height: 100px; background-color: blue;">
</div>
</div>
Related
I'm trying to make the borders to disappear only when they are behind the other elements. Similar to the screenshot. Does anyone know how to make the certain part of the border to disappear once it goes behind another element.
When .border goes behind .mobile-toggle and .hero-details I want that specific part of .border to disappear. So it looks cuts off, like it shows in the image.
Here's the page https://wordpress-324331-1192326.cloudwaysapps.com/ and below it's simplified code.
Here's a Codepen simplified example: https://codepen.io/elemusma/pen/RwPXMRJ?editors=1100
HTML
<a href="#" class="toggle">
<span style="border-top:2px solid black;with:50px;height:50px;"></span>
</a>
<button class="navbar-toggle mobile-toggle" type="button" id="open-button" data-toggle="collapse" data-target=".navbar-collapse">
<span></span>
<span></span>
<span></span>
</button>
<div class="home" id="home" style="background:url('https://wordpress-324331-1192326.cloudwaysapps.com/wp-content/uploads/2020/04/Welcome-Luxury-Compass.jpg');">
<div class="border"></div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2054761/Luxury-Logo.png" width="250" class="logo"/>
<div class="hero">
<div class="hero-details text-center">
<h4 class="bodoni subtitle">Positioning</h4>
<h6>You to a <strong>Higher Level</strong></h6>
</div>
</div>
</div>
CSS
.home{
position:relative;
height:500px;
}
.mobile-toggle{
position:absolute;
bottom:90px;
z-index:9;
}
.mobile-toggle span {
display: block;
width: 36px;
height: 7px;
background: #232323;
content: "";
margin: 3px 0px;
}
.hero {
position: absolute;
bottom: -100%;
left: 0;
width: 100%;
color: black;
display: flex;
justify-content: center;
align-items: center;
}
.logo{
transform:translate(100%, -50%);
position:absolute;
}
.border{
position:absolute;
border:1px solid black;
height:90%;
width:90%;
}
I have a fixed div in a vuejs app that i intend to use as a chat box. The div scrolls it's content within itself. I try to scroll to bottom automatically once chat box is open but it never works.
I have tried to assign scrollHeight to scrollTop but scrollTop always returns 0 even after assignment.
I have also emitted an event to the parent component that contains the scrollBar of the chat window to try to scroll but the problem is the same. scrollTop never gets assigned.
let msg = document.querySelector(".messanger .messanger-body");
msg.scrollTop = msg.scrollHeight;
console.log(msg.scrollTop);
console.log(msg.scrollHeight);
My problem is msg.scrollTop never gets assigned what msg.scrollHeight is. It remains 0.
<div class="messanger">
<div class="messanger-header text-center">
<div class="row h-100">
<div class="col-sm-12 my-auto">
<h2 class="ml-2 text-white">Chat</h2>
<div class="float-left">
<base-button size="sm" class="ml-1" type="primary" #click="returnToPrev">←</base-button>
</div>
<div class="float-right">
<base-button size="sm" class="mr-1" type="primary">Send message</base-button>
</div>
</div>
</div>
</div>
<div class="messanger-body">
<div>
<!-- child component -->
<message-thread :user="msgThread.user" #scrolltobtm="scrollViewToBtm"></message-thread>
</div>
</div>
</div>
I have a CSS like so for the parent component
.messanger {
background: white;
position: fixed;
top: 0;
width: 310px;
height: 70vh;
float: right;
right: 10px;
overflow-y: scroll;
overflow-x: hidden;
margin-top: 20vh;
border-top-left-radius: 20px;
border: 2px solid red;
}
.messanger .messanger-header {
position: fixed;
height: 60px !important;
width: 310px !important;
background: #25457a;
color: #ffffff;
z-index: 99999;
border-top-left-radius: 20px;
}
.messanger .messanger-body {
margin-top: 65px;
}
For my child component i have
<div class="message-history mt-2">
<div class="message-history-content">
<div class="text-center mb-4">
<span class="badge badge-info">Thread title : {{threadTitle}}</span>
</div>
<div v-for="(eachMessage, index) in messages" :key="index">
<div :class="messagePosition(eachMessage.added_by)[0]">
<!-- classes msg_container and msg_container_send are dynamically added here -->
<span>{{eachMessage.message}}</span>
</div>
</div>
</div>
<div class="message-input">
<form class="form m-1" #submit.prevent="sendMessage">
<textarea v-model="model.message" class="form-control"></textarea>
<div>
<button class="ni ni-send"></button>
</div>
</form>
</div>
</div>
Child component css
.msg_container {
margin-top: auto;
margin-left: 20%;
margin-right: 10px;
border-radius: 15px;
background-color: #82ccdd;
padding: 10px;
position: relative;
}
.msg_container_send {
margin-top: auto;
margin-right: 20%;
margin-left: 10px;
border-radius: 15px;
background-color: #25457a;
padding: 10px;
position: relative;
color: #ffffff;
}
.message-input {
position: fixed;
bottom: calc(100% - 90%);
background: #ffffff;
z-index: 99999;
}
.message-history {
overflow-x: hidden;
overflow-y: scroll;
margin-bottom: 40px;
}
.message-history .message-history-content {
overflow: scroll;
}
form {
display: flex;
width: 300px;
}
form button.ni.ni-send {
margin-top: 3px;
border-radius: 50%;
border: none;
height: 34px;
width: 34px;
background: #25457a;
color: #ffffff;
}
textarea {
flex-grow: 1;
resize: none;
border: 1px solid #25457a;
}
form button:focus {
outline: 0;
}
Thank you for help in advance.
I added overflow property to the .message-history class, it still doesn't work. I believe my mistake resides in my styles. I'm not much of a CSS person.
The chat window scrolls when the mouse is used to scroll though.
msg.scrollTop could stay with 0 value because of at least two things.
First .messanger-body don't have defined overflow property.
Second as it is initial phase content of .messanger-body have not enough content to make scroll appear on the right side of div.
Please check those options.
I am using particle js as a background image.Now
<div id="particles-js"></div>
<div class="text">
<h1>Particles Background</h1>
</div>
I have to set position attribute of .text as absolute. Otherwise the section remains hidden. I don't seem to understand why others become hidden. I can't use absolute as it will break my code. Below is the css. Only if I set .text as position:absolute it will display
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
}
.text {
position: relative;
top: 50%;
right: 50%;
}
<div id="particles-js"></div>
<div class="text">
<h1>Particles Background</h1>
</div>
You are facing this issue possibly because of heighr z-index value for #particle-js
You can do it by either making position: absolute; for #particle-js and/or increasing the z-index for .text
To understand more about positions please check this link
You are using divs which by default have layout but with no contents have no size. You also position the right of one element so the text is off screen. You can then fix that by right align of the text in the div. Here I put two examples to help understand the differences, one with no content as you have and one with a right aligned text.
I put some borders on just so you have a visual of the elements.
#mycontainer{border:solid lime 1px;}
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
border: solid 1px blue;
}
.text {
position: relative;
top: 50%;
right: 50%;
border: solid 1px red;
}
<div id="mycontainer">
<div id="particles-js">cheese </div>
<div class="text">
<h1>Particles Background</h1>
</div>
</div>
Second example
#mycontainer {
border: solid lime 1px;
width: 100%;
height: 100%;
}
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
border: solid 1px blue;
}
.text {
position: relative;
top: 50%;
right: 50%;
border: solid 1px red;
text-align:right;
}
<div id="mycontainer">
<div id="particles-js">
</div>
<div class="text">
<h1>Particles Background</h1>
</div>
</div>
I got the following code:
<div data-role="content" height="100%" data-iscroll>
<div class="homebutton_zeile">
<a id="picture_home" href="#pictrues">
<div class="homebutton_all">
<div class="homebutton_name">Picture</div>
<div class="homebutton_picture">
<img src="images/picture.png" alt="image"
style="position: relative;">
</div>
</div>
</a>
</div>
</div>
</div>
My Classes of CSS
.homebutton_zeile{
width: 100%;
height: 30%;
}
.homebutton_all{
width: 30%;
height: 90%;
float:left;
margin-left: 2%;
margin-top:15px;
}
.homebutton_picture{
position: relative;
width: 100%;
height: 85%;
float: left;
background-color: #AAC7BD;
border: 1px solid black;
border-radius: 15px;
box-shadow:8px 8px 8px #666;
}
.homebutton_name{
text-align:center;
position: relative;
top:-10px;
width: 100%;
height: 15%;
margin-left: auto;
text-decoration:none;
color:black;
}
I am Using:
iscroll.js
jquery 1.8.2
jquery mobile 1.2.0
jqery mobile iscrollview.
And if its needed to know jstorage.js and fastclick.js
But the div above is not getting a height at the wrapper of iscroll. There is also a login before and this page will be shown automatically after the login after a $.mobile.changePage("#home"); function.
I tried to do it as first page before the function of changePage and it gave me the same effect. If i put a for example after the
<div data-role="content" height="100%" data-iscroll>&nbps;
The Wrapper get a height of 15px for the &nbps; but not for the images inside.
I have the following code:
<div data-role="content" height="100%" data-iscroll>
<div class="homebutton_zeile">
<a id="picture_home" href="#pictures">
<div class="homebutton_all">
<div class="homebutton_name">Picture</div>
<div class="homebutton_picture">
<img src="images/picture.png" alt="image"
style="position: relative;">
</div>
</div>
</a>
</div>
</div>
</div>
My Classes of CSS
.homebutton_zeile{
width: 100%;
height: 30%;
}
.homebutton_all{
width: 30%;
height: 90%;
float:left;
margin-left: 2%;
margin-top:15px;
}
.homebutton_picture{
position: relative;
width: 100%;
height: 85%;
float: left;
background-color: #AAC7BD;
border: 1px solid black;
border-radius: 15px;
box-shadow:8px 8px 8px #666;
}
.homebutton_name{
text-align:center;
position: relative;
top:-10px;
width: 100%;
height: 15%;
margin-left: auto;
text-decoration:none;
color:black;
}
I am using:
iscroll.js
jQuery 1.8.2
jQuery mobile 1.2.0
jQuery mobile iscrollview.
And if its needed to know jstorage.js and fastclick.js
But the div above is not getting a height at the wrapper of iscroll. There is also a login before and this page will be shown automatically after the login after a $.mobile.changePage("#home"); function.
I tried to do it as first page before the function of changePage and it gave me the same effect. If I put a for example after the
<div data-role="content" height="100%" data-iscroll>&nbps;
The wrapper get a height of 15px for the but not for the images inside.