I am implementing SVG-edit into my website. It is designed to be full screen, but I have shrunk it to fit on my page, and changed some CSS to make this work, most importantly, putting it inside of this div.
#master_editor_container {
position: relative;
height: 600px;
border: 1px solid #ccc;
background: #ABCDEF;
}
I have a button, that when clicked, should cause flyout buttons to have it's display: none removed and appear on the screen next to the button that was clicked to activate them. The elements are on the HTML document. I have used inspect element after activating them to be sure there is no display: none applied. I have applied the highest z-element to the flyout buttons and their container. I have applied all the position relative, absolute, and fixed in several combinations to the button and it's containers. I have even used opacity: 0.9 to try to push the flyout buttons up.When I remove "position: relative", the flyout buttons are visible, but of course, svg-edit overflows the box I'm trying to contain it in.
Here is all the directly relevant CSS, however there are several moving parts. For the full HTML, see this pastebin. For the full CSS, see this pastebin. To see an example of what it should look like, see the original at the latest stable version
This is the div containing the button to activate the flyout
#tools_left {
position: absolute;
border-right: none;
width: 32px;
top: 40px;
left: 1px;
margin-top: -2px;
padding-left: 2px;
background: #D0D0D0; /* Needed so flyout icons don't appear on the left */
z-index: 4;
}
This is CSS applied directly to the flyout button container
.tools_flyout {
position: absolute;
display: none;
cursor: pointer;
width: 400px;
z-index: 1;
}
This is CSS applied directly to the flyout buttons themselves
.tools_flyout .tool_button {
float: left;
background-color: #E8E8E8;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
height: 28px;
width: 28px;
}
According to comments, this is necessary to keep the flyouts sized properly
.tools_flyout .tool_button,
.tools_flyout .tool_flyout {
padding: 2px;
width: 24px;
height: 24px;
margin: 0;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
z-index: 9999;
}
Given what I'm trying to achieve and what I've tried, what might be causing these buttons not to display?
Another acceptable answer would be to suggest a way to keep svg-edit project inside of a div without using a container with "position:relative".
Related
I have a number of buttons in a div that refused to stay in a fixed position when the div scrolls, and I cannot see why. I have done this elsewhere so I should be able to do it, but I'm going around in circles today.
I have isolated enough of the application to reproduce it easily. It places a div in the centre of the screen and puts a small quit button in the top-right. I want the button (and all my others) to remain fixed relative to the div. What am I missing?
<!DOCTYPE html>
<html>
<head>
<title>Scroll</title>
<meta charset='utf-8'/>
<style>
div.dt-baseContainer {
width: 50vw;
height: 50vh;
min-width: 400px;
min-height: 300px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
position: absolute;
border-radius: 20px;
overflow: auto;
}
div.dt-container {
background-color: lightblue;
border: 3px solid royalblue;
text-align: center;
}
button.dt-quit {
border-style: solid;
border-radius: 4px;
border-color: inherit;
width: 20px;
height: 20px;
background-color: white;
color: red;
font-weight: bold;
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
z-index: 20;
top: 5px;
right: 5px;
position: absolute;
cursor: pointer;
}
</style>
</head>
<div class='dt-baseContainer dt-container' id='dt_container'>
sdfsdf1<br>sdfsdf2<br>sdfsdf3<br>sdfsdf4<br>sdfsdf5<br>sdfsdf6<br>sdfsdf7<br>sdfsdf8<br>sdfsdf9<br>sdfsdf10<br>
sdfsdf11<br>sdfsdf12<br>sdfsdf13<br>sdfsdf14<br>sdfsdf15<br>sdfsdf16<br>sdfsdf17<br>sdfsdf18<br>sdfsdf19<br>sdfsdf20<br>
sdfsdf20<br>sdfsdf21<br>sdfsdf22<br>sdfsdf23<br>sdfsdf24<br>sdfsdf25<br>sdfsdf26<br>sdfsdf27<br>sdfsdf28<br>sdfsdf30<br>
<button id='dt_quit' class='dt-quit' title='Stop'>X</button>
</div>
</html>
[Edited] Of course, position:fixed; is not relevant unless it's fixed relative to the screen so I removed the mention. But I c=still cannot get this simple thing to work.
I hate having to answer my own question, but this was me being silly ... of course.
The suggestion above that my transform was the problem is a red herring. It is basically not possible to fix an element relative to its container in a scrolling flow.
The solution was to put both my scrolling div and my buttons inside an extra containing non-scrolling div. Not only does this make sense -- the container encapsulates both scrolling and non-scrolling content without having to put the latter inside the former -- but my initial code was very nearly there.
Taking my existing dt-baseContainer class and putting it on an outer div fixes the problem.
I have a button that is housed with a few levels of divs. Whenever I attempt to position the button, it is no longer usable. It becomes disabled. I have attempted to set the z-index to 9999, and that did not work. I also wrapped the button in a div and positioned the div itself, but it still disables the button. I tried with with changing the margins, and floating.
#left_menu {
position: fixed;
width: 12%;
height: 100%;
background-color: #262626;
border-right: 3px solid #1a1a1a;
}
#left_menu_top_options {
width: 100%;
height: 30px;
background-color: #1a1a1a;
}
.left_menu_button {
position: relative;
float: right;
width: 25px;
height: 25px;
z-index: 9999;
}
<div id='left_menu' class='lmenu'>
<div id='left_menu_top_options'>
<button class="left_menu_button" onclick="changeMenu()">C</button>
</div>
</div>
Not sure what was causing the issue. As a resolution, I removed the class from the left menu and created an entirely seperate fixed div to use the button in. That worked.
So I am currently creating a video game using HTML, CSS, and JavaScript. I am working on the design of the page, and I am having a problem. My page has a lot of empty space under it, and creates a huge unused portion of the page that you scroll down to. Is there anyway to stop it from scrolling down?
Here is my code:
* {
overflow: hidden;
}
body {
background-color: antiquewhite;
}
#fullcanvas {
border: 6px double black;
}
#title {
position: relative;
color: darkgreen;
font-family: sans-serif;
font-size: 30px;
border: 0px solid black;
border-width: 0px;
bottom: 667px;
left: 20px;
}
#game_rules_canvas {
position: relative;
border: 10px solid black;
border-width: 8px;
bottom: 678px;
left: 20px;
border-right-style: dashed;
border-left-style: dashed;
height: 400px;
width: 300px;
}
Using your css and recreating the elements referenced as div's doesn't seem to replicate your issue. See here: jsfiddle
The following rule should be stopping all scrolling:
* {
overflow: hidden;
}
Sounds like you've either got other code being used or javascript causing an issue. Things I would do to try and diagnose:
Add overflow: hidden!important; to see if that overrides the problem
Right click and inspect the empty space to see it's styles and what element it's referencing. (<html>, <body>, <other>, etc).
Remove the javascript to see how the page renders.
If you can provide more of your code, or even screenshots, it would help.
I came across this page of a themed website that has form field labels with triangles on one side:
http://www.openblackbelt.com/app/index.php?action=profile
A triangle technique is a nice accent to break up the monotony of forms without the usual rounded border or some other getting-over-used approach.
The only problem is, I can't seem to actually determine how the triangular accenting is done. I don't see any use of :before or :after, and there is only one html element <label> involved as far as I can tell. Can anyone do a breakdown of how to perform this technique on my own?
It's nothing but a small div positioned relative containing absolute positioned div using CSS Triangles. I've made a demo from scratch, you can check this out.
Demo
div {
height: 30px;
width: 200px;
background: #f00;
position: relative;
}
div span {
height: 0;
width: 0;
display: block;
position: absolute;
right: -30px;
border-bottom: 30px solid #f00;
border-right: 30px solid transparent;
}
If you want to save an element, you can use :after pseudo(won't work in IE), you can try this
Demo
div {
height: 30px;
width: 200px;
background: #f00;
position: relative;
}
div:after {
height: 0;
width: 0;
display: block;
position: absolute;
right: -30px;
content: " ";
border-bottom: 30px solid #f00;
border-right: 30px solid transparent;
}
No span tag required here.
Explanation: I am just using an absolute position element with a height and width set to 0 and am using borders around the element, making one a transparent, thus creating that triangle shape. And than I use right to position it correctly.
They do it by giving it a border-bottom:24px; and border-right:24px; by positioning the div absolute
#feitla is on the right path, #Kzqai specific what you asked for is achieved as below:
CSS:
.contact-form label {
border-right: 24px;
}
HTML:
<label for="openbb_username">Enter your email address</label>
I'm developing a Search Application where the requirement is to have a magnifier image instead of button on the search textbox.
On a maximized page the anchor seems to be on correct place.
But on browser resize (clicking restore down button next to close button) the search textbox looks like this:
Following is my CSS code (I'm not a CSS guy btw :))
.search_div A
{
background: url("search-white.png") no-repeat scroll 4px 4px #FFFFFF;
border: 1px solid #CCCCCC;
height: 11px;
left: 85.8%;
margin-right: 175px;
padding: 6px 5px 4px 20px;
position: fixed;
top: 32px;
width: 0;
}
Please suggest.
You don't show the full markup for you search button/input so it's difficult to know exactly how how you exactly position the search button.
Here how I would do it. Let's say you have the followin markup:
<div class="search_div">
Search
<input type="text" />
</div>
For the wrapping DIV, the key is to explicitly position it relative:
.search_div {
position: relative;
border: 1px solid LightGrey;
width: 300px;
}
For the search button, make it absolute with a left value equal zero so it sticks to the left side.
.search_div A {
background: url(icon.gif) no-repeat scroll center center #FFFFFF;
border: 1px solid #CCCCCC;
width: 16px;
height: 16px;
left: 0;
position: absolute;
text-indent: -99999px;
}
As the anchor is absolute positioned, the input will be underneath. The trick is to pad the left side of the input to a value a bit higher than the anchor width, so the beginning of the text is not hidden underneath the anchor:
.search_div input {
box-sizing: border-box;
border: 0;
outline: 0;
line-height: 16px;
width: 100%;
padding-left: 20px;
padding-right: 3px;
}
DEMO
You can go further with this technique then by having the possibility through css to show the search icon to the left or to the right by applying an additionnal class to the .search_div container.
Stick left or right the search icon:
.search_div.iconleft a {
left: 0;
right: auto;
}
.search_div.iconright a {
left: auto;
right: 0;
}
Adjust the padding of the input also left or right:
.search_div.iconleft input {
padding-left: 20px;
padding-right: 3px;
}
.search_div.iconright input {
padding-right: 20px;
padding-left: 3px;
}
DEMO
The line position:fixed; is most likely the trouble spot because it makes the element fixed with respect to the browser window, which is why you are seeing the element shift when the browser resizes.
What you'll want to do is apply position: relative; to both the a anchor element and its parent element .search_div that you want the anchor to be relative to. Once the anchor is positioned relative to its containing element, you can use the css attributes "left, right, top, and bottom" to position it as needed.