Alterar estilo do dropdown no filter

Formulários
1

Fala pessoal! boa tarde!

Implementei essa funcionalidade no meu formulário, mas, o dropdown do campo, por padrão, tem as bordas arredondadas…
Pelo que entendi na documentação, eu deveria conseguir alterar o estilo através da configuração style > tableStyle: ‘’.

Então incluí essa configuração e adicionei no meu css a classe custom-dropdown indicada na configuração, mas, não funcionou…

Alguém sabe como fazer?

.custom-dropdown .fluigc-autocomplete-result {
	border-radius: 0 !important;
}

function motivoDispensaZoom() {
	var source = [
		{ company: 'Wonka Industries', id: 1, location: 'London', industry: 'Confectionery', employees: 500 },
		{ company: 'Acme Corp', id: 2, location: 'New York', industry: 'Manufacturing', employees: 2000 },
		{ company: 'Stark Industries', id: 3, location: 'Los Angeles', industry: 'Technology', employees: 10000 },
		{ company: "Ollivander's Wand Shop", id: 4, location: 'Diagon Alley', industry: 'Retail', employees: 15 },
		{ company: 'Wayne Enterprises', id: 5, location: 'Gotham City', industry: 'Conglomerate', employees: 25000 },
		{ company: 'Cheers', id: 6, location: 'Boston', industry: 'Hospitality', employees: 30 },
		{ company: 'Gekko & Co', id: 7, location: 'Wall Street', industry: 'Finance', employees: 50 },
	];

	var settingsExampleArray = {
		source: source,
		displayKey: 'company',
		multiSelect: false,
		style: {
			autocompleteTagClass: 'tag-gray',
			tableSelectedLineClass: 'info',
			tableStyle: 'custom-dropdown',
		},
		table: {
			header: [
				{
					title: 'Company',
					size: 'col-xs-3',
					dataorder: 'company',
					standard: true,
				},
				{
					title: 'Location',
					size: 'col-xs-3',
					dataorder: 'location',
				},
				{
					title: 'Industry',
					size: 'col-xs-3',
					dataorder: 'industry',
				},
				{
					title: 'Employees',
					size: 'col-xs-2',
					dataorder: 'employees',
				},
			],
			renderContent: ['company', 'location', 'industry', 'employees'],
		},
		tableHeight: '250px',
	};

	var filter = FLUIGC.filter('#motivoDemissao', settingsExampleArray);
}
2

No caso vc quer retirar as bordas de um campo do tipo filter, certo ?

Adicionando estilização nessa classe aqui você consegue o resultado que deseja:

.input-group-addon {
  border-radius: inherit !important;
}

Antes:
image

Depois:
image

3

Olá @pablooav , bom dia!

image
image969×354 12.6 KB

Implementei sua sugestão, mas, acredito que você tenha entendido errado.
Me refiro a borda do dropdown;

Ainda não consegui alterar ela.

4

Certo, tente utilizar:

.filter-panel {
  border-radius: inherit !important
}

Dessa forma removi a borda default que é de 4px do Fluig.
image

A sua borda está bem mais redonda do que o default, acredito que tenha mais algum css em seu código como um todo que está alterando tanto a cor quando o border-radius do seu input, da uma conferida inspecionando elemento, por lá você consegue ver todos css’s que estão atuando no na div que vc seleciona.

image
image1678×709 102 KB

5

Sim! No layout padrão que costumo utilizar nos formulários aqui da empresa estava utilizando isso:

.panel.panel-default {
 border: 1px solid #00263e !important;
 border-radius: 15px !important;
 padding: 0 !important;
}

Não havia percebido… agradeço muito a ajuda!! Funcinou.