I'm braking my head over this:
<label>Modiality:</label>
<select ng-model="sysinfo.modiality" required>
<option value="">Please select...</option>
<option required data-ng-repeat="modiality in modialityTypeController.items" value="{{modiality.Name}}">{{modiality.Name}}</option>
</select>
<p>{{sysinfo.modiality}}</p>
The <p> is there to proof that my binding works.
Then in another div i'm doing this:
<h1>{{sysinfo.modiality}}</h1>
But nothing shows up.... !?
Since the binding proofs it's working properly in the <p> what could possibly the reason that it doesn't work in a different DIV that's i might have overlooked?
Related
I have a normal Html Select control with following options:
<form action="/target.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" style="width: 100px; overflow-x: auto;" multiple>
<option value="volvo">Long select option.</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
The first option in the list is a bit longer that the rest. When I select it, I can see the following effect:
However, as I use the horizontal scrollbar to see the rest of the value it appears something as in the image below:
The text on the right are all lost (say both foreground and background are while). Now, I click somewhere outside the Select control, the text appears but half of them selected and rest not.
I tried this with different online html editor and all of them share same behaviour. Is there a way (any css) that I can apply so that once an option is clicked/selected the entire option is selected and not just a portion of it.
The below code is a bit hacky, but it will serve the purpose. You can add the below CSS to make sure the whole item is selected.
option:checked {
width:150px;
}
I would also suggest just increasing the width of the selector for a better user experience, if you do that, you will not encounter the above error.
Currently trying to style a responsive form using bootstrap. This form actually didn't have any responsive design applied within a separate css file before applying bootstrap, everything was purely type and effects.
But I'm having a lot of issues with a select element within this form.
For whatever reason, a select element, which comes before a series of paired radio buttons (themselves grouped within fieldsets), is cutting off both the legend element and the label element for the first radio input. It looks like this:
select element viewed w/ element picker
It looks like content-box is taking up a ton of space. Or that space is "saved" for an active select dropdown? I'm not sure why there's so much blue there ^_^ I'm probably missing something very simple.
I've sectioned the select element off (using semantic section), I've wrapped it within its own row, I've tried applying some small-but-noticeable amount of extra margin-bottom (mb-4 for example).
None of this has worked. Here's my code for this particular section:
<section class="col-8 col-md-4" id="recommend">
<label class="col-form-label" for="select">Would you recommend your stay at the Aperture
Science computer-aided Enrichment Center?</label>
<select class="form-control mb-5" name="select" id="select" required>
<option value="">-- Please select an option --</option>
<option value="yes">Yes</option>
<option value="absolutely">Absolutely</option>
<option value="of_course">Of course!</option>
</section>
Any ideas? :D
You should probably end your <select> element, as this could have unknown effects on the rest of the DOM.
<select class="form-control mb-5" name="select" id="select" required>
<option value="">-- Please select an option --</option>
<option value="yes">Yes</option>
<option value="absolutely">Absolutely</option>
<option value="of_course">Of course!</option>
</select> <!-- <- this was missing -->
My vue.js-bound input box loses its focus after any keypress. I found this similar question, but it doesn't really help me, as I don't use any keys. Here's my template code:
<DxColumn data-field="width"
caption="Spaltenbreite"
:allowEditing="false"
cell-template="width-settings" />
<!-- ... -->
<template #width-settings="cell">
<div>
<CSwitch :checked.sync="cell.data.data.width.set" size="sm" color="success" />
<div class="input-group input-group-sm" v-if="cell.data.data.width.set">
<input type="text" v-model="cell.data.data.width.width" class="form-control text-right" placeholder="auto" />
<select v-model="cell.data.data.width.unit" class="input-group-append custom-select custom-select-sm">
<option value="">Bitte wählen</option>
<option value="DEL">Nicht festlegen</option>
<optgroup label="Absolute Einheiten">
<option value="cm">Zentimeter</option>
<option value="mm">Millimeter</option>
<option value="in">Zoll</option>
<option value="px">Pixel</option>
</optgroup>
<optgroup label="Relative Einheiten">
<option value="em">-fache der Schriftgröße</option>
<option value="%">% des Bildschirms</option>
</optgroup>
</select>
</div>
</div>
</template>
This is part of a DevExtreme dxDataGrid cell definition. How can I prevent the field from losing it's focus every time?
It's a bit hard to tell what is going on with this code only, so I'm going to take a guess.
I see the input has v-model="cell.data.data.width.width" and a parent has v-if="cell.data.data.width.set" while that shouldn't cause issues, and it may be possible that there may be other similar conditionals, I believe the change in v-model is triggering a re-render. If that is the case, I think you may be able to resolve it by adding a key to the input. Something that doesn't change, ideally something like cell.data.data.width.id
TL;DR;
Give the input a key
For people like me finding this; Using Vue.js with Semantic UI:
If the form is changing based on the data you input, you need to assign the <sui-form-field> a static (and unique) key.
The input(s) within don't strictly need teir own key(s), unless they are also subject to change (in order and/or number)
I'm using a combobox (select) to display countries. I doing this using Bootstrap.
This is the code
<select class="form-control form-control-user" id="inputCountry" name="country" placeholder="Country">
<option value="NL">Netherlands</option>
<option value="BE">Belgium</option>
<option value="LX">Luxembourg</option>
<option value="GR">Greece</option>
<option value="NO">Norway</option>
</select>
When I go to my browser, my combobox is empty. When I click it I can see the entries. When I select an entry, nothing shows in the combobox. When I try to echo the value of the combobox, I get the value, so it's a visual issue.
removing 1 of the classes (form-control or form-control-use) will fix this, but the design I want gets lost.
Is there any way to fix this?
I have tried your code block and it was working without a problem.
This is the JSFiddle link which I have done some modificatoins:
https://jsfiddle.net/mw5904uf/
Here, I have created form-control-user css class. I am not sure that this is what you want. Anyhow make sure you have linked css and js files correctly as Charlene said.
In addition, since your placeholder didn't work, I have modified that by adding another option.
I am trying to show content depending on the option selected from the user. I tried this way
<select class="form-control" id="Intervencion" >
<option selected disabled></option>
<option (click)="show">Yes</option>
<option>No</option></select>
<div *ngIf="show"><p>Text to show</p></div>
I do not understand the problem. There is a special directive for this?
... You don't seem to know how basic HTML works. Sorry to say that, but you have to be aware of what you're doing is completely barbaric.
Here is the solution for you :
<select [(ngModel)]="intervencion">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div *ngIf="intervencion === 'yes'">Text to show</div>
That being given, you should really follow Angular's tutorials, because that's one of the first examples they give to explain how ngModel works.