Geek asks and answers

How to override the inline style of component elements without using! important in css?

I use component elements p:selectonemenuon one of my web pages. I am trying to apply a style to it using my own css (without using !important), but it does not accept styles from my own external css file. It takes some kind of inline style somewhere, but I don't want this component to have an inline style. I want it to use the style from my own external css file.

I don’t understand where this inline style comes from. Does this come from any javascript? I need help here, below is my code.

Style code

<p:selectOneMenu value="#{Controller.property}" id="dropDown">
  <f:selectItem itemLabel="Select One" itemValue="0" />
  <f:selectItems value="#{controller.property}"/>
</p:selectOneMenu>

HTML interpreted code

<div id="j_idt40" class="ui-selectonemenu ui-widget ui-state-default 
ui-corner-all ui-helper-clearfix" style="width: 190px;">
+5
source share
2 answers

javascript?

. PrimeFaces.widget.SelectOneMenu.initWidths primefaces.js.

!important - .

<p:selectOneMenu ... style="width: 500px">

PrimeFaces.widget.SelectOneMenu.initWidths JS , <p:selectOneMenu>.

+2

"", , - !important ( style -).

: , . , :

 <script>
   debugger;
 </script>

<body>, DevTools .

, DevTools, "" , . .

Break on... | Attribute modifications. , style , JavaScript. !

0

More articles:


All Articles