Tailwind Not Generating all col-span-{n} classes correctly - tailwind-css

I have the following in my Tailwind config file:
{
...
gridColumn: {
auto: 'auto',
'span-1': 'span 1 / span 1',
'span-2': 'span 2 / span 2',
'span-3': 'span 3 / span 3',
'span-4': 'span 4 / span 4',
'span-5': 'span 5 / span 5',
'span-6': 'span 6 / span 6',
'span-7': 'span 7 / span 7',
'span-8': 'span 8 / span 8',
'span-9': 'span 9 / span 9',
'span-10': 'span 10 / span 10',
'span-11': 'span 11 / span 11',
'span-12': 'span 12 / span 12',
'span-full': '1 / -1',
}
}
but when I generate my Tailwind CSS, I'm missing one generating .col-span-{n} class and I can't figure out why. If I comment out span-3 (or any span-{n})from the config above the missing class is generated but obviously, I'm missing the class I commented out.

Related

how to get rid of the extra None item in nested list from textfsm parsing

Environment:
textfsm: 1.1.2
python: 3.9.6
os: windows 10
textFSM template:
Value Filldown policy_name (\S+)
Value Required name (\S+)
Value police_rate (\d+( ms|pps)?)
Value peak_rate (\d+( pps)?)
Value police_burst (\d+( ms|packets)?)
Value peak_burst (\d+( ms|packets)?)
Value police_burst_ex (\d+( ms)?)
Value List conform_action (set|transmit|drop)
Value List conform_action_set_value (.*)
Value List exceed_action (set|transmit|drop)
Value List exceed_action_set_value (.*)
Value List violate_action (set|transmit|drop)
Start
^policy.map\s(?:${policy_name})? -> PolicyClass
PolicyClass
^ class\s${name}
^\s+police cir (percent )?${police_rate}(( bc)? ${police_burst}(( be)? ${police_burst_ex})?)?( pir (percent )?${peak_rate}( be ${peak_burst})?)?(\s+conform-action ${conform_action}(\s+exceed-action ${exceed_action}(\s+violate-action ${violate_action})?)?)?
^\s+conform-action ${conform_action}(-${conform_action_set_value})?
^\s+exceed-action ${exceed_action}(-${exceed_action_set_value})?
^\s+violate-action ${violate_action}
^ ! -> Record
config for parsing:
policy-map INDEPENDENTFIBRENETWORKSLTD348569-G0/1/1:12-Ethernet-IngressQoS-Template1-Standard
!
class CIR_BPS_CONFIG_1
police cir 1000000000 bc 12500000 pir 1800000000 be 12500000
conform-action set-mpls-exp-imposition-transmit 3
conform-action set-qos-transmit 3
conform-action set-discard-class-transmit 1
exceed-action set-mpls-exp-imposition-transmit 1
exceed-action set-discard-class-transmit 0
exceed-action set-qos-transmit 1
violate-action drop
!
!
textFSM parser result:
[['INDEPENDENTFIBRENETWORKSLTD348569-G0/1/1:12-Ethernet-IngressQoS-Template1-Standard', 'CIR_BPS_CONFIG_1', '1000000000', '1800000000', '12500000', '12500000', '', [None, 'set', 'set', 'set'], ['mpls-exp-imposition-transmit 3', 'qos-transmit 3', 'discard-class-transmit 1'], [None, 'set', 'set', 'set'], ['mpls-exp-imposition-transmit 1', 'discard-class-transmit 0', 'qos-transmit 1'], [None, 'drop']]]
As you can see, the conform_action, exceed_action and violate_action columns all have an extra None item.
How can I get rid of it (w/o post-parsing process)?

Why isn't this html div element getting centred?

