I am trying to have fields arranged in 2 columns within a horizontal form, but I cannot add a col-md-6 class to a form-group element.
The form should like something like this Fiddle.
I have checked the source code, and column size classes are explicitly removed from the form-group and applied to a new contained div element.
The net result is that the inner control is resized properly, but, as the form-group is still considered a 12 units sized element, the next control is placed in a different line.
I was able to achieve the layout I wanted using:
#Html.Bootstrap().Div().AddCss( Css.ColMd6 )
.AddChild( form.Input( "divChild", "Div Child" ) )
or
#Html.Bootstrap().Div().AddCss( Css.ColMd6 )
.AddContent( form.Input( "divContent", "Div Content" ) )
or
using (Html.Bootstrap().Div().AddCss( Css.ColMd6).Begin() )
{
#form.Input( "divusing", "Div Using" )
}
or
<div class="#Css.ColMd6" >
#form.Input( "htmldiv", "HTML Div" )
</div>
but I'd like a cleaner syntax like the following:
#form.Input( "name", "label" ).AddGroupCss( Css.ColMd6 )
but this would require adding a new extension AND not removing col sizing classes from form-group elements. Would this be possible?
Alternatively, can you suggest any other ways to get a multi columns layout in FluentBootstrap?
Related
I'm trying to iterate an array and present it as checkboxs so that the user can later check/uncheck them
I'm not sure how to make the checkbox be preselected since i have an Array of items
but i'm iterating an internal array
so far i have this
<div *ngFor="let privilege of group.privileges" style="text-align:left">
<div class="ui-g-4">
<p-checkbox label="{{privilege.privilegeName}}" [(ngModel)]="{{privilege.show <-- this is not working of course}}" name="fixco-privileges-view" value="{{privilege.privilegeName}}"></p-checkbox>
</div>
</div>
the checkbox and their label are appearing nice but not preselected...
If show property of a privilege is a boolean, just add binary="true" to your p-checkbox.
Also, remove the square braces in [(ngModel)]="{{privilege.show}}".
So your HTML code becomes
<p-checkbox binary="true" label="{{privilege.privilegeName}}" [(ngModel)]="privilege.show" name="fixco-privileges-view" value="{{privilege.privilegeName}}"></p-checkbox>
See Plunker
Given the following:
<div id="#my-container">
<div class="title">Companies</div>
<div class="tab active tab-apple">Apple</div>
<div class="tab tab-google">Google</div>
</div>
When page is loaded without any tab clicks yet, whichever tab with the default active class, needs to go in the .title div. For the example above, <div class="title">Apple</div>
On click of a tab, the class is switched to active, and vue.js needs to update the .title div once again.
How can this be done with vue.js? I've tried but not able to get it to work as intended.
The answer by David is one way to do it. But Vuejs offers in-line computations for this. So, no need to hook into any CSS event. Here's some code to explain:
Create a data property active_tab, just like David mentioned. And then bind it's value just like he's done it. In your tabs, add an click event and at that event, assign appropriate value to active_tab.
<div class="tab active tab-apple" #click="active_tab = Apple">Apple</div>
<div class="tab tab-google" #click="active_tab = Google">Google</div>
Now, to dynamically assign the active class to the respective tab, make the class attribute, a computed property, like this:
<div
:class="['tab', active_tab == 'Apple' ? 'active' : '', 'tab-apple']"
>
Apple
</div>
What this code is basically doing is, :class makes class a computed property. Then the commas in the array divide the statement. So, the computation will always add tab and tab-apple classes. But, only if active_tab == 'Apple' then ? add 'active' else : add ''
Not sure which CSS framework you are using, but normally I hook into the events thrown by the tab switching (many CSS frameworks provide this access). Once hooked into it, you can write a Vue custom directive that will take that event and use it to update a VM attribute that indicates which tab is active.
Then you can use normal mustache templating to get it into your template:
<div class="title">{{ active_tab }}</div>
I'm using Algolia instantsearch.js for search, and to display my result page, I'm using Bootstrap 3, and I'd like hits to be displayed in 3 columns:
qry | hit1 | hit2
| hit3 | hit4
| hit5 | hit6
(where qry = the search query input widget)
etc..
If it's mobile, it should display as:
qry
hit1
hit2
hit3
etc.
Can someone help me with the html/css I can use to implement this?
Thanks!
Basically, you want to use bootstrap rows and grid layout col-{xs,sm,md,lg}-X (More info about the grid layout here).
One interesting property with bootstrap is that if you declare a block as being col-YY-X, if the screen width is under the dimensions YY is associated with, it automatically expands to the full width.
instantsearch.js's widgets expose a cssClasses parameter that allows you to customize the classes of the underlying markup.
To easily do two columns, all you need to do is declare the root element of the cssClasses as being a .row, and each result as a .col-sm-6 (or .col-md-6 or .col-lg-6 depending on which screen size you want it to apply).
By combining them, you can have some really interesting layouts.
See this JSFiddle
Here, I've extended a bit the idea. Try to resize the view, and you'll see that it automatically picks a number of results to display per line depending on the width by combining multiple col-YY-X classes on the hit widget.
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
empty: 'No results',
item: '<div class="hit">{{title}}</div>'
},
hitsPerPage: 6,
cssClasses: {
root: 'row',
item: 'col-lg-3 col-md-4 col-sm-6'
}
})
);
As you can see, I've also added an inner class to the item template to be able to use the item as a wrapper with padding inside to avoid having the hits glued to each other. I apply the border to the inner element, because adding margins to bootstrap grid elements is not the right solution.
The layout itself is really simple, you can just nest rows together:
<div class="container-fluid">
<div id="search" class="row">
<div class="col-sm-4">
<div id="input"></div>
</div>
<div class="col-sm-8">
<div id="hits" class="row">
</div>
</div>
</div>
</div>
I'd like to create a dijit fieldset which starts up collapsed.
The documentation ( http://bill.dojotoolkit.org/api/1.9/dijit/Fieldset ) of dijit fieldset says there's only an argument called toggleable. But that's not what I want.
Is there realy no way to start it collapsed like
<div id="myFieldset" data-dojo-type="dijit/Fieldset" data-dojo-props="collapsed:true">
<legend>myLegend</legend>
<div id="aTextBox" name="aTextBox" data-dojo-type="dijit/form/TextBox"></div>
</div>
You need to set the dojo fieldset value of open equal to false like so
<div id="myFieldset2" data-dojo-type="dijit/Fieldset" data-dojo-props="open:false">
<legend>myLegend</legend>
<div id="aTextBox2" name="aTextBox" data-dojo-type="dijit/form/TextBox"></div>
Here is an example of your code and the new version which uses the open property
http://jsfiddle.net/kagant15/5rvwe1c0/
I'll try to keep it simple.
I have a list of similar rows like this:
HTML code:
<li ...>
<div ... >
<some elements here>
</div>
<input id="121099" class="containerMultiSelect" type="checkbox" value="121099" name="NodeIds">
<a ...>
<div ... />
<div ... >
<h2>Identified Text</h2>
<h3>...</h3>
</div>
</a>
</li>
I want to click the checkbox with a certain text, but I can't use any of its elements, because they are the same for all the list, and id is generated automatically. The only thing can be differentiated is the h2 text. I tried :
browser.h2(:text => /Identified/).checkbox(:name => "NodeIds").set
and I got UnknownException which is obvious because checkbox is not nested with a tag.
What can I do in this case?
Thanks
The h2 and checkbox are related by the li, which is a common ancestor. Therefore, to find the checkbox, you can look for the li that contains the h2 element. I find the most readable approach to doing this is by using the find method of the element collection. The find method basically allows you to make custom locators.
The code would be:
parent_li = browser.lis.find do |li|
li.h2(:text => 'Identified Text').present?
end
parent_li.checkbox.set
Notes:
browser.lis creates a collection of all li elements.
find iterates through the lis and returns the first element that has the block evaluate as true - ie the first li where an h2 with the specified text is present.
First have a look at this explanation
http://jkotests.wordpress.com/2012/12/20/finding-a-parent-element-that-matches-a-specific-criteria/
Now following a similar approach,
First locate the element that has a unique identifier
parent=#browser.h2(:text=>"Identified Text")
Now we have to iterate over to the parent element which contains both the checkbox and text against it.
parent=parent.parent until parent.tag_name=="li"
Once the control is on the li element, simple click on the checkbox using.
parent.checkbox.click