When i followed another example I found that it doesn't work in my case. I use a Font Awesome icon and it somehow interferes with my CSS.
What steps should I take to make the paragraph of text equally indented (in pixels) from the left border and the icon?
The proposed solution that doesn't work in this case:
#left {
float:left;
width:7px;
}
#right {
width: 100%;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<div style="width:200px"><i class="fa fa-caret-up" id="left" style="display:block;vertical-align: top;margin-top:3px"></i><span id="right" style="margin-left: 0px;display:block">A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.</span>
</div>
You can use a positive margin-left on the containing div element, and a negative margin-left on the child img to move it to the left of the text, like this:
div {
width: 200px;
text-align: justify;
margin-left: 20px;
}
div .fa {
float: left;
width: 10px;
margin: 3px 0 0 -15px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<div>
<i class="fa fa-caret-up"></i>
A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.
</div>
There are a couple of ways to achieve this and Rory has shown you one. Another method would be to add a position property value of relative to main(parent element) as shown below, then a position property value of absolute to .fa. that way you can use left with negative value to position it as you desire.
Note: To have the text wrap around the icon, just float .fa to left and then use margins to adjust the spaces between the icon and text.
.main {
width: 200px;
margin-left: 50px;
position: relative;
}
.fa {
position: absolute;
left: -25px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<div class="main"><i class="fa fa-caret-up"></i><span style="margin-left: 0px;display:block;width:100%">A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.</span>
</div>
Related
I've already found many vlogs to align them vertically or horizontally, but what I am looking for is shown below in this image.
I wanted to take a magnifying glass and add different alphabets in it according to case.
https://i.stack.imgur.com/jEcMM.png
I think you just need to set the position propertie of the magnifying glass as relative and the alphabets inside as absolute and then handle the logic of showing each alphabet according to your case scenario
for example:
**html**
<div class="container">
<div class="glass">
<div class="alphabet">A</div>
</div>
</div>
**css**
.glass {
width: 100px;
height: 100px;
position: relative;
}
.alphabet {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
**javascript**
const alpahbetEl = document.querySelector('.alphabet')
let arrAlphabet = [A,B,C,D,E]
let CurrentIndex = Math.floor(Math.random() * arrAlphabet.length)
alpahbetEl.innerHTML= `<p>${arrAlphabet[CurrentIndex]}</p>`
https://playcode.io/970686
Create a div and give it a position relative.
Add the image of magnifying glass inside the div.
Add another element (eg, div) for the letter and give it a position of absolute. Then use top, left params to set them correctly inside magnifying glass.
When you set absolute position to an object it lets you position an object absolute to the last parent with relative position.
Please refer the playground link mentioned on top.
Solution: You Need to use position relative to parent element and position absolute to child element.
Index.html File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stackoverflow Answer By Swapnil</title>
<link rel="stylesheet" href="style.css" />
<link
href="../fontawesome-free-6.2.0-web/css/fontawesome.css"
rel="stylesheet"
/>
<link
href="../fontawesome-free-6.2.0-web/css/brands.css"
rel="stylesheet"
/>
<link
href="../fontawesome-free-6.2.0-web/css/solid.css"
rel="stylesheet"
/>
</head>
<body>
<i class="fa-solid fa-magnifying-glass icon"></i>
<p class="character">A</p>
</body>
</html>
Style.css:
.icon {
position: relative;
font-size: 200px;
}
.character {
position: absolute;
font-size: 50px;
font-weight: bold;
text-align: center;
top: 5px;
left: 70px;
}
I want to set a position for the text that will be steady/permanent regardless to text that will 'suddenly' appear above it.
You can see in the two screenshots below the text - "207653577" is moving down when the error message "Number not valid" appears.
How can I set the text height position to be permanent in the page ?
<div class="form">
<!-- Your input box -->
<!-- Your button -->
<p class="error-message">Error message</p>
</div>
You can add below styles for the div
.form {
position: relative;
// other styles
}
.error-message {
position: absolute;
bottom:-10px;
left: 50%;
// adjust bottom and left values to position correctly
}
Hope this solution will solve your problem
If you want to set the position fixed with respect to window use position: fixed. If you want to keep it fixed wrt to a another element, say, a div make the parent's position as relative and set the element's position as absolute to which you want to fix.
/* the javascript in this area is just for demonstration - you don't need any of this */
/* You just need the css for the error-message */
let er = document.querySelector('.error-message');
er.style.display = 'none';
setTimeout(() => er.style.display = 'block', 1000);
.container{
text-align: center;
width: 100vw;
}
.error-message {
width: 100vw;
padding: 10px 0;
text-align: center;
color: #f00;
position: absolute;
}
.number {
margin-top: 50px;
}
<div class='container'>
<h1> Here is a headline</h1>
<input />
<div class='error-message'>Number not valid</div>
<div class='number'>
123123123
</div>
</div>
I have a floating sidebar which is located on the right of the page which I want to be able to resize using a handle on the left of the container.
At the moment, when I drag the sidebar using the handle, it makes the sidebar wider when dragging right, and smaller when dragging left - I wan't it to do the inverse of this. i.e., dragging to the left increases the size of the sidebar etc..
I would prefer to not change the html structure and hopefully have a simple line of javascript to fix the problem - please help!
Here is a fiddle: https://jsfiddle.net/c01gat3/us8vktjq/
html
<div id="sidebar">
<div id="drag">
</div>
</div>
css
#sidebar{
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100% !important;
background-color: blue;
}
#drag{
position: absolute;
left: -10px;
width: 10px;
height: 100%;
background-color:black;
cursor:ew-resize;
}
Javascript
$('#sidebar').resizable({
minWidth: 100,
handles: { "w" : $("#drag") }
});
You're missing the associated CSS file.
Add the following reference to your HTML page:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
Adjust your HTML code to include the needed classes:
<div id="sidebar">
<div id="drag" class="ui-resizable-handle ui-resizable-w">
</div>
</div>
Working fiddle here: https://jsfiddle.net/us8vktjq/2/
Read more here: http://api.jqueryui.com/resizable/#option-handles
I developed, using ng-show and ng-hide, a box of description that pops up under a text after I click it.
But the problem is, the decription box is not shown exactly under the text, like here in the picture.
I want the description to be shown exactly under R2A.
This is my code:
HTML
<ion-content>
<div class="contenu">
<p>Salut</font><font size="4">, Welcome</font><font size="4">, Bienvenue chez </font>R2A<font size="4">...</font></p>
<div ><font class="boxed" ng-show="collapsed"size="4" >I am description</font></div>
<p> Nous sommes ton equipe de Welcomers, nous allons t'accompagner pour ta première journée.</p>
</div>
</ion-content>
CSS
.collapsed {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
.contenu .boxed {
display: inline-block;
padding:20px;
border-radius: 10px;
box-shadow: 5px 5px 10px #000;
background-color: #FBC02D;
}
First, transform the a into a button and you can put your boxed element inside your link.
Now, you can position the boxed element relative to the button element which contains the R2A text.
The boxedelement should have the position: absolute;, so it positions relative to the first ancestor which does not have the position static. Next, the button, which by default has the position static, should have the position: relative;. This means that it positions relative to its default position. If we don't specify top, left etc. the position remains the same. More here.
So, the html :
...
<button class="important-link" ng-model="collapsed" ng-click="collapsed=!collapsed">
<span>R2A</span>
<div class="boxed" ng-show="collapsed">
I am Description
</div>
</button>
...
And the css:
important-link {
position: relative;
background: none;
border: none;
}
.important-link span {
font-size: 30px;
color: #B9121B;
}
.boxed {
min-width: 100px;
position: absolute;
width: auto;
top: 50px;
padding: 20px;
border-radius: 10px;
box-shadow: 5px 5px 10px #000;
background-color: #FBC02D;
}
And here is a fiddle with the whole example.
PS. It's recommended not to use inline CSS in your HTML like style="font-size:180%; ..
Edit
So, if you don't want some kind of 'tooltip' effect there are two solutions.
In the first one, you add a margin-top to the next div, so that the description box doesn't overlap the text below. You can add it with ng-class on ng-style so the margin applies only if the description box is shown.
Second solution, inside the button element, both the text (R2A) and the description should be block elements, so that they position one under the other (block vs inline elements).
And then you remove the position: absolute from the boxed element (and you can also remove the position : relative; from the parent).
Here is the updated fiddle.
There are still some limitations in both solutions, so the one you choose depends on the final result.
You can also use JS to manipulate and position the elements of the DOM.
Just put both of these elements in a separate div element and add a break in between <br>:
<div>R2A
<font size="4">...</font></p>
<br>
<div>
<font class="boxed" ng-show="collapsed"size="4" >I am description</font>
</div>
</div>
Or put them in the same span.
You may have to fiddle around with the margins as well.
I want to implement a button that adds a X number of elements next to each other (horizontally), but lets say everything should look centered, so the first div should appear in the middle, but if I clic again, the second div should appear next to the first one, but they both must look equally centered, and so on.
I really don't know if I explained myself and thanks in advance.
Center-align the container of the divs, and display the divs inline.
$('.newDiv').on('click', function() {
$('.container').append('<div class="test">test</div>');
});
.container {
height: 30px;
width: 100%;
background: aqua;
text-align: center;
}
.test {
display: inline;
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="newDiv" href="#">add div</a>
<div class="container"></div>