I want to centre the top drop down here within the blue background block:
https://imgur.com/a/BfWxtes
I've tried a lot of different things including following this guide:
https://www.w3schools.com/howto/howto_css_image_center.asp. I've also tried adding a float:center argument, but I cant for the life of me get it to work.
Here is the relevant part of the code I've written: (I want to centre the elements that come under the '# First row of the dropdown menus' section)
html.Div([
# First row of the dropdown menus
html.Div([
html.Div([
dcc.Dropdown(
id="court_dd_0",
options=[
{'label': i, 'value': i} for i in sorted(list(crest['court_name'].unique()))
],
value = 'Aylesbury Crown Court',
#placeholder='[Placeholder] John Doe',
),
], style={'width': '50%',
'display': 'block',
'margin-left': 'auto',
'margin-right': 'auto',
'textAlign': 'center'}, className='six columns'),
], className='row'),
# Second row of the dropdown menus
html.Div([
html.Div([
dcc.Dropdown(
id="offence_group_dd_2",
options=[
{'label': i, 'value': i} for i in sorted(list(df_gb_offences.offence_ho_group_desc_mso.unique()))
],
value = None,
placeholder='Select breakdown by offence group',
),
], style={'padding': 10}, className="six columns"),
html.Div([
dcc.Dropdown(
id="offence_code_dd_3",
options=[
{'label': i, 'value': i} for i in sorted(list(crest.offence_ho_code_desc_mso.unique()))
],
#value = None,
placeholder='Select breakdown by offence',
),
], style={'padding': 10}, className="six columns"),
], className='row'),
# Third row of the dropdown menus
html.Div([
html.Div([
dcc.Slider(
id='year_slider_0',
min=crest['year'].min(),
max=crest['year'].max(),
value=crest['year'].max(),
marks={str(year): str(year) for year in crest['year'].unique()}
),
], className="twelve columns"),
], style={'padding': 10}, className='row'),
# End of third row of the drop down menus
], style={
'textAlign': 'center',
'margin':25,
'backgroundColor': colors['background'],
'width': '95%',
'height': '100%',
'display': 'inline-block',
'padding': 10
}),
It looks like you specified offence_group_dd_2 to take up 6 columns in the row, which is exactly it appears to be doing. Try removing the "six columns" class names.

Insert arrows using graphdrawing library

I would like to link numbers 6 -> 5 and 5 -> 4 but I have no clue on how to do it.
My code is as follows
\documentclass[tikz,border=10pt]{standalone}
\usetikzlibrary{graphdrawing}
\usetikzlibrary{graphs}
\usegdlibrary{trees}
\begin{document}
\begin{tikzpicture}[>=stealth, every node/.style={rectangle, rounded corners, draw, minimum size=0.75cm}]
\graph [tree layout, grow=down, fresh nodes, level distance=0.5in, sibling distance=0.5in]
{
Flight 0 -> {
Flight 1 -> { 4 -> , 5},
Flight 2 -> { 6 },
Flight 3 -> { 7,8 }
}
};
\end{tikzpicture}
\end{document}
This is the output:
The nodes can be accessed by their name so you can simply draw arrows between them:
% !TeX TS-program = lualatex
\documentclass[tikz,border=10pt]{standalone}
\usetikzlibrary{graphdrawing}
\usetikzlibrary{graphs}
\usegdlibrary{trees}
\begin{document}
\begin{tikzpicture}[>=stealth, every node/.style={rectangle, rounded corners, draw, minimum size=0.75cm}]
\graph [tree layout, grow=down, fresh nodes, level distance=0.5in, sibling distance=0.5in]
{
Flight 0 -> {
Flight 1 -> { 4 , 5},
Flight 2 -> { 6 },
Flight 3 -> { 7,8 }
}
};
\draw[->] (6) -- (5);
\draw[->] (5) -- (4);
\end{tikzpicture}
\end{document}

AdminLTE. table page change 1 to other

I have table used Bootstrap 3.
That is option
$('#DT_NoticeList').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": false,
"info": false,
"autoWidth": false,
"pageLength": 15
});
If there are 10 page, how to change the page number 1 to other?
I want to change the page directly in Javascript or code side.
that is mean move page 1 to other in javascript or anyway
like this [ (1) 2 3 4 5 ] -> [ 1 2 (3) 4 5 ]
how to do?

Styling lists with natural behaviour

I want to style a css list like this
[ 1 ][ 2 ]
[ 3 ][ 4 ]
[ 5 ][ 6 ]
Which is basically no problem when using float:left
But there is a problem, when [ 4 ] is heiger than 3 the following happens:
[ 1 ][ 2 ]
[ 3 ][ 4 ]
[ ]
[ 5 ][ 6 ]
But i want to behave it like this:
[ 1 ][ 2 ]
[ 3 ][ 4 ]
[ 5 ][ ]
[ 7 ][ 6 ]
Please take a look at the problem:
http://xbox360livegold.nl/gastenboek
I don't think you'll be able to do this in pure CSS unless you know ahead of time what each item is going to look like, and I'm assuming this is for the news feed section on the site you lined to. You might be able to use something like the JQuery Masonry library to accomplish it.
If you're okay with the items being displayed from top to bottom instead of left to right, i.e. like this:
[ 1 ][ 4 ]
[ 2 ][ ]
[ 3 ][ 5 ]
then you could use the CSS3 multi-column feature. Setting the column-count to 2 will automatically divide the items into two columns.

Resources