How to get the width of an element which has inherit-width? - javascript

I have a responsive website. Also I have some nested elements which used percent (%) width for them. Now I want to get the width of a child-element and set it as width of another element.
Note: I can get the width of that element which I need to it and set it to another one using JavaScript (something like this: $('.children')[0].getBBox().width;). But I want to know, is it possible to I do that using pure-CSS?
Here is my HTML structure and CSS codes:
#grandfather {
width: 70%;
border: 1px solid #666;
padding: 5px;
}
.father {
width: 80%;
border: 1px solid #999;
padding: 5px;
}
.children {
width 90%;
border: 1px solid #ccc;
padding: 5px;
}
.follow-width {
position: absolute;
border: 1px solid #ccc;
padding: 5px;
/* width: ? */
}
<div id="grandfather">
<div class="father">
<div class="children">how to get the width of this element?</div>
</div>
</div>
<br>
<hr>
<br>
<div class="follow-width">
this element needs to the width of div.children
</div>

No you cant do this in CSS only.
But you in Internet Explorer previous to version 8 it was possible:
width: expression(document.getElementById("grandfather").style.width);
#grandfather {
width: 70%;
border: 1px solid #666;
padding: 5px;
}
.father {
width: 80%;
border: 1px solid #999;
padding: 5px;
}
.children {
width 90%;
border: 1px solid #ccc;
padding: 5px;
}
.follow-width {
position: absolute;
border: 1px solid #ccc;
padding: 5px;
width: expression(document.getElementById("grandfather").style.width);
}
<div id="grandfather">
<div class="father">
<div class="children">how to get the width of this element?</div>
</div>
</div>
<br>
<hr>
<br>
<div class="follow-width">
this element needs to the width of div.children
</div>

Related

remove tooltip transparency

