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>
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'm currently working on a project for a client who is creating a share tribe website which also incorporates bootstrap.
Here is the link.
You can view the source code on this website to see the code.
I have tried on the website to alter the css so that I can change the height of the input field, however my code in the index file doesn't change anything.
Also how do I go about changing the header bar at the top from white to have a clear background?
Also, I tried altering the css in the customstyles.css , and by manually inserting the `height="10px"' using 'inline css' however both of these didn't work.
Please let me know how to change the css to make this possible. Here is a JSFiddle too, to make it clearer:
JsFiddle Link
<div class="col-md-4">
<div style="display: table; margin: 0px auto">
<div class="input-group">
<input type="text" id="q" name="q" class="form-control" placeholder="Where are you going?" style="height: 10px">
<span id="submit" class="input-group-addon btn btn-success">Submit</span>
</div>
</div>
</div>
Easy as heck using jQuery if you have the option
$('.class').css('height','110px');
For multiple characteristics:
var params = ['height','width','text-align'];
var values = ['1000px','100px','center'];
for (p in params) {
$('#id').css(params[p], values[p])
}
Your customstyles.css is working good and its call on page,
You just need to change in the class
.marketplace-lander input[type=text] -> padding
parameter. padding is creating problem for you in some resolutions.
I am trying to set custom styles for checkbox in a RadTreeView. It's simple enough just a different color for checked boxed and another color for unchecked boxes. But I am not sure how to do this.Couldn't find any built in Telerik method/property for this. Tried to do it with css like I usually do by hiding the checkbox and styling a div/span like a checkbox. But the html here is generated from RadTreeView and I am not sure how to apply the same here. The html that gets generated looks like this,
<li class="rtLI">
<div class="rtMid">
<span class="rtSp"></span>
<span class="rtPlus"></span>
<label>
<input type="checkbox" class="rtChk">
<span class="rtIn">Boston</span>
</label>
</div>
Any suggestions on how to style checkboxes in the RadTreeview? Thanks.
If we take this demo: http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/checkboxes/defaultcs.aspx
It looks they are using RadFormDecorator to style the checkboxes.
Your html looks like the one from the right hand side and its style is set by this css class:
.RadForm_Silk.RadForm.rfdCheckbox input[type="checkbox"]
{
background-image: url('FormDecorator/CheckBoxSprites.png');
}
So, if you too are using RadFormDecorator then you can override the above css rule by adding your own rule with higher specificity, e.g.
div.RadForm_Silk.RadForm.rfdCheckbox input[type="checkbox"]
{
background-image: url('your_own_image.png');
}
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/