I have a HTML code as follows;
<div>Content table with varying height</div>
<div id="buttons">
<TABLE>
<TBODY>
<TR>
<TD>2 buttons here....</TD>
</TR>
</TBODY>
</TABLE>
</div>
And there is a CSS defined as;
div#buttons{
position: absolute;
bottom: 1em;
left: auto;
}
Now there is an issue on the iPad Safari..i.e. The position of the buttons remain fixed/stick to the bottom of the screen...i.e. if the height of the content table above it increases, it kind of overlaps with the buttons at the bottom.
Is there any way by which I can avoid that overlap and instead have it positioned based on the dynamic height content above ?
Try with:
position: relative;
absolute
The element is positioned relative to its first positioned (not static) ancestor element
relative
The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
(source)
Relative allows you to adjust the element position relative to the "content above".
With position absolute in Ipad, or Iphone you need of position absolute in elemtent, and position relative inside father, but imporant to function in ipad and iphone is add left:0, or right:0;
Related
I want to use CSS grid to manage the layout of multiple forms. The goal is to use a two-column grid with the label elements in the left column and the input elements in the right column. The left column's width needs to be sized to fit the widest label, and the right column should take up the remainder of the space. This is the grid column template I'm using:
grid-template-columns: max-content 1fr;
The issue that I'm facing is that the input element will frequently exceed the width of the right column. Unfortunately, setting max-width to 100% on the input element does not constrain its size to the column's width. If I set the width to 100%, that does constrain the size, but as the responsive form gets wider, a 100% width on the input is too wide from a design perspective.
This is the markup:
<body>
<div class="container">
<label>This is label 1</label>
<input type="text" maxlength="100">
<label>This is label 2</label>
<input type="text" maxlength="100">
<label>This is label 3 which is a bit longer</label>
<input type="text" maxlength="100">
<label>This is label 4</label>
<input type="text" maxlength="100">
</div>
</body>
This is the CSS:
*, *::before, *::after {
box-sizing: border-box;
}
.container {
width: 300px;
/* width: 1300px; */
margin: 2rem auto;
background-color:lightblue;
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
grid-column-gap: 24px;
grid-row-gap:8px;
}
input {
padding: .5rem .5rem;
max-width:100%;
/* width: 12rem; */
justify-self: end;
}
This is a CodePen.
Q: How do I limit the width of the input to about 200 pixels and keep it flushed right? At the same time, as the form gets narrower, it should never exceed the width of the grid column.
.container input {min-width: 0;}
The line-height of a virtual item is set as element style by the agrid library. So I can't use a css class here.
I need to set a larger amount than 20px default.
The height of the ag-virtual-list-container is obviously calculated by this amount.
How to set another value to the line-height?
inside the sidebar ag-filter-tool-panel including 5 items:
<div class="ag-virtual-list-container" style="height: 100px;">
<div class="ag-virtual-list-item" style="top: 0px; line-height: 20px;"><label class="ag-set-filter-item">
I have a circular button with label texts "+" and "-". It's not properly aligned vertically.
I am already doing
button.contentVerticalAlignment = UIControlContentVerticalAlignment.center
Please help to align it to the centre (vertically).
The root cause of the problem is that the characters are not vertically aligned. Use a fullwidth plus sign and a fullwidth hyphen-minus instead.
Here are those characters for easier copy-pasting:
＋ －
Result:
Use display-flex on the button and use the value of line-height to position the plus or minus sign vertically within the button. Increase in line-height value moves the signs downward and and decrease in line-height value moves the signs upward. Thanks!
This answer is based on the practical behavior of concerned css properties to achieve vertical align of minus sign and plus sign inside button(I haven't tried for other elements like span or div but I believe it works the same, if not pardon my guess) upon increasing the font-size(to any extent) regardless of font-family used.
Use Case: Sometimes you want bigger buttons with a plus or minus sign inside it. But the font-size is too small for the button. As you increase the font-size of the button, the plus and minus sign fails to align vertically as was the case with me. That's when I came up with the following solution.
Note: I could't find a solution anywhere else, so I ended up with this solution. I am open to any say you have on the solution so feel free to leave some comments:)
/* common style */
button {
height: 50px;
width: 200px;
background: #216AFF;
color: white;
}
.minus {
font-size: 70px;
display: flex;
justify-content: center;
line-height: 35px;
}
.plus {
font-size: 50px;
display: flex;
justify-content: center;
line-height: 45px;
}
<button class="minus">-</button>
<br>
<button class="plus">+</button>
first of all: GREAT STUFF!!
SITUATION: The image loaded in my slider are smaller than the slides container. Using "$FillMode: 5" I can make sure that images have the right size to display within the slides-container, but they are centered.
Q: Is there a way to have them align to the right, so that i can display the caption to the left of it.
TRIED: using CSS to align the image: neither
#slides img { float: left !important };
nor
#slides img {
position: absolute !important;
right: 0px !important;
}
did the job.
A:
After some fiddling and around analyzing the actual sourcecode generated by the script i found out that
using #slides results in a coding error as the tag "" is duplicated (for whatever reason) and would therefor give 2 identical IDs, so better use ".slides" / ""
the following CSS does the job an aligns a smaller image to the right of the slide
.slides {
div {
img {
right: 0px !important;
left: auto !important;
}
}
Jssor slider will fill and align image (in following format) automatically according to $FillMode,
<img u="image" src="url" />
To fill image manually by your self, please remove u="image",
<img src="url" />
I'm working on some Google Web Toolkit Code that places an AbsolutePanel on top of an image. The way I'm doing this is to:
wait until the image is loaded (i.e. width/height are >0)
get the absolute coordinates of the image in the viewport using image.getAbsoluteLeft() and image.getAbsoluteTop
Set the position of the AbsolutePanel (a direct child of the RootPanel) to the same coordinates using RootPanel.get().setWidgetPosition(myPanel, imageAbsLeft, imageAbsTop);
This works in Chrome and IE. Strangely, though, Firefox always positions the AbsolutePanel "a few" pixels (I'd say between 1 and approx 10? But it varies from page load to page load) above the image. I'm clueless as to what's causing this. Any hints much appreciated!
A live example of this is here: http://yuma-js.github.com. If you click the "Add Annotation" there's a draggable box, which movement is constrained by the AbsolutePanel. You'll notice that the constraining works perfect for Chrome, but is off for FireFox.
Morning,
well, I did some research how I could overlay an image with a another object too, and found this article: How to overlay one div over another div.
Based on that I made a similar example using SVG and drawing example, where I draw a rectangle around a space station. What I can tell you is, that you don't want to mix pixel and percentage positioning, and if you can, you should use percentage positioning!
Hope this helps somehow.
Here is my example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>SVG Example</title>
<style>
html, body {
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 100%;
position: relative;
}
#navi,
#infoi {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#infoi {
z-index: 10;
}
#navi img {
}
</style>
</head>
<body>
<div id="container">
<div class="navi"><img src="http://www.bing.com/fd/hpk2/SpaceStation_ROW1605701719.jpg" width="100%" height="100%"/></div>
<div id="infoi"><svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="65%" y="40%" width="20%" height="30%"
fill="none" stroke="red" stroke-width="2"/>
</svg>
</div>
</div>
<p>This example draws a fullscreen image and places a fullscreen svg element above it. The svg element then draws a rectangle based on percentage sizes,
which is around the space Station. If the browser window resizes, the size of the drawn rectanlge changes as well, to always be on top of the space
station.</p>
<p>Resources for this example where the following links:</p>
<ul>
<li><a href="https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div" >How to overlay one div over another div</a>
<li><a href="http://de.wikipedia.org/wiki/Svg" >Wikipedia: Scalable Vector Graphics</a>
<li><a href="http://www.w3.org/TR/SVG/shapes.html" >W3C Recommendation: 9 Basic Shapes</a>
</ul>
<p>Image from: Bing.com, © StockTrek/White/Photolibrary</p>
</html>