Adjust only one component

Asked

Viewed 110 times

1

With this css I change all inputs of my autocomplete : 

.ui-autocomplete-multiple ul{
    padding:0;
    background-color: red !important;
}

The problem is that I need to have only one screen and not all, as I can reference to be changed only screen whose id is x or step one styleClass as a parameter ?

EDITED

This is the generated html: 

<div id="manageEventoPermanenciaNavioForm:pidoS" class="ui-autocomplete-multiple">
  <ul class="ui-autocomplete-multiple-container ui-widget ui-inputfield ui-state-default ui-corner-all" style="float:left">
    <li class="ui-autocomplete-input-token"><input id="manageEventoPermanenciaNavioForm:pidoS_input" name="manageEventoPermanenciaNavioForm:pidoS_input" autocomplete="off" type="text"></li>
  </ul>
  <button class="ui-button ui-button-autocomplete ui-widget ui-state-default ui-corner-right ui-button-icon-only" type="button"><span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text">&nbsp;</span></button><select id="manageEventoPermanenciaNavioForm:pidoS_hinput" name="manageEventoPermanenciaNavioForm:pidoS_hinput" multiple="multiple" class="ui-helper-hidden"></select>
</div>
css primefaces

  • The id element is found in other screens?

  • No, just on a screen.

  • You can display relevant snippets of HTML?

  • Related

  • In the displayed HTML there is no class .ui-autocomplete-multiple. Are you sure you’re right or that CSS is right?

  • @Andersoncarloswoss forgot to post the full div, already corrected.

  • And what exactly do you want to do?

  • This might help: https://answall.com/questions/14639/ignorar-css-determinado-trecho-da-p%C3%A1gina

Show 3 more comments

2 answers

1


Place the attribute styleClass in his p:autoComplete:

<p:autoComplete styleClass="classeEstilo" />

Configure your css class as follows:

.classeEstilo ul {
    background-color: red;
}
  • 1

    Edit the answer, the solution is almost that, but as I care to ul, just be .classeEstilo ul{}. I validated your answer :)

  • @Douglas the last example was exactly . classeEstilo ul {}, but I ended up repeating the answer from above. Thanks for the remark, I’ve adjusted the answer. Hug!

0

To select the element by id you must sweat #:

HTML:

<input id='id_do_elemento'>

CSS:

#id_do_elemento{
    padding:0;
    background-color: red !important;
}

This way this style will be applied only to the target with the specified identifier.

CSS selectors.

  • Didn’t work either :/

  • The problem is I don’t know the way the autocomplete treats.

  • The id that you want to change is a li of ul within . ui-autocomplete-Multiple?

  • I’ll edit the question and add the generated html to help me because I’m not sure of the answer.

Browser other questions tagged css primefaces

You are not signed in. Login or sign up in order to post.