HTML CSS trying to create an input field which appears over text - javascript

I am working on creating a project in which there are multiple cards created with bootstrap. Each card has a header, a body, and a footer. When the card is clicked on I want to an input field to appear in the header, footer, and body. This input field should appear over the current text.
I have no issue toggling the class, however I am struggling to get my input fields to line up over the text.
Here is the HTML structure:
`<div class='card-deck col-3' id='deck'>
<div class='card grow'>
<div class='card-header par'>
<h3 class='target'>${tasks.task}</h3>
<input id='updateTask' placeholder='Task'>
</div>
<div class='card-body par'>
<h6 class='target'>Due by: ${newDate}</h6>
<input id='updateDate' placeholder='Date'>
</div>
<div class='card-footer par'>
<h6 class='target'> Priority: ${tasks.priority}</h6>
<input class='update' id='updatePriority' placeholder='Priority'>
</div>
</div>
</div>`
Here is my JS to toggle the classes:
let card = $(this)
card.children('.par').children('.update').toggleClass('hidden');
card.children('.target').toggleClass('remove');
Lastly here is the CSS I currently have:
.par{
position: relative;
}
#updateTask, #updateDate, #updatePriority{
position: relative;
z-index: 999;
}
.hidden{
display: none;
z-index:-999;
}
I set the class 'par' which houses each set of inputs and text to relative.
Then I set the input fields to absolute. I have tried many combos of positioning and div restructuring but I have not been able to successfully stack my input field over its respective text.
Unfortunately the JSfiddle does not run because I am using bootstrap in my project.

We gonna use the funcion each, for each element we gonna apply the call "toggleClass".
$('#deck input').each(function(index, element){
$(element).toggleClass('hidden');
});
Just get all .target from #deck and remove it.
$('#deck .target').remove();
About your class, .hidden display:none will be good but the z-index property cannot be used without the position property. (only works on positioned elements (position:absolute, position:relative, or position:fixed) https://www.w3schools.com/cssref/pr_pos_z-index.asp )

Related

React JS -> Why does my div ignore the elements I'm mapping over?

So I've created a div and inside of that div I am mapping over some lements that are contained within my wishlist. I want that div to have borders all around the elements I've mapped over but instead it, apparently, stays empty even tho I don't think it should be. Here is the relevant code:
<div className='wishlistWrapper'>
{productsInWishList.map(product=>
<div className='productsWishListWrapper'>
<p className='productName'> <strong>{product.name}</strong>
<span>
<BsX className='removeProduct' size={25}
onClick= {()=>removeFromWishList(product)}/>
</span>
</p>
<img className='productImage' src={product.image}/>
<p className='productPrice'> <strong>{product.price}</strong> </p>
</div>)}
</div>
I've fixed the problem, so basically I had display: inline-block and float: left at the same time-> removing the float: left and changing the display to display:inline-flexbox solved everything

How to fit text properly inside a div with overflow: hidden?

I'm having problems with the text inside a div with overflow: hidden.
The div is a dropdown that shows another div containing an image and text. The dropdown works with javascript editing height. There is also a problem; once in a while when I click on the drop button, it takes two clicks for it to work, I don't know why.
<div class="dropDiv">
<strong class="divTitle">Title</strong>
<div class="dropDownBtn" onclick="dropDown()"></div>
<br>
<div class="heroInfoDiv">
<img height="100%" width="20%" src="Media/image/img.png">
<div class="textHolder">If this text is too long, it dissapears.</div>
</div>
</div>
At first I tried having the div holding the text as a p-element, but changing it to div with any kind of CSS on it didn't work. What I want to happen is for the text to obey the rules of like any normal container, where it breaks lines automatically.
Here is a jsFiddle showing what is happening:
https://jsfiddle.net/56oypcbj/5/
Remove the float: left form your .textHolder class.
.textHolder {
padding: 0px;
}

HTML - retrieve the max possible width of an inline-block

I'm looking for a way to retrieve, in javascript, the max possible width of an HTML element with display: inline-block.
My goal is to insert some elements in a page generated by a CMS.
I need the max possible width to adjust the content to be inserted in it.
Example:
HTML:
<...>
<div class="ib">
<div class="b">
<div class="b" id="my_content">
...
<div>
<div>
</div>
<...>
CSS:
.ib {
display: inline-block;
}
.b {
display: block;
}
I can only manage the element "my_content" and it's content. The parent elements are generated by the CMS, and I cannot change anything.
Using jQuery is ok.
[EDIT]
Here's a jsfiddle for a better explaination.
Before inserting content in #my_content, I need to know the available width.
If there's no content in #my_content, I get a width of 0, even if I set width:100% and max-width:100%.
The CMS currently generates this structure. As I don't have any control on this, it may change in the future.

toggle class content on click from nav

I have a simple page with 15 elements in the Nav bar (only 4 in the jsfiddle example to keep the code short).
I have a javascript that moves the border-bottom display on click on the nav bar elements but I would also like the content of the div underneath to change based on which nabber item is clicks.
This is the jsfiddle.
Ive tried getElementByID but I somehow cant seem to change the class under my #tabs-content div...
I would like a javascript loop that changes the content of each section element's class from hide to show or show to hide depending on what the content is.
This is the o'clock event in my
<li class="tab-current"><span>Dashboard</span></li>
and I would like it to change the class from hide to show for id=section2 and from show to hide for section2:
<div id="tabs-content">
<section id="section1" class="show">
<p>1</p>
</section>
<section id="section2" class="hide">
<p>2</p>
</section>
</div>
Any ideas please?
Cheers,
M.
Is this what you are looking for? Since you have the id of each section in the href you can pull that to load the appropriate one:
JS
var currentTab = $(this).find("a").attr("href");
$(currentTab).show().siblings("section").hide();
Change CSS (unless you want the elements to take up space on the page its better to set to display: none):
#tabs-content section.show {
display: block
}
#tabs-content section.hide {
display: none;
}
JSFIDDLE

HR tag stays hidden while containing div is shown with jquery

I have a hidden div which I reveal with the jquery fadein() method:
$("#panel").fadeIn("slow");
and here's the html:
<div id="panel" style="display:none;">
<hr/>
<p>text</p>
<button onclick="cancel()">cancel</button>
</div>
The text and the button within the panel is shown properly when the method is called but the hr stays hidden. Its display property is none according to firebug.
Why the HR is not shown together with the other elements? It's jquery 1.3.2
I copied your markup and jQuery, and it fades in fine for me. However, if I add the following CSS rule, it does not fade in correctly...
hr { display: none; }
So you must have this rule somewhere. Remove it and your fade will work as expected.

Categories