I have a p:autoComplete component in my view that is capable of accepting multiple values, like so:
<p:autoComplete
id="typesList"
value="#{bean.types}"
completeMethod="#{bean.typeLookup}"
var="type"
itemLabel="#{type.name}"
itemValue="#{type}"
queryDelay="300"
maxResults="5"
converter="typeConverter"
dropdown="true"
multiple="true">
...select and unselect ajax events...
</p:autoComplete>
I have purchased and am using the Primefaces Adamantium theme. Have not added any style customizations to the autoComplete component, yet this is how it looks:
As you can see, the dropdown arrow button is rendered below the actual textbox, for some reason. If I enter a lot of values, the textbox and the button both expand, but one always stays above the other. If I inspect the elements, I see the following style classes on the textbox:
ui-autocomplete-multiple-container ui-widget ui-inputfield ui-state-default ui-corner-all
And the following on the down arrow button:
ui-autocomplete-dropdown ui-button ui-widget ui-state-default ui-corner-right ui-button-icon-only
I've inspected each style class individually and I don't see anything that could be causing the issue. All of them are out-of-the-box, I haven't modified them in any way. Taking out one, many or all of the above style classes does not change anything. The button still appears below the textbox. What could I be doing wrong?
Related
I use ngbootstrap for popovers, but I want to override all the default styles it comes with. I have a form that should be displayed as a popover on a button click which has its own styles.
When I use [ngbPopover] it renders an element with the default class of 'popover' applied, instead of overriding each of its properties to align with my expectation, is it possible to remove it all together while rendering on the page and then I could use a custom class with popoverClass property.
<ng-template #popContent><user-form></user-form></ng-template>
<button type="button" class="btn btn-outline-secondary" [ngbPopover]="popContent">
I've got markup and bindings in my popover!
</button>
Looking into the popover source code I see lots of classes nailed without a chance to change them. I suppose the only promising approach would be exclude the css for the popover component from the import.
How to do it depends on how you import the Bootstrap css
I'm trying to implement ng2-completer component in my Angular2 application.
The conponent works properly but the style of the search textbox is flat...
I want to have the same style of bootstrap components, like textbox for example.
This is the code:
<ng2-completer [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
This is the rendered control:
As you can see, the list of color is ok but the input where the user write the value to search is completely flat...
How can I move to fix the problem ?
Basically I just want to set it like the field "Titolo" on the right.
Thanks
Just add [inputClass]="['form-control']" in the selector.
For example:
<ng2-completer [inputClass]="['form-control']" [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
Note: form-control is here a class of Bootstrap
put class="form-control" to your textbox ,(class)="form-control" in your case i guess
Iam getting a problem while i place mouse on tooltip only when the page loads intially. When i login to website, after the page is loaded when i place my mouse on '?' glyphicon symbol, iam able to see the whole title script that written inside the html.
This is the below text iam seeing when i hover. This is the title with close button 'x' inside the tool tip.
About your score<button type=button class=close data-dismiss=popover aria-hidden=true onclick=$('#abcPopover').popover('hide')>×</button>
I made the tooltip clickable. when i click on '?' glyphicon symbol the popover is not coming on first click and the script is now hiding. when i click on '?' glyphicon symbol second time it works fine the popover is coming. This is the problem iam seeing only on when page loads and when i click on '?' glyphicon symbol the title will hide and on second click works fine and popover will come up.
This is the code i have written in html.
<a href="#" id="abcPopover" data-html="true"
title="About your score<button type=button class=close data-dismiss=popover aria-hidden=true onclick=$('#abcPopover').popover('hide')>×</button>"
data-toggle="popover" data-content="{{abcTooltip}}" ng-click="open()"><i class="glyphicon glyphicon-question-sign"></i></a>
nesting a button in Html tag it isn't valid HTML5 according to the HTML5 Spec Document from W3C:
Content model: Transparent, but there must be no interactive content descendant.
The a element may be wrapped around entire paragraphs, lists, tables,
and so forth, even entire sections, so long as there is no interactive
content within (e.g. buttons or other links).
In other words, you can nest any elements inside an except the following:
<a>
<audio> (if the controls attribute is present)
<button>
<details>
<embed>
<iframe>
<img> (if the usemap attribute is present)
<input> (if the type attribute is not in the hidden state)
<keygen>
<label>
<menu> (if the type attribute is in the toolbar state)
<object> (if the usemap attribute is present)
<select>
<textarea>
<video> (if the controls attribute is present)
However, if your <button> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a> tag and style it the same way.
Check this link out to create your tooltip. Link
Fiddle
Hello again everyone,
I am putting validation on a Web Form I'm making, and I set all the placeholder text to red to indicate which fields were required. I also have a dropdownlist that is required, so I wanted to change the text color of the first "default" option to be red also. All the solutions I find across the internet say to just style it:
<asp:ListItem style="color:red" Value=null>--Select Tax Status--</asp:ListItem>
However, this is not making any difference in Chrome or IE. I inspected the element and it even has the element.style color as red, but it is clearly not...
Anyone know how to do this so it works? or where I'm messing up?
IMHO if you want to indicate that some fields are required you should use something like put an asterisk(*) to indicate that, and then focus and color with red (or another color) the controls they are missing when clicking the submit button, this way is more standardized and thus the users can understand easily what you are trying to tell them, because they are more familiar in this way, I think it could give a better experience to your users .
However, as #Yuriy commented, the DropDownList/ListItem control is rendered into SELECT/OPTION tags, so if you set the style="color:red" to a ListItem tag only the Option tag is going to be red.
You should apply the style to the DropDownList control as below:
<asp:DropDownList ID="ddl" style="color: red;" runat="server">
<asp:ListItem>--Select Tax Status--</asp:ListItem>
</asp:DropDownList>
It will be rendered as
<select name="ddl" id="ddl" style="color: red;">
<option>--Select Tax Status--</option>
</select>
Dropdown/ListItem render as HTML SELECT/OPTION elements - there're very limited styling you can apply to those - i.e. you can change background color.
Your solution is either use different elements or apply a 3rd party library (e.g. https://select2.github.io/) that turns normal select into styleable elements
I'm using jQuery Mobile (jQM) and Knockout.js (ko) to develop an application. In this application, I need to generate a variable number of buttons that are defined by a constantly updating web service.
So, in my markup, I have:
<div id="answerPage-buttons" data-bind="foreach: buttonsLabels">
<button data-role="button" data-inline="true" data-theme="b" data-bind="text: text, click: $root.submitAnswer" />
</div>
buttonLabels is a list of short strings returned from the web service. It's defined as:
self.buttonLabels = ko.observableArray();
This all works fine when the buttons are not "jQM styled". However, when I style them using:
$("#answerPage-buttons").trigger("create");
problems arise during the update.
The issue seems to be that jQM wraps the buttons in a div (with a sibling span) to make them all nice and mobile looking. However, when the ko applies the updates via the bindings, it only removes the tags, leaving the surrounding stuff, and adds new button tags - which are then also styled by the jQM trigger call.
So, I end up with an ever-growing list of buttons - with only the last set being operational (as the previous ones are gutted by the removal of their button element, but all the styling remains).
I've managed to address this, I think, by placing the following call immediately after the observable is updated:
$("#answerPage-buttons div.ui-btn").remove();
However, my feeling is that there's probably a better approach. Is there?
I found a solution.
If I surround the buttons with a div, it seems to work - e.g.
<div id="answerPage-buttons" data-bind="foreach: buttonsLabels">
<div>
<button data-role="button" data-inline="true" data-theme="b" data-bind="text: text, click: $root.submitAnswer" />
</div>
</div>
I'm guessing this is because the markup added by jQM remains "inside" the markup replicated by ko. Without the div, jQM wraps the button tag, which was the immediate child of the tag that contains the ko foreach binding.