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.
Related
Right now I am trying to make my modal responsive but the "SAVE" button is not positioning as i want it to.
I want to have the button at the same position all the time, but right now it is disappearing.
My HTML and css looks as the following
.delete{
font-size: 16px;
max-width: 100%;
max-height: 60vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.delete .text-div{
padding: 3px;
}
.delete .button-div{
display: inline-block;
position: relative;
padding: 3px;
/* right: 50%;*/
left: 80%;
}
<div class="delete">
<div class="dialog-content-wrapper">
<mat-toolbar matDialogTitle class="mat-accent m-0">
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">Delete Entry</span>
<button mat-icon-button (click)="onClose()" aria-label="Close dialog">
<mat-icon>close</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
</div>
<div class="text-div">
<span>Are you sure you want to delete this vacation entry?</span>
</div>
<div class="button-div">
<button mat-raised-button color="accent" class="button" (click)="buttonClick();onClose()">SAVE</button>
</div>
</div>
First off, you don't need to wrap single elements into divs, it's not a very good practice regarding accessibility.
Regarding your question, where exactly do you want your button to be? If its position is set to relative, it will be positioned relative to the nearest positioned ancestor. That means that you need to put a position property to the .delete div (usually, relative will suffice).
Another way to achieve what you want (if I understand it correctly) would be adding align-self: end to the button element, since it's wrapped inside a flex container.
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.
I want to make this button text to truncate without hiding the caret.
When text is long it hides the caret.
I want to keep the caret at the end and truncate the text only.
This is my code
Sample Text
.btn-default {
background-color: #F0F0F0;
border-color: #cccccc;
max-width: 16em;
overflow: hidden;
text-overflow: ellipsis;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button id="L1.900Level" class="btn btn btn-default dropdown-toggle dropdown-toggle btn-xl-toggle" type="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span> short text </span><span class="caret"></span></button>
<button id="L1.900Level" class="btn btn btn-default dropdown-toggle dropdown-toggle btn-xl-toggle" type="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span> loooooooooooooooooooooooong text </span><span class="caret"></span></button>
#NOTE this solution is for bootstrap 4 where icon is not added by .caret but from :after selector nonetheless same logic may work on older versions as well.
For this to work you need an additional span tag.
HTML
<button class="btn w-100 dropdown-toggle">
<span>Alle Termine</span>
</button>
CSS
.dropdown-toggle {
span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
max-width: calc(100% - 5px); // prevents icon from touching right border
vertical-align: middle;
}
}
Notice button should have a certain width. In my case button gets 100% width of the parent container but you may have another width in your case.
This worked well on my end. I hope it helps other people as well!
You can do this by giving position absolute to the caret element and place end of your button
.btn-default span.caret {
position: absolute;
right: 4px;
top: 15px;
}
And you should make the parent element position as relative
.btn-default {
background-color: #F0F0F0;
border-color: #cccccc;
max-width: 16em;
overflow: hidden;
text-overflow: ellipsis;
position: relative:
}
I have a div with class .popup. I have an iFrame used to open another image gallery, but when I show the popup using jQuery it isn't centered and the top most page element.
CSS
.popup {
border: 1px solid #ccc;
width:inherit;
border-radius: 7px;
margin-right: auto;
margin-left:auto;
padding: 20px;
position:absolute;
z-index: 1000;
background-color: #f0f0f0;
height:400px;
}
HTML
<div class="popup " style="display: none">
<div class="col-lg-12" style="padding-bottom: 10px;">
<input onclick='SelectImage(inputImage)' class="btn btn-xs btn-success pull-left" type="button" value=" بازگشت " />
<input id="btnImageSelect" onclick='SelectImage(inputImage)' class="btn btn-xs btn-success" type="button" value="تایید عکس" />
</div>
<iframe id="iframeImage" src="../filemanager/ImagePicker.aspx" width="100%" height="320" frameborder="1"></iframe>
</div>
How do I fix this problem and where is my lost code?
$(document).ready(function(){
var width = $(.popup).width();
var height = $(.popup).height();
$(".popup").css({"top":"50%", "left":"50%", "margin-top":height/2+"px", margin-left:width/2+"px"});
});
This will move the div in center.
I'm not sure what you're looking for with width: inherit. This will always make your popup as wide as its parent element, so there's no need for centering. With position: absolute, however, your popup will be positioned according to either the body element of your page, or a parent element with position: relative.
Here's what I'd do if I understand your problem correctly:
I'm assuming width is unknown here.
.popup {
...
position: absolute;
margin: 0;
left: 50%;
transform: translateX(-50%);
}
Here's a fiddle: http://jsfiddle.net/ugys4znt/
If you want the popup to stay on screen even when the user scrolls, use position: fixed.
Please specify some more what you're trying to achieve with width: inherit, and I'll get back to you.
I'm trying to get the icon to display in the middle of the words 'some text'.
Could anyone advise?
http://jsfiddle.net/LZxxB/50/
<div>
<div style="display:inline-block;">some</div>
<span class='ui-btn-icon-notext ui-icon-arrow-u-l' style="display:inline-block;"></span>
<div style="display:inline-block;">text</div>
</div>
Here is one way to do it. You basically make an icon button that is not a button.
The HTML:
<div>
<div style="display:inline-block;">some</div>
<span class="ui-nodisc-icon ui-alt-icon nonbuttonicon" >
<span class="ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-inline"></span>
</span>
<div style="display:inline-block;">text</div>
</div>
The CSS:
.nonbuttonicon .ui-btn {
background: transparent;
cursor: default;
border: 0;
margin: 0;
}
.nonbuttonicon .ui-btn:hover{
background: inherit;
}
DEMO
UPDATE:
Here is a way without using jQM buttons and a single span:
<div>
<div style="display:inline-block;">some</div>
<span class="ui-alt-icon ui-icon-delete ui-btn-icon-notext inlineIcon"></span>
<div style="display:inline-block;">text</div>
</div>
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
}
.inlineIcon:after{
background-color: transparent;
}
Updated DEMO
An if you like the white icon on top of the round disk, the CSS becomes even simpler:
<span class="ui-icon-delete ui-btn-icon-notext inlineIcon"></span>
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
}
DEMO
These lines of code will reset the jquery mobile css that is displaying it differently. You might need to tweak it a little bit to fit your needs.
div span.ui-icon-arrow-u-l:after {position:relative;}
div span.ui-icon-arrow-u-l {display:inline-block;height:30px;margin-top:0;width:16px;}
Hope this helps.