How to use Chrome Inspector to show the popup css for a jquery plugin -

-

i'm trying chrome inspector show me class names , properties used in jquery plug-in can overwrite , adjust them want. chrome inspector css window doesn't show it.

i using plugin shows popup of list items when click on textbox. see jsfiddle

$('#example-1').timeselect({    'step': 15,     autocompletesettings: {         autofocus: true     } });

i want change highlighted row background colour , text size there shown in following screenshot

enter image description here

i read in this answer see hover css in chrome inspector need check .hov style in window.

it not matter element state set to. chrome css window not show me css 2 properties trying change i.e. highlighted row font size , background colour. doesn't show me gray colour in window @ all. allows me change static font size of textbox, not text size of when textbox clicked , hover active.

i had @ javascript code on github plugin. there no reference. there no reference css or style being applied it.

summary of answer given below:

  1. the jquery plugin creates html on dom ready. locate created html in chrome inspector.

  2. use inspector highlight relevant html created element , take note of css class name dynamically gets inserted in html when visually highlight row.

  3. in chrome's css panel window click + icon , add class name identified in step 2.

  4. view , adjust css properties specific class

in fiddle, can inspect input box (where click enter text) , watch html change when click on , off. if don't see elements highlight when open , close (which means element changing, style of display:none; block), can start mousing on elements in inspector.

when mouse on elements in inspector, you'll see block want light up. block want contained in bigger block, you'll have traverse block (using black arrow next open element)

you're looking <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1"... element houses of select options.

in picture below, way found block inspect actual input "basic examples". showed me traversed input id #example-1. since clicked somewhere else, actual options hidden, clicked on input again open them , noticed changed in inspector. so, moved mouse on elements in inspector while options box open. saw div (highlighted in gray in inspector) containing box options, traversed there. enter image description here

tldr; you're going change backgrounds of .ui-menu-item


Comments

Post a Comment

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

-
everything work fine on code below fetch user logs: js: <script> $(document).ready(function () { var table =$('#systemlogs').datatable({ responsive: true, processing: true, serverside: true, "language": { "url": "/datatables/media/plug-in/persian.json" }, ajax: '{!! url('/admin/systemlogs/data/systemlogsdatatable') !!}', columns: [ { data: 'name', name: 'name' }, { data: 'message_text', name: 'message_text' }, { data: 'remote_addr', name: 'remote_addr' }, { data: 'log_created_at', name: 'management_logs.created_at' }, { data: 'log_updated_at', name: 'management_logs.updated_at' }, ] }); }); </script> routes: route::get('/systemlogs/data/systemlogsdatatable','systemlogscontrolle...
Read more

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

-
i getting error when run spring application: exception in thread "main" org.springframework.context.applicationcontextexception: unable start embedded container; nested exception org.springframework.context.applicationcontextexception: unable start embeddedwebapplicationcontext due missing embeddedservletcontainerfactory bean. @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.onrefresh(embeddedwebapplicationcontext.java:124) @ org.springframework.context.support.abstractapplicationcontext.refresh(abstractapplicationcontext.java:476) @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.refresh(embeddedwebapplicationcontext.java:109) @ org.springframework.boot.springapplication.refresh(springapplication.java:691) @ org.springframework.boot.springapplication.run(springapplication.java:320) @ org.springframework.boot.springapplication.run(springapplication.java:952) @ org.springframework.boot.springa...
Read more

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -

-
msg 245, level 16, state 1, line 1 conversion failed when converting varchar value '8:45 am' data type int. script declare @specimenid bigint = 0, @script varchar(max); declare @starttime int = (select convert(int,substring(start_time,0,charindex(':', start_time)) - 12) appt appt._id=112601) --select @starttime set @script = 'select distinct ptlast_name + '', '' + pt.first_name patient_name, dbo.formatdate(pt.dob,''mm/dd/yyyy'') dob, (convert(varchar, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end)) + ''/'' + convert(varchar, (datediff(m, dateadd(yy, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end), d...
Read more