I try to design tag managing control. I use jQuery plugin tagmanager with twitter-typeahead. I'm using pseudo-input element and put into it transparent input.
<div class="tag-collector"> <!-- This div looks like input -->
<input class="tag-getter" id="gc-input" type="text" name="grantCurrent">
<!-- this input is transparent -->
</div>
And when user submiting something tagmanager plugin create span that display submited tag.
<div class="tag-collector">
<!-- this is my submittet tag -->
<span class="tm-tag" id="MbkVa_1">
<span>Submited Info</span>
x
</span>
<!-- this is twitter-typeahead wrapper -->
<span class="twitter-typeahead">
<!-- a bunch of HTML where contains my REAL INPUT-->
</span>
<input type="hidden" name="hidden-telephone" value="Angola"> <!-- input to collect values -->
</div>
And now the main trouble. I want to .twitter-typeahead with my input always fills all free space in the row.
1) If I use width: 100% and enter at least one tag DIV stretching in height. Now on the first row is tag span and at second row (all row) filled by input.
2) If I use constant width and enter tags which total width is more than my input's width than input moves down to the next row. And now I have one half-filled row and one empty row wich is filled at ~50% with input.
Help me CSS masters!
UPD : Fiddle
you can use float:left and overflow: hidden; as seen here:
http://jsfiddle.net/d2YTf/1/
Related
Hi I have 3 divs inside my row class.
<div class="row">
<div class="col-3">some content</div>
<div class="col-9">
<div class="col-4">
<div class="col-12">
<div class="col-6">conetnt</div>
<div class="col-6">conetnt</div>
</div>
</div>
<div class="col-8"> content </div>
</div>
</div>
How can I modify this HTML so that, all the content inside floats right and auto adjust its width based on the content? Now the width is fixed, so even if the data in my 3rd div very little it still consumes loads of space. Any idea guys? bit newbie to CSS
Solution :
If your content is occupying space less than width of your bootstrap column. You better put it without bootstrap column classes and give it simply float:left to your content inside the simple div.
It will automatically be resized according to your content. You may need to give display:inline to your div to display that div inline.
Update :
You can use flexbox. display: flex to container and can use flex-direction attribute according to your need.
Reference :
First you need to study the behavior of bootstrap grid systems. This official bootstrap documentation is all about grid system of bootstrap (Latest version).
https://getbootstrap.com/docs/4.0/layout/grid/
It will help you to understand content management inside bootstrap rows and columns.
You can use float: right to move content on right and try using display: table
Have a look here: https://v4-alpha.getbootstrap.com/layout/grid/
On my website I'm using this multiselect directive several places
http://isteven.github.io/angular-multi-select/#/main
For instance I'm using it in my navbar as a language selection dropdown. However I would like to specify the width of the language dropdown to less than standard. Other places I'm using the same directive and the auto width is fine. I can change the width of the language menu by changing min-width and max-width in the css file, but this will change the width of all my multiselects.
So basically, how can I change the css of just one particular instance of a directive?
[update]
The multiselect is added like this:
<div isteven-multi-select
input-model="languages"
output-model="outputlanguages"
button-label="icon name"
item-label="icon name maker"
tick-property="ticked"
selection-mode="single"
helper-elements="filter"
on-item-click="changeLanguage(data)"
>
</div>
When the html is loaded the isteven-multi-select div will contain the following:
<span class="multiSelect inlineBlock">
<button ...>
</button>
<div class="checkboxLayer"> //here is the dropmenu itself
</div>
</span
So by editting .checkboxLayer in the css file I can adjust the width of the dropdown menu. But this is changed for all multiselect instances. It doesnt work if I add another class to the isteven-multi-select as this is the parent div.
Add a css class to the div with the directive where you want the smaller dropdown:
<div isteven-multi-select
input-model="languages"
output-model="outputlanguages"
button-label="icon name"
item-label="icon name maker"
tick-property="ticked"
selection-mode="single"
helper-elements="filter"
on-item-click="changeLanguage(data)"
<!-- Add this -->
class="thinDropdown" >
</div>
Then in your css, write this:
.thinDropdown .checkboxLayer {
width: 200px; /* Or whatever width you like */
}
I am creating a small simple web app and having some trouble creating the radio buttons I want.
I want the user to be able to decide whether they want to input the dollar value or a percentage, that would then be used to calculate a dollar value.
I want the input text box to look similar to this example:
Here is a codepen example:
CodePen Example
How can I get the radio buttons to be right on top of each other in bootstrap? Or will I need to resort to custom css to get it done?
input elements are by default displayed as inline;
You need to use display:block for them to show one on top of the other.
.input-group-addon input{
display:block;
}
You'd also need to give a specific class to this input-group so you'll be able to use this layout specific to that class only and not all input-group-addons
Since it is BootStrap, you could always wrap your radio boxes inside BootStrap classes like such. Or display block but the input height will stretch height further than adding bootstrap divs.
<div class="col-sm-12">
<div class="col-sm-12">
$<input type="checkbox" aria-label="...">
</div>
<div class="col-sm-12">
%<input type="checkbox" aria-label="...">
</div>
</div>
A sample html which contains 4 div tags, which first one has few html controls and second and third div was only used for status display based on the condition. The fourth one was used for the submit button.
The first and second one by default visibility was hidden. However, It has taken vertical space hence my submit button position has some empty space. How can I reduce that space ?
My Code:
<!-- Div 1 -->
<div>
<!-- few controls goes here -->
</div>
<!-- Div 2 -->
<div style="visibility:hidden">
<asp:CompareValidator ID="valPwd" validationgroup="valRegGroup" runat="server" ErrorMessage="Passwords don't match" CssClass="validation" ControlToCompare="txtPwd" ControlToValidate="txtConfirmPwd"></asp:CompareValidator>
</div>
<!-- Div 3 -->
<div style="visibility:hidden">
<asp:Label ID="lblStatus" runat="server" Text="" CssClass="validation"></asp:Label>
</div>
<!-- Div 4 -->
<div style="top:0px;margin-top:0px;">
<asp:Button ID="btnValidate" runat="server" Text="Renew"
CssClass="SubmitButton" onclick="btnValidate_Click" />
</div>
You could try setting display: none that way the div's don't take any room in the layout.
When displaying your status or other data, set display: block to make it visible.
Using visibility: hidden hides the element but retains the its space and position within the layout.
To read about the visibility property, see: http://www.w3.org/TR/CSS21/visufx.html#visibility
To read about the display property, see: http://www.w3.org/TR/CSS21/visuren.html#display-prop
<div style="display:none">
will solve your problem
display and visibility are different style properties
try display:none insted of visibility:hidden
for validators use display:dynamic property to reduce the space
another scenario if you are unable to chnage your and make the modification try using the below css selectors to reduce the space
div[style*="visible"] {
display:inline;
}
div[style*="hidden"] {
display:none;
}
You should use
style="display:none">
instead of
style="visibility:hidden"
This way no space will be left for the element that is not displayed.
I have some problem working with DIV Tag and Form input fields. I get the value of input field using javascript. Javascript working fine. It gets the input field value and displays in a DIV tag. The problem is, when i give a long input or long sentence, it displays in the div tag as it is. I want it to be displayed not in a long single line but in the form of paragraph. Here is my code.
<script>
function myFunc(){
var str = document.myform.aaa.value;
document.getElementById('mydiv').innerHTML=str;
}
</script>
<form>
<input type="text" name="aaa" />
<input type="button" value="Post" onclick="myFunc();" >
</form>
<div id="mydiv" width="500px" height="300px">Old text</div>
If i give it an input for example:
hello there, how are you hello there, how are youhello there, how are youhello there.
it displays it in a single line instead of paragraph format. I want it to display the above sentence in this form:
hello there, how are you hello there,
how are youhello there, how are youhello
there.
I have somewhat sort it out myself. I mean to say, if i write a sentence with spaces, it works fine but if there is a long line of letters without any space, then it does not work. What i want is, either i can type with space and without space, it should work both ways.
This doesn't have anything to do with javascript. By default a DIV tag will expand to 100% of its parent element.
If you set the width of the div to a specific percentage or pixel width, then the contents of that div will wrap accordingly.
You can use CSS to define the width, but you'll have to know how wide you would like to set it.
#mydiv {
width:50%; //I just guessed at this number
}
or
#mydiv {
width:100px;
}
alternately, you could use javascript to set it. (though it's probably best to set it using CSS)
document.getElementById('mydiv').style = "width:50%';
Try using css to set the width and height of the <div> rather than attributes.
jsFiddle
<div id="mydiv" style="width: 200px; height: 200px;">Old text</div>
Better yet create a style:
.comments {
width: 200px;
height: 200px;
}
<div id="mydiv" class="comments">Old text</div>
Use the word-wrap to fix the issue where there is no spaces.
word-wrap:break-word