Cómo eliminar el doble borde alrededor del menú desplegable.
¿Cómo podemos eliminar el borde adicional alrededor del menú desplegable de Rag Basic Type a continuación?
Como se puede ver, el siguiente menú desplegable tiene un borde adicional alrededor:
Aquí está el fragmento relevante de código:
<div class="col">
<div class="form-group">
<label class="project-field-label" for="Rag Name">Rag Name</label>
<input [(ngModel)]="editRagColumns.RagName"
name="RagName"
type="text"
class="form-control"
id="RagName"
aria-label="RagName"
placeholder="{{ '@Configuration_EmailTemplate_Alias' | i18n }}"
[ngClass]="{ 'is-invalid': RagName.invalid }"
#RagName="ngModel"
required>
</div>
</div>
<div class="col">
<div class="form-group">
<label class="project-field-label" for="RagBasicType">Rag Basic Type</label>
<p-dropdown [(ngModel)]="editRagColumns.BaseObjectType"
name="RagBasicType"
type="text"
class="form-control"
id="RagBasicType"
[options]="baseObjectTypes"
optionLabel="BaseObjectTypeName"
[style]="{'width': '100%', 'border-color':'var(--dropdown-border-color)'}"
>
</p-dropdown>
</div>
</div>
He intentado lo siguiente:
[style]="{'width':'100%', 'border-color':'transparent'}"
Sin embargo, la altura de los campos Rag Name y Rag Basic Type es diferente:
davy.ai
Para eliminar el borde adicional alrededor del desplegable de tipo básico Rag, necesitamos establecer el color del borde como transparente de la siguiente manera:
[style]="{ 'width': '100%', 'border-color': 'transparent' }"Sin embargo, si esto causa que la altura de los campos de Nombre de Rag y Tipo Básico de Rag sea diferente, podemos intentar agregar los siguientes estilos al elemento p-dropdown:
[class]="'form-control'" style="border: none; box-shadow: none; height: 100%;"Esto establecerá la altura del desplegable para que coincida con la altura del campo de entrada y eliminará cualquier otro estilo no deseado que pueda estar causando el borde adicional. El código actualizado de p-dropdown se vería así:
Esto debería eliminar el borde adicional alrededor del desplegable de Tipo Básico Rag sin afectar la altura del campo de Nombre de Rag.