I have one icon. When you hover over the icon with the cursor, the tooltip opens. But when the tooltip is opened, it appears in the input on the back.
Here is the problem;
How can I solve this problem?
html
<div className="installmentinfo__container">
<div className="installmentinfo">
<div className="column">
<div className="installmentnumber" >{(i + 1).toString()}</div>
<div className="installmentdate">{billDate}</div>
<div className="installmentamount">{e.amount} {e.currency}</div>
</div>
</div>
</div>
css
.installmentinfo__container {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
position: absolute;
background-color: white;
top: 210px;
margin: auto;
transform: translateX(-280px);
padding: 0.3em;
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px ;
}
}
}
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.
So if you don't have any other z-indexes event 9 will do the job :
.installmentinfo__container {
z-index: 9; ..

How to insert div after other div with if else condition

I want to move div after another div, if outer div's width is less then 800
$(function() {
if ($('.main').width() < "800 px") {
$(".one").insertBefore($(".two"));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main" style="overflow: hidden; border:solid 1px red; text-align: right; ">
<div class="two" style="background-color: #ccc; margin: 2px; padding: 10px; float: right; width:500px;">buttons</div>
<div class="one" style="background-color: #ccc; margin: 2px; padding: 10px; float: right; width:300px;">dropdown</div>
</div>
jQuery doesn't understand the string "800 px", it requires just the number 800.
Also, like others mentioned, try to keep your styles in css and not inline if you're using classes, it's easier to follow along with the code and edit the code in the future.
$(function() {
if ($('.main').outerWidth(true) < 800) {
$(".one").insertBefore($(".two"));
}
});
.main {
overflow: hidden;
border: solid 1px red;
text-align: right;
}
.two {
background-color: #ccc;
margin: 2px;
padding: 10px;
float: right;
width: 500px;
}
.one {
background-color: #ccc;
margin: 2px;
padding: 10px;
float: right;
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="two">buttons</div>
<div class="one">dropdown</div>
</div>

CSS Div height not expanding to fit content or wrapping content

I am having problems getting the content in a div (or its value) to wrap around inside and having the div's height adjust to the contents.
The top one a container, message-box. There are three divs inside like in the picture attached. I need to have divs each-message and each-message-content adjust its height to fit the contents inside. I have looked at many posts in this site and tried many combinations of overflow:hidden and height:auto, but they mostly end up making the each-message-content scroll sideways, and am at wits end.
How can I achieve this?
**** Updated with HTML *****
<div className="message-box">
<div className="each-message-box">
<div className="each-message">
<div className="each-message-date">Date</div>
<div className="each-message-content">ContentContentContentContentContentContentContentContentContentContent</div>
</div>
</div>
</div>
</div>
.each-message-box {
width: 100%;
display: block;
overflow: auto;
height: auto;
margin: 1px;
}
.each-message {
width: 270px;
height: 100px;
margin: 2px;
border: 1px solid #ccc;
overflow: hidden;
height: auto;
}
.each-message-date {
border: 1px solid #ccc;
font-size: 10px;
color: #ccc;
text-align: left;
}
.each-message-content {
width: 100%;
border: 1px solid #ccc;
text-align: left;
border-radius: 10px;
height: auto;
}
Not very elegant to break words like this, but if that's what's needed. btw apart from className, there's an extra in your HTML.
EDIT: Ignore the comment about className - react project comment added after this answer was posted.
.each-message-box {
width: 100%;
display: block;
overflow: auto;
height: auto;
margin: 1px;
}
.each-message {
width: 270px;
height: 100px;
margin: 2px;
border: 1px solid #ccc;
overflow: hidden;
height: auto;
word-break: break-all;
}
.each-message-date {
border: 1px solid #ccc;
font-size: 10px;
color: #ccc;
text-align: left;
}
.each-message-content {
width: 100%;
border: 1px solid #ccc;
text-align: left;
border-radius: 10px;
height: auto;
}
<div class="message-box">
<div class="each-message-box">
<div class="each-message">
<div class="each-message-date">Date</div>
<div class="each-message-content">ContentContentContentContentContentContentContentContentContentContent
</div>
</div>
</div>
</div>
Create a function to record in real time the number if char entered and to change the width of the the container accordingly using javascript.
if your CSS div height not expanding to fit content or wrapping content.
Just use a simple trick.
before the closing tag of the message-box div add a div with class cl
<div class="message-box"><div class="cl"></div></div>
Now in your Css Give this style .cl{clear:both;}
by using this if you have height auto on the div it will still wrap the content.I hope it will work for you.

Combining borders after showing data

I am attempting to combine a border for a title and description. The title shows upon page load, but once the title is clicked its description appears below it in its own border. I want those borders to combine when the description is showing.
I created a snipet to show what I have so far.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.toggle(500);
});
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
I am trying to make it do something like this:
http://royalwoodfloor.com/services/
Does anyone know what I should do?
Image
Just change your css like this
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0 0 0;/* update the margin */
}
here is the example link the example link
Updated the code snipet
Try something like this. Slightly changed your HTML structure and css.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title"><span>Floors</span>
<div class="service_description"><span>The best floors!</span></div>
</div>
</div>
</div>
CSS
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
width: 30%;
}
.service_title span{
padding:8px 8px 8px 8px;
display:inline-block;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border-top: 1px solid black;
}
.service_description span{
padding:10px
}
Separate from the animation transition not being the same as the example, this fixes the margin issue:
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
margin-top: -16px;
}
See it working here

Button inside a box with css,html and javascript

Hey guys i have maded an outerbox which contains an innerbox .The code is
<html>
<link rel="stylesheet" type="text/css" href="styles.css">
<body>
<div id="boxed">
<div id="anotherbox"> </div>
</div>
</body>
</html>
the css file
#boxed {
width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;
visibility: visible;
}
This works fine..
But what i need is that i want to display a simple button inside the inner box.I have tried some javascript code but it dint worked out.
Hope you guys can help me ..P:S ..i dont need a jquery solution..Thanks
Is this what you are looking for?
#boxed {
width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;
visibility: visible;
}
<div id="boxed">
<div id="anotherbox">
<input type="button" value="inside" />
</div>
</div>
You can achieve this using a button, as follows:
The HTML:
#boxed {
width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;
visibility: visible;
}
#boxed:hover #anotherbox > button {
width: 16px;
padding: 30px;
border: 5px solid gray;
margin: 0;
visibility: visible;
cursor:pointer;
}
<div id="boxed">
<div id="anotherbox">
<button>Button</button>
</div>
</div>

Categories