I am trying to use bootstrap tagsinput in a form contained in a modal
like this
...
<div class="form-group">
<label for="myTagLabel">Tags:</label>
<input class="form-control" id="myTag" type="text" data-role="tagsinput">
</div>
As you can see in the image above I can't see why the input doesn't have the width of the containing form.
UPDATE
this http://www.bootply.com/f43d1A0YxK reproduces the issue
The reason you are seeing this behaviour is because bootstrap-tagsinput actually hides the original input element, and in its place adds a div. You are seeing a div element styled to look like a Bootstrap input element. So any CSS to affect the original input will not produce any changes.
What you want to change is the .bootstrap-tagsinput class:
.bootstrap-tagsinput {
width: 100% !important;
}
Here's a demo: http://www.bootply.com/1iATJfFM69
Add display: block; to the .bootstrap-tagsinput class in your CSS. As noted by Mohamad this class is not present in your own HTML, but when you inspect element/view source you can see that the input is wrapped in a <div class="bootstrap-tagsinput">.
.bootstrap-tagsinput{
display: block;
}
This will overwrite the display: inline-block; that is being inherited.
Bootply Demo
Cristian almost guessed it
somewhere in js:
$('.bootstrap-tagsinput > input').css('width', '');
and in css:
.bootstrap-tagsinput input {
width: 10em;
}
I see the tagsinput plugin you are using comes with its own css file.
bootstrap-tagsinput.css
These css rules are automatically being added to your input when you add the data-role="tagsinput".
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
width: auto !important;
max-width: inherit; //Try change this to 100% !important;
display: block; // Add this in
}
You need to update these so they don't over rule native bootstrap rule.
The reason behind this problem is, the bootstrap-tagsinput class is using display: inline-block;
the solution is, simply change the display: inline-block; to display: block;
Before change
.bootstrap-tagsinput {
display: inline-block;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
After change
.bootstrap-tagsinput {
display: block;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
The reason you are seeing this behaviour is because the style actually override the width attribute:
style="width: 3em ! important;"
Remove the style:
$('.bootstrap-tagsinput > input').prop( "style", null );
This should work properly.
Additionally, set the desired width with CSS:
.bootstrap-tagsinput input { width:100%!important; }
Related
I'm trying to get some css properties to appear across my forms, but it's not working when I move the properties to the parent html element.
The CSS properties applied directly to the .input class work, but when applied to the parent .form-control class they don't work and don't seem to affect the input and none of the .form-control properties appear in Chrome dev tools if I inspect the text input element?
.form-control {
display: inline-block;
height: 34px;
width: 100%;
margin: 10px;
border-radius: 4px;
border: 1px solid #ccc;
}
/*.form-control .input {*/
/*height: 34px;*/
/*width: 100%;*/
/*margin: 10px;*/
/*border-radius: 4px;*/
/*border: 1px solid #ccc;*/
/*}*/
.form-control .button {
display: block;
background-color: limegreen;
font-size: 14px;
font-weight: 400;
color: white;
margin: auto;
vertical-align: middle;
padding: 6px 12px;
border: 1px solid transparent;
height: 25px;
border-radius: 4px;
}
<form className="form-control">
<input className="input" type="text" />
<button className="button">Get Weather</button>
</form>
From the code snippet you provided, it's because you are applying the rules directly to the form and not the forms input. Input will not inherit the properties you are setting on the form. You need to specifically target the input like you have in the commented out code.
I'm trying to make custom checkbox, like it said here
This is what I've done:
http://jsfiddle.net/216nt56y/
My css:
input[type=checkbox].css-checkbox {
visibility: hidden;
}
label.css-label
{
border-color: white;
border: white 1px solid;
border-radius: 3px;
}
input[type=checkbox].css-checkbox:checked + label:before {
content: "\2714";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
}
It is not really what I want, because I want a check square to have the same size when it is unchecked.
How can I get it?
Like konrad said by giving it a width and height it will always have its shape but rather than using min-height and min-width just have height and width and then you can also move the check tick into the center of the checkbox using margin
label.css-label
{
border-color: white;
border: white 1px solid;
border-radius: 3px;
display: inline-block;
height: 18px;
width: 18px;
}
input[type=checkbox].css-checkbox:checked + label:before {
content: "\2714";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
margin-left:2px;
}
here is a JSFIDDLE showing it in action
try something like this
label.css-label {
display: inline-block;
min-height: 20px;
min-width: 20px;
}
I am trying to achieve something like the website here: http://bit.ly/1f55jUR (where it says Space Min.) but I fail miserably lol..
Here is what I have done until now:
<input type="text" class="textbox" id="box" /><span class="textbox2">TB</span>
.textbox {
border: 1px solid #cccccc;
outline:0;
height:22px;
width: 30px;
}
.textbox2 {
border: 1px solid #cccccc;
font-size: 16px;
background-color: #f0f0f0;
padding: 3px 6px 3px 6px;
}
Live example:
http://jsfiddle.net/55Nb3/
Any help would be highly appreciated.
Thank you!
You need to modify your html like this (span don't have the same properties than div):
HTML
<input type="text" id="textbox" /><label for="textbox" clhttp://jsfiddle.net/55Nb3/#forkass="textbox2">TB</label>
Here is the CSS
#textbox {
border: 1px solid #cccccc;
outline:0;
height:30px;
width: 30px;
border-radius: 4px 0 0 4px;
box-sizing: border-box;
font-size: 16px;
}
label {
display: inline-block;
vertical-align: top;
border: 1px solid #cccccc;
border-left: none;
font-size: 16px;
background-color: #f0f0f0;
line-height: 30px;
padding: 0 6px;
height: 30px;
border-radius: 0 4px 4px 0;
box-sizing: border-box;
}
Here is a link to it
They used Twitter Bootstrap on that website to get that styling: http://getbootstrap.com/components/#input-groups-basic.
I do it by using a mix of jQuery and CSS
jQuery
$('input[type="text"], input[type="email"], input[type="tel"], .post textarea').on('focus blur',function(e){
if(e.type == 'focus' || e.type == 'focusout'){
$(this).addClass('focussed');
} else {
$(this).removeClass('focussed');
}
});
CSS
input{
/* General style here */
}
input.focussed{
/*Different styles for focussed input here */
}
I've done an update on your fiddle: http://jsfiddle.net/55Nb3/5
It's mostly done by:
label {
display: inline-block;
}
And a few style adjustments.
It really doesn't matter if it is a label or something else.
Can't figure out how I"m getting this extra white space around my image:
The markup:
<div id="member-name" hidden="true">
<button type="submit" id="btnExpandSection"><img src="~/Content/Images/plus.jpg" /></button><p id="member-fullName"></p>
</div>
the styles:
input, textarea
{
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: .9em;
margin: 5px 0 6px 0;
padding: 5px 2px 5px 5px;
width: 300px;
}
img
{
display: block; /* gets rid off any unexpected margins round the image */
border: 0px;
}
input[type="submit"], input[type="button"], button
{
background-color: #ffffff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
width: auto;
vertical-align: middle;
border: 0px;
}
td input[type="submit"], td input[type="button"], td button { font-size: 1em; }
UPDATE:
There's also this style in there:
#member-name
{
margin: 30px 0px 0px 0px;
height: 30px;
font-weight: bold;
color: white;
padding: 1px 1px 0px 1px;
background-color: #d28105;
border: 1px solid darkgray;
}
#member-fullName { margin: 0px 0px 0px 20px;}
#member-fullName p{ display: inline;float: left;overflow: hidden;}
Can't you just provide the image as a background to the button element?
#btnExpandSection {
background: #ffffff url('/Content/Images/plus.jpg') no-repeat center center;
height: /* image height */;
width: /* image width */;
}
I would start with this, and build it back from here...
button,
#member-fullName,
#member-name,
#btnExpandSection,
#btnExpandSection img {
margin: 0;
padding: 0;
}
But the following would definitely be preferably to an image nested between <button></button> tags. Replace 32px with actual width and height values of your image.
button {
background-image: url(~/Content/Images/plus.jpg);
width: 32px;
height: 32px;
}
Can't figure out how I"m getting this extra white space around my image:
The markup:
<div id="member-name" hidden="true">
<button type="submit" id="btnExpandSection"><img src="~/Content/Images/plus.jpg" /></button><p id="member-fullName"></p>
</div>
the styles:
input, textarea
{
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: .9em;
margin: 5px 0 6px 0;
padding: 5px 2px 5px 5px;
width: 300px;
}
img
{
display: block; /* gets rid off any unexpected margins round the image */
border: 0px;
}
input[type="submit"], input[type="button"], button
{
background-color: #ffffff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
width: auto;
vertical-align: middle;
border: 0px;
}
td input[type="submit"], td input[type="button"], td button { font-size: 1em; }
UPDATE:
There's also this style in there:
#member-name
{
margin: 30px 0px 0px 0px;
height: 30px;
font-weight: bold;
color: white;
padding: 1px 1px 0px 1px;
background-color: #d28105;
border: 1px solid darkgray;
}
#member-fullName { margin: 0px 0px 0px 20px;}
#member-fullName p{ display: inline;float: left;overflow: hidden;}
Can't you just provide the image as a background to the button element?
#btnExpandSection {
background: #ffffff url('/Content/Images/plus.jpg') no-repeat center center;
height: /* image height */;
width: /* image width */;
}
I would start with this, and build it back from here...
button,
#member-fullName,
#member-name,
#btnExpandSection,
#btnExpandSection img {
margin: 0;
padding: 0;
}
But the following would definitely be preferably to an image nested between <button></button> tags. Replace 32px with actual width and height values of your image.
button {
background-image: url(~/Content/Images/plus.jpg);
width: 32px;
height: 32px;
}