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.
Related
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 )
This is what my webpage looks like on my computer
What I am trying to do is:
move my content (buttons, table, dropdown) to the center of the webpage (dynamically and automatically depending on the screen size).
Have the webpage fit properly on mobile browsers.(i.e. have the content take up the majority of the screen space)
I am a bootstrap and css noob. The following is a jsFiddle with similar code to what my webpage has: https://jsfiddle.net/zpvrspaq/18/
How would I go about just centering one of the rows, such as:
<div class="row no-gutter">
<div class="col-xs-1"><h5 class="text-center">Your grade</h5></div>
<div class="col-xs-1"> <h5 class="text-center">% of grade</h5</div>
</div>
<div class="row no-gutter">
<div class="col-xs-1"><input type="text" class="marks form-control"></div>
<div class="col-xs-1"> <input type="text" class="grades form-control"></div>
</div>
Anything to point me in the right direction would be great.
Try not to rely too much on Bootstrap's rows and columns for sizing things like tables. col-xs-[number] should really be limited to determining the way elements line up or break onto new lines when the viewport is expanded or shrunk.
I've given #table-of-grades a display type of table and auto margins to center it, and added a new class, .table-cell, to float the cells of the table within the width of #table-of-grades
#table-of-grades {
display: table;
margin: auto;
}
.table-cell {
width:50%;
float:left;
}
I also moved everything within the #table-of-grades container, so they will fill the width of that element when the viewport is shrunk or expanded. Also notice the change in markup, i.e. I removed the rows and columns in the table itself to create a layout that doesn't rely on bootstrap's rows and columns.
https://jsfiddle.net/Lzvz60u1/
Try putting the container in a and then use a margin-left:auto; and margin-right:auto; to center the div
DEMO
It would be very simple using flex box.
here's the gist of the demo
.container{
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
html
<div class="container">
<div class='content'> //you can size this anyway you want
put anything you want here,
</div>
</div>
I'd like to hide a column in css for only one specific page and i saw several options for it, but every one uses page id. What if two pages have the same id and the differences are only in the class definitions?
I want to use the 'display none' tag only on /Page 2/.
Here is the example:
/Page1/
<body id="body" class="bootstrap-body page-body home_body body-admin-logged" role="document">
/Page 2/
<body id="body" class="bootstrap-body page-body list_page_body category_list_body body-pathway-top body-admin-logged" role="document">
/Column - Page2/
The html code
<aside class="col-md-3 col-sm-12 col-xs-12 column-left">
/Column-Page2/ css code
.column-content-left, .column-left {
float: left;
}
If I use the display none in the css above, it will works perfectly. The problem is that it reflects on /Page1/ too.
Is it possible to do that in css or javascript, without accessing the html?
You can select the body css too like this:
body.list_page_body .column-content-left, body.list_page_body .column-left {
display: none;
}
This should only trigger for the body with the class .list_page_body (or you can use another class specific to that page.
Use a class unique to the second page, for example list_page_body and in your css
.list_page_body .column-content-left, .list_page_body .column-left
{
display:none;
}
It is possible in javascript. Just get the url of the page using window.location.href and add a class or something if it's the page you want the special treatment on.
The classes that distinguish page 2 from page one are: list_page_body category_list_body and body-pathway-top. So you can use any of them to implement your CSS on page 2 without effecting page 1.
Example:
body.category_list_body .column-left{
display:none;
}
You can do it with jQuery by aiming the url path
jQuery(function ($){
var pathname = window.location.pathname;
if (pathname == "/page2/"){
$(".column-class").css("display","none");
}
})
If page 2's body tag has a unique class, you can use the .parent .child {} CSS selector. From what you've provided:
body.list_page_body .column-content-left, body.list_page_body .column-content-left {
display: none;
}
Just so you know, with parent / child selectors, you can use either .parent .child or .parent > .child. The former would select all instances within .parent that the .child class is used in the document:
<body class="parent">
<div class="child">
<div class="child">
</div>
</div>
</body>
In the example above, .parent .child {} would apply rules to both the initial .child as well as the nested .child.
The latter .parent > .child applies to only direct descendants. Using the same example above, only the initial .child element would be selected by .parent > .child. The nested .child wouldn't be affected.
I am displaying every word in a sentence in separate div using inline-block with max-width of 120px. When I try to increase the font size on parent div my inline-block of div get overlaps due to large font size.
Is there any way to programmatically calculate the max-width required for inline-block of div to be used after increasing the font size?
Here is sample code snippet:
jQuery('.btnIncFont').click(function(){
jQuery('.parentDiv').css('font-size',parseInt(jQuery('.parentDiv').css('font-size'))+2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btnIncFont">+</button>
<div class="parentDiv">
<div style="display:inline-block;max-width:120px">This is a test1</div>
<div style="display:inline-block;max-width:120px">This is a test2</div>
<div style="display:inline-block;max-width:120px">This is a test3</div>
<div style="display:inline-block;max-width:120px">This is a test4</div>
</div>
Keep pressing the + button and at certain stage you will find that the div is overlapping each other. I want to fix this with calculation for my max-width to attain the exact ratio according to initial size 120px after incrementing font-size.
When you increase the font-size make sure you are also increasing the line-height.
I don't think you want to go down the road of programmatically setting the width of each div, let the CSS do it for you. I'm assuming you aren't already doing that, if so, try setting it to auto. Lastly, I may suit you better.
Sorry for the vague answer but if you post the code I'll give you a more specific one.
Your CSS:
.v {
word-wrap:break-word;
display:inline;
font-size:140px;
border:2px solid blue;
max-width:120px;
}
and HTML:
<div>
<div class="v">This</div>
<div class="v">is</div>
<div class="v">a</div>
<div class="v">test</div>
</div>
Added the break-word css option. Here is the full fiddle: http://jsfiddle.net/eugensunic/76KJ8/74/
I think I have got a solution. Never thought that it would be as much simple as using just a span inside child div to get the element width after increasing font-size. Then replacing max-width on child div with span width value. It will gives you the exact ratio based on your initial max-width value of 120px after incrementing font-size and at the same time also take care to wraps the div in case it exceeds the width of parentDiv.
Here is code snippet:
jQuery('.btnIncFont').click(function() {
jQuery('.parentDiv').css('font-size', parseInt(jQuery('.parentDiv').css('font-size')) + 2);
var spanWidth = parseInt(jQuery('.parentDiv div span').css('width'));
jQuery('.parentDiv div').css('max-width', ((spanWidth < 120)?120:spanWidth) + 'px');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btnIncFont">+</button>
<div class="parentDiv">
<div style="display:inline-block;max-width:120px"><span>This is a test1</span>
</div>
<div style="display:inline-block;max-width:120px"><span>This is a test2</span>
</div>
<div style="display:inline-block;max-width:120px"><span>This is a test3</span>
</div>
<div style="display:inline-block;max-width:120px"><span>This is a test4</span>
</div>
</div>
use width auto....
`<div>
<div style="display:inline-block;width:auto">This</div>
<div style="display:inline-block;width:auto">is</div>
<div style="display:inline-block;width:auto">a</div>
<div style="display:inline-block;width:auto">test</div>
</div>`
I have an HTML structure below:
<div style="overflow:auto;" id="wrap">
<div id="text">content</div>
<div id="a"> </div>
</div>
Is it possible to have the overflow only take the size of #text into account and ignore #a, even if #a overflows further? I can't put #a outside the wrap DIV. I'm fine with using javascript if that is the only option.
EDIT: Here is an example of what I have, to show what I'm asking more clearly: http://jsfiddle.net/mAHMb/
Maybe this could help?:
Please try adding overflow-y:auto; to #text then set its heigth, remove #wrap height and you should be able to scroll #text without scrolling #a.
Here's the jsfiddle sample: http://jsfiddle.net/R4QWP/