I have a submit button in a form end. I found that even while clicking outside the button the entire row of div for button acts a button.
Is there any option in css for that?I can provide the code if you want..Thanks in advance
html:
<div id="submit">
<div id="block">
<button type="submit" id="submit">Create</button>
</div>
</div>
css:
button.submit-button {
font-size: 14px;
padding: 1px 2px;
color: #fff;
margin: 0px 70px;
margin-top: 5px;
border-radius: 1px;
}
I guess you have kept button inside an anchor tag having display:block like Button1 from snippet.
Make it to display:inline or display:inline-block
<div style="text-align:center">
<a href="#" style="display:block; background-color: yellow;">
<button>
button1
</button>
</a>
<div>
<a href="#" style="display:inline-block; background-color: yellow;">
<button>
button2
</button>
</a>
</div>
<button>
button3
</button>
</div>
UPDATE:
your div and button both having same id i.e, id="submit". It might be because of that. Change one of those id's
You may have a href element that is hasn't been ended or you may have the href element around the div not the button. It would be easier to answer with code but your button should look like;
<button>Your Button</button>
I made an example in JSFiddle.
Go have a look at it and try removing css attribute: display from #block or change it to inline and see what happens.
The size of the blue area is determined by your margin and padding on the button.
What you are looking for is display: inline-block; in this simple example you can see that the button is keeping his normal size while the div #submit is by default using the entire row.
And also i changed the selector of the button to id="button"
Check this sites out for more Info: w3s Display and w3s Selectors
You are having same id in div and button tag, you should change that first. and then your CSS would be
#button{
font-size: 14px;
padding: 1px 2px;
color: #fff;
margin: 0px 70px;
margin-top: 5px;
border-radius: 1px;
}
I hope it will help you.
Related
I want to show text right side to image and I was successful to made it but when I add another div for border the text doesn't show up, it's like invisible but still taking its space I tried but I can't figure out the problem here you can see the live preview https://jsfiddle.net/Ldu91at2/ And here is the code before adding a main div for border:-
<div style="display:inline-block; min-width:6.2cm; height:8.8cm; align: center;vertical-align: middle;" >
<img src="https://www.asurascans.com/wp-content/uploads/2020/10/56953.jpg" style="height:100%;">
</div>
<div style="display:inline-block;vertical-align: top;">
<span id="title">advertishement</span>
</div>
This is the css style you are using for the .cont div
.cont{
width:fit-content;
border: 1px solid #eee;
padding: 10px;
color: #fff;
}
The
color: #fff;
rule makes your text white thus invisible against a white background. Consider removing it or using a different color. The code below will work.
.cont{
width:fit-content;
border: 1px solid #eee;
padding: 10px;
}
I have very very small code, where I describe behavior of button. But it don't react.
JS:
$('.boxbar').click(function(){alert('Click')});
HTML:
<div class="boxbar">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
CSS:
.boxbar
text-align: center
padding-bottom: 16px
padding-top: 12px
height: 58px
cursor: pointer
[class^='box']
color: $primary_font_color_W
background: $primary_color_bg
&:hover
background: $hold_color
color: $primary_font_color_B
First off the i tag is depreceated, use em. SECOND,Your div has no text or visual element value, it takes no real estate in the browser so you'll need content in the em tag to have something to react to your alert function.
I have div2(height 20px vertical align centre) inside div1(100px) and div2 having anchor tag.
On hover of div1 I am showing hand pointer, but also want on click anywhere in div1 area it should navigate to anchor tag url. Please refer Image for more detail
.test:hover {
cursor: pointer;
cursor: hand;
}
<div class="test" style="height:100px">
<div style=" position: relative; top: 50%; transform: translateY(-50%);">
Pawan Kotak
</div>
</div>
If the outer 'div' should behave like an anchor, just reorder the elements like this:
<a href="myAnchor.tld">
<div id="div1">
<div id="div2"></div>
</div>
</a>
You don't have to mess around with jQuery, if your markup could simply be structured the way it actualy works.
try with following way
$(div1).on("click",function(){
window.location = $(this).find("a").attr("href");
});
this is just a wayout.
Assuming your div id's to be div1 and div2 here is a solution.
$('#div1').on('click',function(){
$(this).find('a').trigger('click');
});
The script will attach a click event to the div1 and when ever user clicks this div it finds the a tag with in it $(this).find('a') and triggers a click event on that anchor tag.
you can also grow your anchor tag (there are several methods/approaches)
.test {
background-color: red;
}
.test a {
cursor: hand;
background-color: blue;
display: block;
line-height: 100px;
}
<div class="test" style="height:100px">
<div style=" position: relative; top: 50%; transform: translateY(-50%);">
Pawan Kotak
</div>
</div>
I have a button that is finished and it's basic with an active and hover css element. I want to make it so when my "Join the Loop" button is clicked it will then change to a simple email form like the one here https://gab.ai/
sorry for my lame explanation. here is my code https://jsfiddle.net/hkr95odp/1/
.up {
opacity: 0;
background-color:#FFF;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:5px;
border:2px solid #ff0000;
display:inline-block;
cursor:pointer;
color:#ff0000;
font-family:Quicksand;
font-size:20px;
padding:10px 10px;
text-decoration:none;
margin-right: 30px;
margin-top: 20px;
transition: all 0.5s;
box-shadow: 0px 0px 130px -18px #ff0000;
}
.up:hover {
background-color: #ff0000;
color: #fff;
}
.up:active {
}
Start by wrapping the signup and signin anchors in span elements to keep things readable. Give the signup anchor an id so we can animate it, and immediately after the signup anchor add a form which is initially hidden.
<body>
<header class="header">
<div class="wrap">
<span id="animationSandbox" style="display: block;"><h1 class="site__title mega">CONCUR</h1></span>
<span class="beta subhead">Verifiable • Public • News</span>
</div>
</header><!-- /.site__header -->
<h5 class="credit">-Product of BRIMM-</h5>
<div class="sign">
<span id="signupSpan">
<a id="signup" href="#" class="up">Join the loop</a>
<form id="joinform" action="??????" class="join" style="display:none;">
<label for="email" class="subhead">Email</label>
<input name="email" style="width: 120px;" class="subhead">
<input type="submit" value="Send">
</form>
</span>
<span>
SIGN IN
</span>
</div>
<div id="joinformdiv" class="join" style="display:none;border:1px solid red; padding: 10px;position:absolute;">
</div>
</body>
And modify the css to include the new class which is same as 'up' class but without transition. This is assigned to the form so that it has the same appearance as the button.
.join {
background-color:#FFF;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:5px;
border:2px solid #ff0000;
color:#ff0000;
font-family:Quicksand;
font-size:20px;
padding:10px 10px;
padding-bottom:12px;
text-decoration:none;
margin-right: 30px;
margin-top: 20px;
box-shadow: 0px 0px 130px -18px #ff0000;
}
Then include jquery library, and add script:
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"> </script>
$(document).ready(function() {
$("#signup").on("click", function(e){
$("#signup").fadeOut(400, function(){
$("#joinform")
.css({opacity: 0, display: "inline"})
.animate({opacity: 1},400, function(){ $("#email").focus()})
})
})
});
What is happening here is that when the signup button is clicked it fades out, then the hidden form has its opacity set to make it invisible and its display set to be inline. This is important because a form is a block element and if w just used fadeIn() it would push the other content down the page. We then use the animate() command to animate the opacity to 1 which makes the element fully visible.
Unlike using position and display absolute to fix the position of the email form over the button, this approach puts the email form inside the same parent element of the button so that scrolling will not cause a problem.
I think the simplest way is just to replace DIV content by INPUTYou can adjust styling, this is your start point :)
<div class="sign">
Join the loop
SIGN IN
</div>
working example: https://jsfiddle.net/hkr95odp/2/
Greets.
I'm trying to have a bootstrap 3 input field have a little close icon appended on the top right of the input.
Here's my attempt: https://jsfiddle.net/8konLjur/
There's 2 problems with this though:
The × symbol isn't correctly placed in the circle.
I'm trying to move the <a></a> circle so it's halfway on the input border underneath and above (does that make sense?). This might have to be done with absolute positioning or javascript, I don't know.
A quick and dirty way would be to wrap the input in a div and set its position to relative and set the icon absolute relative to that:
DEMO
<div style="position: relative"> <!-- absolute relative to parent --> </div>
BUT, when working with bootstrap try to look at the patterns rather than hacking your way through.
You can just use the btn class for style and position it with additional class.
<button type="button" class="btn btn-default btn-sm">
×
</button>
or
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
See the example here below the icon section: http://getbootstrap.com/components/#glyphicons
In your btn-close make the following:
.btn-close {
position: relative;
top:10px;
padding: 0;
display: block;
background: teal;
border-radius: 100%;
width: 12px;
height: 12px;
float: right;
color: #FFF;
font-size: 12px;
font-weight: bold;
}
And it is better to enclose the input field and the close button in a div. Checkout this DEMO.