I want to style below dropdown select option using rails form select or collection_select
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input name="gender" type="hidden" value="Male"/>
<div class="default text">Select gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male" data-text="Male">
<i class="male icon"></i>
Male
</div>
<div class="item" data-value="female" data-text="Female">
<i class="female icon"></i>
Female
</div>
</div>
</div>
How can I go about it? Because I'm finding it difficult to custom style rails select helper.
Well, it is pretty difficult to parse your html into Rails code without actually working with it, but you may find a good start here.
As you can see in that link, you can pass custom blocks for options:
# A block can be passed to select to customize how the options tags will be rendered. This is useful when the options tag has complex attributes.
select(report, "campaign_ids") do
available_campaigns.each do |c|
content_tag(:option, c.name, value: c.id, data: { tags: c.tags.to_json })
end
end
I think it is your way to go.
Related
I am trying to do a manual rendering of Django forms and it generates the code below, is there a way to get rid of the texts that do not have any HTML tags, a good example is the texts "Currently: " and "Change:" it is really difficult to style with CSS.
<div class="row align-center mb-0 text-center">
<div class="col-md-12">
<div class="fuzone mb-2">
<div class="fu-text">
<span><i class="mdi mdi-image-area"></i> Click here or drop files to upload</span>
</div>
Currently:
realtor/download.jpeg
<input type="checkbox" name="image-clear" id="image-clear_id">
<label for="image-clear_id">Clear</label><br>
Change:
<input type="file" name="image" accept="image/*" class="clearablefileinput form-control-file" id="id_image">
</div>
</div>
You are safe to highlight 'Currently:' and 'Change:' and delete them without affecting your code. :)
On the other hand, if you'd like to style them, you can wrap them in divs and assign them css styling by referencing their class names.
Imagine divs like physical boxes that hold content. Very rarely should anything not be in a div.
I have an ASP.net Core MVC view with several Bootstrap 4 tabs. Each tab reveals parts of the form fields which are part of the ViewModel.
Each tab has its own form and controller it posts to with a button, and that works well.
However, when any of the forms is posted, validation triggers for all form fields on all tabs.
<div class="col-lg-12">
<ul class="nav nav-tabs nav-tabs-inverse nav-justified nav-justified-mobile" data-sortable-id="index-2">
<li class="nav-item"><i class="fa fa-city fa-lg m-r-5"></i> <span class="d-none d-md-inline">Details</span></li>
<li class="nav-item"><i class="fa fa-phone fa-lg m-r-5"></i> <span class="d-none d-md-inline">Scheduled Calls</span></li>
</ul>
<div class="tab-content" data-sortable-id="index-3">
<div class="tab-pane active show" id="tab1">
<form asp-action="Details">
.....form and button here
</form>
</div>
<div class="tab-pane active show" id="tab2">
<form asp-action="ScheduleCall">
.....form and button here
</form>
</div>
</div>
</div>
Is there any way that DataAnnotations validation on the ViewModel will only trigger for the visible fields, or any similar way of doing this?
I've tried splitting each tab into sub objects but this has no effect.
I found this question, though they seem to be going into the weeds with JQuery.
Require validation only if the field is visible
Is there an MVC Core way to do this that's best practice / doesn't require custom JavaScript?
I would like to recreate the following Dropdown from Semantic UI, in which a <label> is inserted for the dropdown menu using UI React:
(https://semantic-ui.com/collections/form.html#dropdown)
This is the markdown I'd like my React app to create:
<div class="ui form">
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
I'm struggling to accomplish this with the React UI implementation of Semantic UI.
My current attempt is this:
<Dropdown placeholder='What grade is your child in?' fluid selection
options={ grades }
labeled={ true }
name={ `survey_response[grade_${this.state.id}]` } />
It's very important that this is labeled clearly. I've found in user research that the placeholder is confusing as a question prompt alone.
There is documentation for adding a label, however, it requires nesting child components under Dropdown component, which interferes with my use of the "options" prop. Error is as follows:
Warning: Failed prop type: Prop children in Dropdown conflicts
with props: options, selection. They cannot be defined together,
choose one or the other
Thank you, Stackoverflow!
If you are using it inside a Form you can do:
<Form>
<Form.Dropdown
label='Gender'
options={//your array of options}
selection
/>
</Form>
so I'm trying to use binding in Angular2 so that when someone selects a name from a dropdown menu at the top of my webapp then that name replaces specific placeholders throughout the form so it displays the person's name rather than "this person" or "your teammate".
Not only do I want the name value of the object to be substituted into those placeholders, but I also want the email value to be pulled as well so that I can call on that from a mailing service when I press submit to send an email.
I've managed to get the binding working, so at the moment when I select the name it inserts it into the text, but I'm having trouble figuring out how to make placeholders that can be replaced with the selected name.
Also, how can I pull 2 values (name & email) from one ng-model?
an excerpt of my code:
<div id="toggle" class="row">>
<div class="dropdown">
<div class='col-md-6 col-md-offset-5'>
<select [(ngModel)]="selectedTeammate.name">
<option *ngFor="let teammate of teammates" value= {{teammate.name}}>{{teammate.name}}</option>
</select>
</div>
</div>
</div> s
<form>
<div id="questions">
<div id="question1" class="row">
<div id="questionbox" class='col-md-10 col-md-offset-1'>
<p>{{question1a}} {{ selectedTeammate.name }} {{question1b}} {{ selectedTeammate.name }} {{question1c}}</p>
</div>
<div id="textbox" class='col-md-6 col-md-offset-3'>
<textarea id="styled" placeholder="Why or why not?"></textarea>
</div>
</div>
<div id="question2" class="row">
<div id="questionbox" class='col-md-10 col-md-offset-1'>
<p>{{question2a}} {{selectedTeammate.name }} {{question2b}}</p>
</div>
<div id="textbox" class='col-md-6 col-md-offset-3'>
<textarea id="styled" onfocus="this.value=''; setbg('#e5fff3');" placeholder="Please provide a brief explanation"></textarea>
</div>
</div>
What it looks like:
The selected name is inserted into the string, but I need a placeholder to fill the gap in the sentence until a name is selected
If anyone can help me with my dropdown menu as well, then that would be absolutely fantastic! I've tried bootstrapping my dropdown to make it prettier, and even copied code from the bootstrap website to test, but the dropdown doesn't display any of the options when clicked. Here is the code I'm using for it.
<div class="dropdown row">
<div id="dropdown column" col-md-3 col-md-offset-3 style="margin: 0 auto; text-align: center;">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" >Select a teammate youve worked with!
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
The dropdown displays correctly, but when clicked nothing happens and I don't see any of the list objects. I need this to work with ngFor just like the above dropdown does.
I'm also having issues trying to setup a favicon for the site.
I've included this in my of my index file:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
and here is the file path of my favicon image:
C:\Users\user1\Desktop\Projects\sds-app\src\app\assets\Pictures\favicon.ico
I know this is a lot and maybe not formatted in the best manner, but let me know if there is any additional information you'd like. If you can help me with any of these questions I'd very much appreciate it!
Thanks!
In bootstrap select option you can show default show option as Select so you have to add one more line as option.
<select [(ngModel)]="selectedTeammate.name">
<option value="">Select</option>
<option *ngFor="let teammate of teammates" value= {{teammate.name}}>{{teammate.name}}</option>
</select>
So code will look like this.
Using ngValue you can pull the whole Object from your [(ngModel). To set a "placeholder" for your Object, so that you have some value there in your view until replaced with your chosen teammate, you can initialize the selectedTeammate with some values, e.g:
selectedTeammate: Object = {id: null, name: 'your teammate', e-mail: ''};
And as mentioned, use ngValue to bind the whole object, and change the ngModel to be e.g selectedTeammate like I have used in these examples.
<select [(ngModel)]="selectedTeammate">
<option *ngFor="let teammate of teammates" [ngValue]="teammate">{{teammate.name}}</option>
</select>
Now when you have chosen a teammate, selectedTeammate consits of the whole object, not only the name. From there you can pull the e-mail related to that teammate.
Hope this helps! :)
Demo plunker
I started to use Foundation 5 for my web project, but it seems full of bugs, and the form validation just simply doesn't work. So I switched to Bootstrap.
However, there was a feature in Foundation called Pre/Postfix Labels & Actions (see here) and I want it in Bootstrap.
I have searched and searched but cannot find anything even remotely similar. I can use the glyphicon, glyphicon glyphicon-gbp, to show the "£" sign before my form input, however I am unable to get it to flow correctly using the grid system.
I have a JS Fiddle here: http://jsfiddle.net/kAnjN/
This is my HTML:
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="monthly_rent" class="col-sm-2 control-label">Monthly Rent</label>
<div class="col-sm-4">
<span class="glyphicon glyphicon-gbp"></span>
<input type="text" name="monthly_rent" class="form-control">
</div>
</div>
</form>
Does anyone have any advice? I am a PHP developer and front-end things like this frustrate me! Bootstrap and Foundation are supposed to make it easier and just "work" but I always have to search for hours for solutions to tiny problems.
I basically want to achieve what is on the Foundation link above.
Use the .input-group class:
<label for="monthly_rent" class="col-sm-2 control-label">Monthly Rent</label>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-gbp"></span>
</span>
<input type="text" name="monthly_rent" class="form-control">
</div>
</div>
Example