my jquery ui calender's css styles overridden bootstrap css styles.
see following snapshot... calendar's year text color not black.
the reason is, bootstrap css overriding jquery css. in browser developer view, if uncheck style marked in red, style in green arrow gets enabled , looks normal.
question:
how should fix issue in css? suggestion appreciated.
there various rules governing order css processed in. generally, when 2 rules apply same element, rule called last supercede rule called first.
thus, in case, suggest loading jquery-ui.css after bootstrap.css.
the order in <head> should be:
<link rel="stylesheet" href="path/to/bootstrap.css"> <link rel="stylesheet" href="path/to/jquery-ui.css"> notes:
another reason why jquery-ui.css should place after bootstrap.css style structure. bootstrap.css governs entirety of document, style , structure framework, while jquery-ui.css intended apply select elements.
alternatively, if aim modify jquery ui element, recommend creating custom stylesheet (also placed after both documents), opposed altering jquery-ui.css or bootstrap-ui.css. however, maintain best practice approach.
and final (and sloppy) alternative, apply !important style wish use override, so: color: #fff!important;
Comments
Post a Comment