How to create new record with multi-column layout within a Custom form layout?
How to create new record with multi-column layout within a Custom form layout?
9a48g6hmm@mozmail.com
Posts: 4Questions: 2Answers: 0
Hey everyone,
First time posting and new to DataTables. Any help is appreciated even though it is more of a CSS problem.
So I'm currently trying to have the 'create' pop-up be divided into sections, as it requires 13 fields to complete a new record.
I want the second section within this to have a two-column layout, but the best I've been able to do is squish the fields onto the left side without them moving onto the second column.
I'm using the documentation for reference, but the examples are similar, yet I haven't been able to make them work properly. I'm using these:
https://editor.datatables.net/examples/styling/columns.html
https://editor.datatables.net/examples/simple/template
I know this is more of a styling issue, but I believe someone here can probably provide some insight as I'm new to this.
Tried adding a <div id="handicaps"> to see if it could only affect that section, which seems to be working, but I can't get the fields to spill over to the second column.
`<style>
#customForm fieldset legend {
padding: 5px;
border: 1px solid #aaa;
font-weight: bold;
background: #E8E9EB;
width: auto;
margin: 5px;
}
.DTE_Field_InputControl{
max-width: 230px;
width: 230px;
}
select{
max-width: 230px;
width: 230px;
}
/* div.DTE_Body div.DTE_Body_Content div.DTE_Field */ /*PREVIOUSLY USED THESE FROM DOCUMENTATION, DOES NOT AFFECT AS DESIRED, REPLACED WITH .DatosHandicap */
.DatosHandicap {
width: 100%;
padding: 5px 20px;
box-sizing: border-box;
}
div.DTE_Body div.DTE_Form_Content .DatosHandicap {
display: flex; /* Use Flexbox for layout */
flex-direction: row; /* Arrange children in a row */
flex-wrap: wrap; /* Allow items to wrap to the next line */
}
#handicaps{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 50%;
padding: 5px 20px;
box-sizing: border-box;
}
</style>
<body>
<div id="customForm">
<fieldset class="DatosDeCategoria">
<legend>Datos de Categoria</legend>
<editor-field name="categorias.categoria"></editor-field>
<editor-field name="categorias.sistema"></editor-field>
<editor-field name="categorias.formato"></editor-field>
<editor-field name="categorias.genero"></editor-field>
</fieldset>
<fieldset class="DatosHandicap">
<legend>Handicap y Jugadores</legend>
<div id="handicaps">
<editor-field name="categorias.salida"></editor-field>
<editor-field name="categorias.maxjugadores"></editor-field>
<editor-field name="categorias.hcpIdxMin"></editor-field>
<editor-field name="categorias.hcpIdxMax"></editor-field>
<editor-field name="categorias.porcentaje"></editor-field>
<editor-field name="categorias.gross"></editor-field>
</div>
</fieldset>
<fieldset class="DatosDesempate">
<legend>Criterios de Corte y Desempates</legend>
<editor-field name="categorias.corte"></editor-field>
<editor-field name="categorias.corte_id"></editor-field>
<editor-field name="categorias.criterioDesempate_id"></editor-field>
</fieldset>
</div>`
This question has an accepted answers - jump to answer
Answers
Can you link to the page in question please? It is easier for me to fiddle around with CSS properties in the browser using its inspector to see if I can get the combination of values you need.
Allan
for sure,
https://alien2024vc.ech.com.mx/category.php?torneo_id=1
try using this guest user/password I did for this case, let me know if you can see it?
guest@speitour.mx
123456
Unfortunately no - I get the following error shown on the login screen:
Allan
Could you try again please?
Remove:
and
and this from
#handicapsThen add:
and that should get you a two column layout in the Handicap section. Repeat for the other sections.
Part of the issue with the forcing of the input widths - allow them to resize.
Allan