I have a problem with IE7.
I'm trying to put 2 buttons in the same line.. but its not working only for IE7 in all other browsers it works as it should( didn't check IE6, will no check). Here is a picture so you know what I mean
This black border you see is just something I put so I can see how long/tall is my div. Which css style should buttons have in order to be in the same line. Thank you
UPDATE-> HERE IS SOME HTML :
<div style="border:1px solid; width:300px; height:30px; float:left; padding:0;margin:0;text-align:left;">
<a class="button niceButton">
<div id="first" class="action_button">
EDIT CATEGORY
</div>
</a>
<a class="button niceButton">
<div id="action_delete" class="action_button1">
DELETE RECORDS
</div>
</a>
</div>
The left one should have float: left; and the right one should have float: right; and it's recommended to place a clear: both; on the element after the div with the buttons.
Example:
<div class="buttons">
<button class="left">left button</button>
<button class="right">right button</button>
</div>
with
.buttons {
width: 300px;
}
.left {
float: left;
}
.right {
float: right;
}
Have you tried display: inline; on the buttons?
Edit:
also shouldnt the be inside the div around the text like so:
<div id="first" class="action_button">
<a class="button niceButton">EDIT CATEGORY</a>
</div>
Related
I want to hide a div when clicking a button. div hides well when clicking the button. But when div hides space still exists there.
It means there are two div(It can be more than two). I want to hide the div and space also and below div replace with hiding one.
I have mentioned my tried in jsfiddle: https://jsfiddle.net/c2pnv7o6/17/
How can I fix this?
I would say your problem is that you use those three <br> Tags. Those are not part of the div you are hiding. By hiding the ancor changes.
<br><br><br>
Try putting them in the div you hide, or use margin properties.
You are not removing the line breaks. Add them in the div element
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="modal-body">
<div id="prodcuctdiv">
<h6 style="margin: 5px;" class="modal-title">New Products</h6>
<div>
<p style="border:1px; border-style:solid; border-color:green; padding: 0.5em; width: 15%; text-align: center; margin: 5px; float:left;">sss</p>
<p style="border:1px; border-style:solid; border-color:green; padding: 0.5em; width: 15%; text-align: center; margin: 5px; float:left;">jjj</p>
</div>
<div>
<button onclick="myFunction1()" style="float:right;" id="addBtn" type="button" class="btn btn-secondary btn-outline-secondary btn-sm">Click me1</button>
</div>
<br><br><br>
</div>
The first div is hidden when the button is clicked. The reason the second div does not move all the way to the top is because you have three <br /> tags in the way. Remove them. Alternatively use margin-bottom on the div elements to provide the spacing, then when one is removed the white space is removed too.
In addition you should not use inline CSS or JS. Move that logic in to external stylesheet and script files. You should also look to amend the JS logic to use unobtrusive event handlers.
With all that said, try this:
jQuery($ => {
$('.test-btn').on('click', e => $(e.target).closest('.parent').hide());
});
h6.modal-title {
margin: 5px;
}
p {
border: 1px;
border-style: solid;
border-color: green;
padding: 0.5em;
width: 15%;
text-align: center;
margin: 5px;
display: inline-block;
}
.btn {
float: right;
}
#prodcuctdiv,
#prodcuctCon {
margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
<div id="prodcuctdiv" class="parent">
<h6 class="modal-title">New Products</h6>
<div>
<p>sss</p>
<p>jjj</p>
</div>
<div>
<button type="button" class="test-btn btn btn-secondary btn-outline-secondary btn-sm">Click me1</button>
</div>
</div>
<div id="prodcuctCon" class="parent">
<h6 class="modal-title">New Con</h6>
<div>
<p>mmm</p>
</div>
<div>
<button type="button" class="test-btn btn btn-secondary btn-outline-secondary btn-sm">Click me2</button>
</div>
</div>
</div>
Im generating a div containing jscolor (color picker) elements.These divs are inserted in a HTML page depending on IDs.My first result was a distorted display of my targeted div as following
Thus i added a position absolute to my inserted div and made it so it's clear of my HTML but still follows my target.
the problem im having now is that with multiple inserted DIVs on the same HTML target they overlay on top of each other.Im searching for a way to stack them up so they can all be visible without distorting my HTML target.
My inserted Div code :
<div id="colorpicker1" style=" position:absolute; display:block; width:450px; margin-top:-10%; left:1px; z-index:5;">
<div class="well" style=" position:relative; width:450px; left:1px; z-index:5;" >
<button class="jscolor{valueElement:'+Myvalue+', styleElement:'+Myvalueid+'}">
Click here to pick a color
</button>
Value:
<input id="+Myvalue+" >
</div>
What i want to achieve is this
If I understand your question correctly, you can achieve what you need to, simply by applying display:inline-block to both the left-hand div (#colorpicker1) and the right-hand div.
Example:
.color-picker {
display: inline-block;
width:450px;
vertical-align: top;
}
.right-block {
display: inline-block;
width:450px;
height:450px;
background-color:rgb(0,127,0);
}
.well {
width: 400px;
margin: 2px;
padding: 12px 0 12px 12px;
background-color:rgb(239,239,239);
border: 2px solid rgb(214,214,214);
border-radius: 6px;
}
<div class="color-picker">
<div class="well">
<button>Click here to pick a color</button>
Value:
<input />
</div>
<div class="well">
<button>Click here to pick a color</button>
Value:
<input />
</div>
<div class="well">
<button>Click here to pick a color</button>
Value:
<input />
</div>
<div class="well">
<button>Click here to pick a color</button>
Value:
<input />
</div>
<div class="well">
<button>Click here to pick a color</button>
Value:
<input />
</div>
</div>
<div class="right-block">
</div>
If you have any questions about how the CSS in the snippet above works, please ask in the comments below.
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 7 years ago.
I have a piece of HTML/CSS/JS which behaves in a way I wouldn't expect it to behave. There are three divs displayed as inline-block and given a fixed height and width. Within these divs are further divs which I'm filling with content.
My expectation would be, that the content would start at the top, head to the bottom of the div, and then im some way overflow. At least I've seen it like that in the past.
But for some reason, the code in the snippet I'll post below behaves differently - the two grey boxes move downward. And I'd be thankful for some explanation on why it behaves that way. Maybe it's too obvious for me too see after looking at that code for two hours now and scratching my head.
function demo() {
document.getElementById("clock5").innerHTML = "test<br/>sometext";
}
.user {
display: inline-block;
width: 128px;
height: 128px;
font-size: 18pt;
color: white;
background-color: #999;
}
.present {
background-color: green;
}
<div id="users">
<div class="user">
<div class="username">user4</div>
<div id="clock4"></div>
</div>
<div class="user present">
<div class="username">user5</div>
<div id="clock5"></div>
</div>
<div class="user">
<div class="username">user6</div>
<div id="clock6"></div>
</div>
</div>
<hr />
<button type="button" onclick="demo()">demo</button>
Just click the demo-button at the bottom to see what I'm talking about in action.
Setting vertical-align property (almost any value, since you fixed the heights) to .user rule should fix the issue.
function demo() {
document.getElementById("clock5").innerHTML = "test<br/>sometexttest";
}
.user {
display: inline-block;
width: 128px;
height: 128px;
font-size: 18pt;
color: white;
background-color: #999;
vertical-align: top;
}
.present {
background-color: green;
}
<div id="users">
<div class="user">
<div class="username">user4</div>
<div id="clock4"></div>
</div>
<div class="user present">
<div class="username">user5</div>
<div id="clock5"></div>
</div>
<div class="user">
<div class="username">user6</div>
<div id="clock6"></div>
</div>
</div>
<hr />
<button type="button" onclick="demo()">demo</button>
overflow:hidden will fix it.
Its basically aligning everything to bottom. So either overflow it, or set vertical-align :top. What's the deal with inline-block
Why does overflow fix it? From w3
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.
function demo() {
document.getElementById("clock5").innerHTML = "test<br/>sometext";
}
.user {
display: inline-block;
width: 128px;
height: 128px;
font-size: 18pt;
color: white;
background-color: #999;
}
.clock{
border: #000 2px solid;
}
.present {
background-color: green;
}
<div id="users">
<div class="user">
<div class="username">user4</div>
<div class="clock" id="clock4"></div>
</div>
<div class="user present">
<div class="username">user5</div>
<div class="clock" id="clock5">some text <br/> </div>
</div>
<div class="user">
<div class="username">user6</div>
<div class="clock" id="clock6"></div>
</div>
</div>
<hr />
<button type="button" onclick="demo()">demo</button>
I have a very odd situation, I have looked all over and cannot find someone with a similar situation, and in my eyes, I don't see why this inst working. I'm trying to make a simple tab list with jQuery:
I have a JS function as follows:
function changeWindow(contentId) {
$(".tabs").css("border-bottom","thin solid black");
$("#" + contentId + "Tab").css("border-bottom","thick solid white");
$(".content").hide();
$("#" + contentId).show();
$("#" + contentId + "Head").show(); //when I comment this line, all works well.
}
My html is:
<div id="header">
<div id="tabs">
<span onClick="changeWindow('browse')" id="browseTab" class="tabs"> Browse </span>
<span onClick="changeWindow('collection')" id="collectionTab" class="tabs"> My Collection </span>
<span onClick="changeWindow('play')" id="playTab" class="tabs"> Play! </span>
</div>
<div id="contentHeads">
<div id="browseHead" class="content">
some Html
</div>
<div id="collectionHead" class="content">
some Html
</div>
<div id="playHead" class="content">
some Html
</div>
</div>
</div>
<div id="gameField">
<div id="browse" class="content">
some Html
</div>
<div id="collection" class="content">
some Html
</div>
<div id="play" class="content">
some Html
</div>
</div>
I dont think it matters much, but here is my CSS(I left some out):
#tabs
{
position: absolute;
top: 10px;
left: 10px;
border-bottom: medium solid black;
}
.tabs
{
border: thin solid black;
padding-left: 50px;
padding-right: 50px;
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
}
.content
{
position: relative;
height: 100%;
overflow: hidden;
}
The curious thing is, this function will run once(i.e i can click a tab) and everything works perfect. But after i click a tab, the CSS property cursor: pointer; no longer did anything, and the JS function no longer works. I have tested and other functions still run when called, just not this one. After a bit of testing, I came to the conclusion that it is because of the last line in the JS function. When I comment it all works well(except that the Heads don't show). I dont understand what is going on, i think it is an HTML problom, but have no clue. Does anyone know why this may be happening?
Thanks in advance.
The problem is that your "content" blocks come after the menu in the document, so when they're visible they cover the menu up.
Here is a fixed jsfiddle to demonstrate.
I updated the CSS:
.content {
position: relative;
height: 100%;
overflow: hidden;
margin-top: 40px;
display: none;
}
I also added CSS to move the "gameField" stuff out of the way.
It can be tricky to diagnose problems like this, but the developer tools ("inspector") generally make it a lot easier.
I'd noticed a strange behaviour of jquery.height() function. Have a look at the following code.
CSS:
div.text-field {
font-family: sans-serif;
margin: 3px;
float: left;
}
HTML:
<div id="someid">
<div class="text-holder">
<div class="text-field">text here</div>
</div>
</div>
JS:
console.log($("someid").find("text-holder").height());
The last line outputs 0 if I have float: left; in CSS file, and otputs real height if I remove float: left;. What is the reason of such a behaviour? Can I use height() function together with float: left;?
When float elements are within a container, that element does not apply the height of the container, because the element is no longer in the "flow". It is removed from the current element, and applied to it's parent, hence the issue. You can fix it by using either inline-block, or clear: both
I usually use a 0 height element with clear both as the last child in the container. This causes the container to "stretch" around the floating objects:
<div style="clear: both; line-height: 0; height: 0;"> </div>
This is a variant on the QuirksMode article, and has good cross browser compatibility.
I've rewritten your code to include it and demonstrate the results:
<html>
<head>
<title>test</title>
<style type="text/css">
div.text-field
{
border: 1px solid red;
font-family: sans-serif;
margin: 3px;
float: left;
}
div.text-holder
{
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#output1").text($("#someid1 .text-holder").height());
$("#output2").text($("#someid2 .text-holder").height());
});
</script>
</head>
<body>
<div id="someid1">
<div class="text-holder">
<div class="text-field">text here</div>
</div>
</div>
<br>
<div id="output1"> </div>
<br><br><br>
<div id="someid2">
<div class="text-holder">
<div class="text-field">text here</div>
<div style="clear: both; line-height: 0; height: 0;"> </div>
</div>
</div>
<br>
<div id="output2"> </div>
</body>
</html>
The demonstration can also be viewed on JSFiddle.
floats removes element from the space therefore it occupies 0 space. So height() is space it takes up that is 0
because floats remove the element from the normal flow. try using overflow:hidden
see the DEMO
for more details http://www.quirksmode.org/css/clearing.html
In jQuery the test script looks like:
console.log($("#someid").find(".text-holder").height());
if you modify the html to clear the float, the parent will gain height:
<div id="someid">
<div class="text-holder">
<div class="text-field">text here</div>
<div style="clear: both;"></div>
</div>
</div>
I had the same issue where I was using float for better element positioning. If however you (like me) know beforehand what the exact contents of the element will be, you can add a height attribute with a value (e.g. height: 30px) to your CSS class, so the jQuery .height() method does work.