My dropdown has several values, when clicks on dropdown to see the list, grey has full 'y'. Upon selection, bottom portion of Grey gets chopped. This is happening with all similar characters.
Edit:
<div class="col-lg-6"><div class="col-lg-6">
<div class="form-group" ng-repeat="attrib in col1Attribs">
<div ng-class="invalidCodeClass">
<label class="control-label" for="txtCode">{{attrib.displayText}}</label>
<select id="ddl{{attrib.configType}}" class="form-control">
<option ng-repeat="c in configOptions(attrib.configType)" value="{{c.configId}}">{{c.configValue}}</option>
</select>
</div>
</div>
</div>
I don't think the problem is in your html or js code but rather with the css applied by the particular browser with which you are viewing the page.
Try changing the (font) styling on the select list; some suggestions:
1. reducing font size
2. increase line-height on select
3. removing styling options on select as #yuujin has suggested.
Probably with one of those changes you will be able to resolve the issue.
Related
I am building a lightning web component that uses a combobox. It seems to be having its dropdown portion cut short by the bounds of its container.
I've tried adding height, z-index, overflow, and margin modifiers to the style sheet for the input element and its container, and the only thing that's had a visible effect is adding margin to the combobox's container, which just makes more space for the dropdown to show its contents but doesn't solve the problem.
Here is an excerpt of the html file:
<div class="slds-col slds-grid">
<!-- Complete Task -->
<div class="slds-grid slds-col slds-size_2-of-4 slds-p-right_small slds-truncate">
<div class="slds-col">
<div class="slds-border_bottom" style="background-color: #ecd4b566">Log a Call</div>
<div class="slds-grid_vertical slds-p-top_small">
<div class="slds-col">
<lightning-combobox
class="spencer_combobox"
variant="label-hidden"
placeholder="-- Call Result --"
options={callResults}
value={selectedResult}
required
onchange={handleResultSelection}>
</lightning-combobox>
</div>
<div class="slds-col">
<lightning-textarea maxlength=255 placeholder="Write comments here" onchange={handleComment} value={commentValue}></lightning-textarea>
</div>
<div class="slds-col">
<lightning-button class="slds-col" variant="Brand" label="Complete Task" onclick={handleCompleteTaskClick} disabled={buttonDisabled}></lightning-button>
</div>
</div>
</div>
</div>
I expected the dropdown to be visible on top of the other elements, but it ends up hidden or cut off.
Here is a screenshot; the dropdown menu isn't being cut off by the next element below it, it's actually getting cut off by its own bounds.
Figured it out.
I put slds-truncate in the class of the container, and that comes with overflow:hidden, so I was able to just remove the truncate or edit the style sheet to fix the problem.
I'm trying to deal with the issue of scope inside of an ng-repeat loop - I've browsed quite a few questions but have not quite been able to get my code to work.
Controller code:
function Ctrl($scope) {
$scope.lines = [{text: 'res1'}, {text:'res2'}];
}
View:
<div ng-app>
<div ng-controller="Ctrl">
<div ng-repeat="line in lines">
<div class="preview">{{text}}{{$index}}</div>
</div>
<div ng-repeat="line in lines">
<-- typing here should auto update it's preview above -->
<input value="{{line.text}}" ng-model="text{{$index}}"/>
<!-- many other fields here that will also affect the preview -->
</div>
</div>
</div>
Here's a fiddle: http://jsfiddle.net/cyberwombat/zqTah/
Basically I have an object (it's a flyer generator) which contains multiple lines of text. Each line of text can be tweaked by the user (text, font, size, color, etc) and I want to create a preview for it. The example above only shows the input field to enter text and I would like that to automatically/as-you-type update the preview div but there will be many more controls.
I am also not sure I got the code right for the looping index - is that the best way to create a ng-model name inside the loop?
For each iteration of the ng-repeat loop, line is a reference to an object in your array. Therefore, to preview the value, use {{line.text}}.
Similarly, to databind to the text, databind to the same: ng-model="line.text". You don't need to use value when using ng-model (actually you shouldn't).
Fiddle.
For a more in-depth look at scopes and ng-repeat, see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?, section ng-repeat.
<h4>Order List</h4>
<ul>
<li ng-repeat="val in filter_option.order">
<span>
<input title="{{filter_option.order_name[$index]}}" type="radio" ng-model="filter_param.order_option" ng-value="'{{val}}'" />
{{filter_option.order_name[$index]}}
</span>
<select title="" ng-model="filter_param[val]">
<option value="asc">Asc</option>
<option value="desc">Desc</option>
</select>
</li>
</ul>
So, I'm actually new to angularJS and I've been searching for a while and trying different ways to achieve something, but it seems impossible, to me.
I have this ng-repeat that should show only one of my 6 position array. When I click in "Change", than I should load the second and then the third and so on, until all my data have been accessed and changed by the user, that's why I limited it to 1.
The Professor's select should load according to a parameter from the current ng-repeat class. I have no idea how to solve this problem. I'm trying right now to use a service to load the professor's dropdown, but with no success.
<div class="row" **ng-repeat="class in classes | offset:currentPage | limitTo: 1"** on-finish-render="ngRepeatFinished">
<div style="display: block;">
<div>
<p><label for="">Change:</label> {{ class.professorName }}</p>
</div>
<div>
<p><label for="">By:</label>
<select id="professor" name="professor" class="form-control">
<option ng-repeat="professor in professors" value="{{professor.id}}">{{ professor.name }}</option>
</select>
</p>
</div>
</div>
</div>
<hr>
<center><button type="button" ng-click="change(class.classId)" class="btn btn-primary">Change</button></center>
</div>
What's the best way to achieve something like this (Show only one item each time and after user submits the form, go to the next position... and for each ng-repeat item, I have to reload the professors dropdown)?
Thank you!
Am I understanding you correctly, you want
ng-repeat class in classes //limit 1 //index i.e. [0] +1 change index after button click so you move to the next class index location?
If your setting a value of professor.id in the class or a property that isn't set or is null/undefined before the button, then just add this to your parent div with the loop of class in classes.
ng-if="!class.propName" //if property/dropdown not set
If this isn't what your looking for please expand on your question.
Using jQuery Mobile and AngularJS together, without a plug-in but having read about it, loading jQuery first, and the two frameworks are mostly playing very nicely and quite powerful having both.
Trying to render jQuery Mobile checkboxes with
<div data-role="fieldcontain">
<legend>Showing more lodges slows the display</legend>
<fieldset data-role="controlgroup" data-type="horizontal">
<label ng-repeat-start="(lodgekey, lodge) in data.lodges" for="chooser_{{lodgekey}}">{{lodge.lodgetitle}}</label>
<input ng-repeat-end id="chooser_{{lodgekey}}" type="checkbox" ng-model="lodge.selected" />
</div>
</fieldset>
</div>
Problem is that jQuery Mobile finishes setting up the checkbox as a button prior to Angular doing the repeat. So the repeated checkboxes stack up vertically even though I have used data-type="horizontal" in the fieldset, and each show as first/last orphan - which they are before AngularJS does its ngRepeat. Viewing the code example at http://demos.jquerymobile.com/1.0a4.1/docs/forms/forms-checkboxes.html and looking at the rendered DOM shows the way it should render.
My solution so far has been to reproduce the jQuery Mobile form using Angular, but this is not ideal, here is my code:
<div data-role="fieldcontain" id="lodge-chooser">
<legend>Showing more lodges slows the display</legend>
<fieldset data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
<div class="ui-checkbox" ng-repeat="(lodgekey, lodge) in data.lodges">
<label ng-class="{'ui-btn-active':lodge.selected, 'ui-corner-left':$first, 'ui-corner-right':$last}" for="{{lodgekey}}">{{lodge.lodgetitle}}</label>
<input id="{lodgekey}}" type="checkbox" ng-model="lodge.selected" />
</div>
</fieldset>
</div>
and CSS:
/* remove incorrect rounded corners which appear on all buttons*/
div#lodge-chooser label.ui-btn.ui-corner-all {
border-radius:0!important;
}
/* reinstate rounded corners in correct places */
div#lodge-chooser label.ui-btn.ui-corner-left {
border-bottom-left-radius:inherit!important;
border-top-left-radius:inherit!important;
}
div#lodge-chooser label.ui-btn.ui-corner-right {
border-bottom-right-radius:inherit!important;
border-top-right-radius:inherit!important;
}
This works, noting that the div.ui-checkbox is nested redundantly because jQuery Mobile still adds it in but my addition provides the styles needed and the extra nested div doesn't appear to do any harm.
I am creating a form where the user can configure a recurring event, so there are a large number of controls. At the top is a checkbox to enable/disable the schedule.
How can I disable, but not hide, the entire section based on the checkbox? If it is checked, the user should be able to make modifications to the schedule. If it is not checked, no changes should be allowed.
I'm fairly certain I can use the ng-disabled directive on each control, but I'd like to set some attribute/class on the entire container, rather than on each individual control.
I am using Bootstrap 3, so if there is a class that would provide this functionality, that would be an acceptable solution as well.
Here is the relevant section of the HTML:
<input type="checkbox" ng-model="status" title="Enable/Disable Schedule" /> <b>Schedule the task to run:</b>
<div class="row"> <!-- need a way to disable this row based on the checkbox -->
<span>Every <input type="number" ng-model="interval" />
<select ng-model="frequency"
ng-options="freq as freq.name for freq in frequencies"></select>
</span>
<div>
On these days:
</div>
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button"
class="btn"
ng-model="day.value"
ng-repeat="day in days">{{day.name}}</button>
</div>
</div>
I have tried:
<div class="row" ng-disabled="!status">
It didn't work, and based on the docs, it doesn't look like it is even supposed to, as its intended use is for disabling form controls. I also tried without the !, just to validate that it wouldn't work either.
OK, I found a technique that works for my purposes...
<div class="row" ng-class="{disabled: !status}"> <!-- added ng-class here -->
and
.disabled {
z-index: 1000;
background-color: lightgrey;
opacity: 0.6;
pointer-events: none;
}
This prevents clicks on the page and gives a nice visual indication of the section being "disabled".
It does not prevent me from tabbing through the controls, but it works OK for my purposes.