This question already has answers here:
How to give border to any element using css without adding border-width to the whole width of element?
(12 answers)
Closed 4 years ago.
I have the following div style
.myDivStyle{
width: 0px;
position: absolute;
z-index: 1;
top: 0;
overflow-x: hidden;
}
which is applied to my div
<div id="myDiv" class="myDivStyle">...</div>
which looks perfect, and the following script returns 0px, again perfect.
alert($("#myDiv").css("width"));
But if I add a border to that style such as :
border: 1px solid #cccccc;
then there is a small 2px wide bod on the screen, and the js code above return a width of 2px.
How can I get the bordered div to not be visible on the screen and return a 0px width?
The show/hide of the div is controlled by javascript.
I know I can use display:none; and turn it on again with the javascript but I want to see if it can be done by adjusting the style?
alert($("#myDiv").css("width"));
.myDivStyle {
width: 0px;
position: absolute;
z-index: 1;
top: 0;
overflow-x: hidden;
border: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" class="myDivStyle">...</div>
You can use outline style. Read here for different between outline and border
From: https://www.tutorialrepublic.com/css-tutorial/css-outline.php
Outlines do not take up space, because they always placed on top of the box of the element which may cause them to overlap other elements
on the page.
Unlike borders, outlines won't allow us to set each edge to a different width, or set different colors and styles for each edge. An
outline is the same on all sides.
Outlines don't have any impact on surrounding elements apart from overlapping.
Unlike borders, outlines don't change the size or position of the element.
Outlines may be non-rectangular.
You can use:
Box-sizing: border-box;
So that your width of your css width also controls your border.
For the Javascript try using:
$(id).innerWidth(); or $(id).outerWidth();
and see what fits your expectations.
Related
This question already has answers here:
CSS Cut out circle from a rectangular shape
(3 answers)
Closed 2 years ago.
I've been trying to find the best way to do this aside from using pngs with transparency.
The designer for a site I'm building cut these circles out of every section on the site as part of the overall theme. I love the look of it, but implementing it in a way that would happen automatically is not obvious.
I tried some SVG masking, but it would not show the background behind it. The images ideally could be replaced by a site editor without having to cut this part out of each image. Is there a css, javascript, or canvas way to to what I have in mind?
Also, there are background images in each section. Not just solid colors and gradients.
Click Here to View Example Image
The CSS is straight forward positioning of three <div>s inside a wrapper element (in this case a <section>
The two outer <div>s are the bars, while the inner div creates the illusion of the half-circle. This is done simply by providing a border radius of twice its width.
Once the "circle" is centered and the z-index set, you have your solution.
I've leave putting the arrow into the circle up to you.
section {
z-index: 50;
position: relative;
width: 100vw;
height: 250px;
}
div {
z-index: 25;
position: absolute;
height: 50%;
width: 100%;
}
div:nth-child(1) {
background-image: url(https://via.placeholder.com/160?text=TOP);
}
div:nth-child(2) {
background-image: url(https://via.placeholder.com/160/0000FF?text=CENTER);
background-position: center;
z-index: 999;
top: 75px;
left: calc((100vw/2) - 50px);
width: 100px;
height: 100px;
border-radius: 200px;
}
div:nth-child(3) {
background-image: url(https://via.placeholder.com/160/FF0000/FFFFFF?text=BOTTOM);
bottom: 0;
border: 1px solid black;
}
<section>
<div></div>
<div></div>
<div></div>
</section>
I'm working on a PWA for a chromebook(schools) and I'm wondering what the most best way to have dynamic sizing of dialog boxes.
I have methods set up for each HTML element that we can use and pass the values we need for this (input/checkbox/label) etc - so I have multiple dialog boxes with the same classes but required different sizing.
I have some basic stuff like
.modal {
min-width: 390px;
max-width: 600px;
display: none; /* Hidden by default */
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 0px;
border: 1px solid #888;
width: 40%; /* Could be more or less, depending on screen size */
border-radius: 6px;
font-size: 14px;
}
I also thought of adding a width value to send when creating the dialogs but I don't like that solution. Something that gets the width of the largest element and adds 10px padding to that or something?
Is there something that I'm missing that could be an easy solution? (It's also ideally vanilla javascript)
If I've understood your question correctly, you are trying to create a class for modal popup windows that will be a different size depending on the content inside, and that you can toggle visibility on using Javascript.
Perhaps too simple of a solution, but have you considered using padding as a replacement for the min-width value in your css?
Something like margin: 0; padding: 0.5vw 195px; /* instead of min width, use padding */
This will set the width of the element to 390px(195px padding-left, 195px padding-right) + width of html content, (see codepen below).
https://codepen.io/KXNG420/pen/eYdvZgN
As for setting a max-width you could add in a quick check when you are toggling the visibility of the modal window.
Hopefully this at least helps a little bit.
I know a lot of responsive design uses percentage width and absolute positioning to adapt to screen widths of different media types. But what if we can take advantage of the float right css style that is not commonly used but highly cross browser compatible?
Demo: http://jsfiddle.net/3A89Q/48/
.wrapper { width: 70%; margin: 0 auto; }
div, span { display: block; float: left; position: relative; }
.wrapper > div { width: 60px; }
.b1 { background-color: blue; height: 132px; }
.b2 { background-color: red; height: 88px; }
.b3 { background-color: green; height: 44px; }
.test { background-color: black; max-width: 160px; min-width: 100px; float: right; border: 2px solid black; }
.test div { width: 16px; height: 16px; background-color: yellow; margin: 2px; }
<section class="wrapper">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<span class="test">
<div></div>
<div></div>
<div></div>
</span>
</section>
My idea is to shrink a right floating element to a minimum width without using percentages. This shrinking process should only occur on the condition of neighboring elements restricting the available space of the element when the window width is reduced in size. If the available space available to said element is not restricted, the element will increase its width to a max length. So virtually the element has a max and a min width governing a given range of flexibility in size. (Note: This range of width can be easily demonstrated by shrinking the results window to a small size in the jsfiddle demo I have linked above.)
At this time if the right floating element merges into a left floating element, it will float down underneath the left floating element maintaining its max width.
My desired result is to have this right floating element shrink to its minimum size before floating down under its neighbor. Once the element reaches its min-size it will drop down under its neighbor and in turn increase its width to fill in the remaining space up to its max width, and begin to repeat the process of adapting to its available space while floating right.
My question is, can my desired results be accomplished by just using css / css3? If not, is there a JavaScript / jQuery plugin that performs this functionality?
I have linked a jsfiddle demo above to help you understand and utilize a solution to this idea.
Thank you for your help.
Have you though about using CSS media tags to target different screen sizes?
here is a reference link.
http://webdesignerwall.com/tutorials/css3-media-queries
A jQuery approach would be using a resize event handler, and adjusting the CSS accordingly with jQuery. This will be for only when the browser window has been resized. Alternative during document when ready, you can calculate widths and heights dynamically.
see this stack solution Using jQuery To Get Size of Viewport
here is another reference link
http://api.jquery.com/resize/
I have a complex HTML application, so unfortunately cannot really provide a code sample. We are trying to get the div (highlighted in red) to fill the remaining vertical space (see image).
The application consists of a header (in black), a sidebar on the left which can be dismissed or resized (note: the horizontal components resize correctly). To the right of the sidebar is another div (mainDiv). mainDiv contains a div at the top for the controls, and a div underneath it for the table of data (highlighted in red).
This table can potentially contain lots of data, so it needs its own scrollbar if the data doesn't fit on the screen.
We just want the table to fill all of the available horizontal and vertical space. We just can't seem to make it work.
We have created a jsfiddle example to demonstrate our layout as best we can. This can be seen here. We just want this div (in jsfiddle the div is called "tablewrap") to take up all of the remaining space.
Code (from jsfiddle) is as follows:
html
<div class="header">Header</div>
<div class="sidebar">This is the sidebar</div>
<div class="tablewrapper">
<div class="tableheader-controls-etc"></div>
<div class="tablewrap">table</div>
</div>
css
.header { height: 50px; background:black; color:white; }
.sidebar { height:100%; position:fixed; width 200px; background:gray; color:white; }
.tablewrapper{ float:right; width:75%; border:1px solid; margin-top:30px; margin-right:30px;}
.tableheader-controls-etc { height:150px; background:blue; color:white; }
.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto;}
If anyone can provide a solution that would be great. We would prefer CSS but can cope with Javascript.
Thanks,
Phil
The trick is to set position: absolute, then adjust the top, bottom, left and right properties as needed. See fiddle and explanation.
.tablewrap {
position: absolute;
top: 240px;
bottom: 0;
left: 150px;
right: 40px;
height: auto;
width: auto;
...
}
You can try this:
.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto; min-height:300px}
(Set the min-height as you want)
Well, it's time to say what you probably don't want to hear hehe: you can't do this with CSS.
You have to use javascript in order to find out two things:
Viewport height
Controls div height
Once you know those two heights, you can set your table height to:
finalHeight = viewport - (controls+header+footer)
If header and footer have also dynamic heights, use javascript to calculate them.
You will also need to recalculate this height on window resize. And of course your layout won't work if javascript is disabled.
What is the easiest way to align a div whose position is relative horizontally and vertically using CSS ? The width and the height of the div is unknown, i.e. it should work for every div dimension and in all major browsers. I mean center alignment.
I thought to make the horizontal alignment using:
margin-left: auto;
margin-right: auto;
like I did here.
Is this a good cross browser solution for horizontal alignment ?
How could I do the vertical alignment ?
Horizontal centering is only possible if the element's width is known, else the browser cannot figure where to start and end.
#content {
width: 300px;
margin: 0 auto;
}
This is perfectly crossbrowser compatible.
Vertical centering is only possible if the element is positioned absolutely and has a known height. The absolute positioning would however break margin: 0 auto; so you need to approach this differently. You need to set its top and left to 50% and the margin-top and margin-left to the negative half of its width and height respectively.
Here's a copy'n'paste'n'runnable example:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2935404</title>
</head>
<style>
#content {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px; /* Negative half of width. */
margin-top: -100px; /* Negative half of height. */
border: 1px solid #000;
}
</style>
<body>
<div id="content">
content
</div>
</body>
</html>
That said, vertical centering is usually seldom applied in real world.
If the width and height are really unknown beforehand, then you'll need to grab Javascript/jQuery to set the margin-left and margin-top values and live with the fact that client will see the div quickly be shifted during page load, which might cause a "wtf?" experience.
"Vertical centering is only possible if the element is positioned absolutely and has a known height." – This statement is not exactly correct.
You can try and use display:inline-block; and its possibility to be aligned vertically within its parent's box. This technique allows you to align element without knowing its height and width, although it requires you to know parent's height, at the least.
If your HTML is this;
<div id="container">
<div id="aligned-middle" class="inline-block">Middleman</div>
<div class="strut inline-block"> </div>
</div>
And your CSS is:
#container {
/* essential for alignment */
height:300px;
line-height:300px;
text-align:center;
/* decoration */
background:#eee;
}
#aligned-middle {
/* essential for alignment */
vertical-align:middle;
/* decoration */
background:#ccc;
/* perhaps, reapply inherited values, so your content is styled properly */
line-height:1.5;
text-align:left;
}
/* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
#container .strut {
/* parent's height */
height:300px;
}
.inline-block {
display:inline-block;
*display:inline;/* for IE < 8 */
*zoom:1;/* for IE < 8 */
}
Then #aligned-middle will be centered within #container. This is the simplest use of this technique, but it's a nice one to be familiar with.
Rules marked with "/* for IE < 8 */" should be placed in a separate stylsheet, via use of conditional comments.
You can view a working example of this here: http://jsfiddle.net/UXKcA/3/
edit: (this particular snippet tested in ie6 and ff3.6, but I use this a lot, it's pretty cross-browser. if you would need support for ff < 3, you would also need to add display:-moz-inline-stack; under display:inline-block; within .inline-block rule.)
Check this Demo jsFiddle
Set following two things
HTML align attribute value center
CSS margin-left and margin-right properties value set auto
CSS
<style type="text/css">
#setcenter{
margin-left: auto;
margin-right: auto;
// margin: 0px auto; shorthand property
}
</style>
HTML
<div align="center" id="setcenter">
This is some text!
</div>
"If the width and height are really unknown beforehand, then you'll
need to grab Javascript/jQuery to set the margin-left and margin-top
values and live with the fact that client will see the div quickly be
shifted during page load, which might cause a "wtf?" experience."
You could .hide() the div when the DOM is ready, wait for the page to load, set the div margin-left and margin-top values, and .show() the div again.
$(function(){
$("#content").hide();
)};
$(window).bind("load", function() {
$("#content").getDimSetMargins();
$("#content").show();
});