I am using a nested model form to edit all phone numbers of a client. I think the way simple_form displays it can be improved if I place all phone attributes on one line.
Here is a code I currently have:
.main
.form-inputs
= f.input :lname, label: t('client.lname')
= f.input :fname, label: t('client.fname')
= f.simple_fields_for :phones do |phones_form|
= phones_form.input :phone, label: 'Phone'
= phones_form.input :kind, collection: [:home, :work, :cell, :unknown], label: 'Kind'
= phones_form.input :_destroy, as: :boolean, label: 'Delete?'
.form-actions
= f.button :submit, value: t('client.submit'), class: 'btn btn-primary'
and it produces the following:
Is it possible to put nested model's form attributes on one line (like this)?
Yah this is a CSS issue. In short you write it in style like so :
= phones_form.input :kind, collection: [:home, :work, :cell, :unknown], label: 'Kind', style: 'width: 50px;'
Related
= f.collection_select :budget_line_id,
#budget_lines, :id, :description,
{ prompt: true },
class: 'form-control input-sm form-control-sm'
I need to change the text color of elements of this drop down list.
If you can't apply a CSS rule for one of your classes you can add an inline style tag to your collection_select helper:
= f.collection_select :budget_line_id,
#budget_lines, :id, :description,
{ prompt: true },
class: "form-control input-sm form-control-sm",
style: "select { color: #333333; }"
If you have a stylesheet you should be able to add:
.form-control select option {
color: #333333;
}
It may require some tweaking either way, depending on the HTML that is being rendered, but one of those should get you close.
I'm starting to use Storybook in an Angular component library.
It works fine for components with inputs like booleans or strings, it shows those inputs using controls.
But there are certain components where the input is an object.
For those components I'm able to provide an object, but users are able to edit a string with the JSON representation of the object instead of several inputs.
How do I do this in a user-friendly way so users can edit those properties in the control without using a JSON representation of the object?
If you're using Knobs, you can write them like this:
This sample here:
class sample{
title: string;
text: string;
settings: {
language: string;
disabled: boolean;
}
}
would turn into this:
template: `
<div style="max-width:80vw;margin:auto;">
<app-custom-component
[title]="this.titleKnob"
[text]="this.textKnob"
[settings]="this.settingsKnob"
></app-custom-component>
</div>
`,
props: {
titleKnob: text('Title',''),
textKnob: text('Text area', ''),
settingsKnob: {
language: text('Default Language', 'en'),
disabled: boolean('Disabled', false),
}
}
I am using haml.erb file. I would like to add space between two buttons in UI. Now the two buttons are appearing one after one without space. How can i do?
= link_to :back, :class => "btn btn-success", :href => '/pt_setup' do
%i.icon-arrow-left.icon-white
Back // does not workout
=link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success'
you can add margin left on second button. you can add class on second button e.g
=link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success left-margin'
and then you can add css in your haml file
:css
.left-margin { margin-left: 2px }
Or you can add inline css to one of these buttons.
As you are using Bootstrap
Wrap your buttons in a div with class='col-xs-3' (for example).
Add class="btn-block" to your buttons.
Note: No need to use extra css unnecessary
Your current code puts a space behind the text 'Back', which is inside your link/button, so of course this will not have any affect on the spacing between the buttons themselves.
It has been a while since using haml but something along the lines of:
= link_to :back, :class => "btn btn-success", :href => '/pt_setup' do
%i.icon-arrow-left.icon-white
Back
= link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success'
Should work in your case.
However, why leave layout / styling to your template at all? use CSS for organizing your layout, put a margin on the right side of .btn class elements, or add a new custom button class and add the margin to limit the scope of buttons affected if you don't want a global margin setting on all buttons.
Try:
= link_to :back, :class => "btn btn-success", :href => '/pt_setup' do
%i.icon-arrow-left.icon-white
Back // does not workout
=link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success', :style => 'margin-left:10px;'
If you don't want to add a css for spacing. You can add ">" at the end of your brackets for space before and "<" for space after.
Example:
%form
%input{name: "search", placeholder: "Text Here", type: "text"}
%button{type: "submit"}>
%i.fa.fa-search
Will space before the button, separating it from the input text box
Or Equivalently:
%form
%input{name: "search", placeholder: "Text Here", type: "text"}<
%button{type: "submit"}
%i.fa.fa-search
Will space after the input box
I want to add a tooltip to certain cells of a dojo DataGrid, but I don't want to use dojo tooltips. I want to use HTML tooltips so they have a consistent look-and-feel as the tooltips on my buttons.
In a Dojo Tree, there is a tooltip attribute that does exactly this. Is there a way to do this for DataGrids?
This can be done by writing a custom format function for the cell.
You need a custom structure object when you create the grid.
May look like this:
var layout = [[{
name: 'Type',
field: 'type',
width: 2,
},{
name: 'Name',
field: 'name',
width: 'auto',
defaultValue: '',
editable: true,
formatter: dojo.hitch(this, this.formatNameCell)
}]];
Then define a format function for the 'Name' cells:
formatNameCell(name){
return "<span title='" + name + "'>" + name + "</span>";
}
I've embeded the following server side code within <script> tag.
<% Dim dataTable As DataTable = cTab.getTabs(Session("UserID"))
If (dataTable.Rows.Count > 0) Then
For i As Int16 = 0 To dataTable.Rows.Count%>
{
contentEl: 'tab'+'<%dataTable.Rows(0)("TabID").ToString()%>',
title: '<%dataTable.Rows(0)("TabName").ToString()%>',
closable: false,
autoScroll: true
},
<% Next
End If %>
But it is not returning the desired results due to syntax problems. How can I write it correctly?
You've only given us a portion of the entire javascript, so we can't analyze what the surrounding script looks like in order to look for syntax issues. The snippet you've given will just start with an opening curly brace, which is not valid just standing by itself. What's preceeding it?
Besides that, if you want to output a string to the script, you need to do it using Response.Write or using the <%= %> shortcut. So for one, you need to do:
contentEl: 'tab'+'<%= dataTable.Rows(0)("TabID").ToString() %>',
title: '<%= dataTable.Rows(0)("TabName").ToString() %>',
(Notice the = signs).
Without seeing the surrounding code....
Looking at the loop each item is generated with a trailing comma (,) this means that there will be an extra comma at the end which is not valid is some browsers.
Invalid Example
var myObjArr = [
{
contentEl: 'tab'+'123',
title: 'name123',
closable: false,
autoScroll: true
},
{
contentEl: 'tab'+'456',
title: 'name456',
closable: false,
autoScroll: true
},
];
Valid Example
var myObjArr = [
{
contentEl: 'tab'+'123',
title: 'name123',
closable: false,
autoScroll: true
},
{
contentEl: 'tab'+'456',
title: 'name456',
closable: false,
autoScroll: true
}
];
Note the second sample has no extra comma (,).
Assuming your loop is working you probably don't want to have the same value every time. I think you might want to use i instead of 0. That is just a wild guess though since I really can't tell if the loop should work or not.
contentEl: 'tab'+'<%= dataTable.Rows(i)("TabID").ToString()%>',