sthefany silva

e como faria isso? tem algum exemplo?? estou com uma duvida bem pareida, porem no meu caso estou utilizando arquitetura mvc, e mminha imagem deverá ser puxada e passada para dentro de um input, mas não sei bem como fazer isso rs. poderia me ajudar?

Olá, minha dúvida é ao fazer um selecte em algum as opções do autocomplete mostrar contudo na pág. e ao limpar os dados inseridos no input fazer com que volte ao estado anterior. ou seja, ao seleconar ele abrirar o que foi seleconado, ao limpar campus do input mostrar topicos anterior. segue abaixo meus códigos: HTML: <form class="submit-line" id="form"> <input id="buscaPerguntas" autocomplete="off" class="form-control input-faq" placeholder="Digite palavras-chaves para pesquisar" style="padding: 28px;"> </form> </div> </div> </div> <div class="row"> <div id="buscaPerguntas-description"> </div> </div> <div class="divFaq" id="listaFaq"> <div class="row"> {% for valor in faq%} <div class="col-sm-12"> <div class="boxFaq"> <a class="btn btn-faq accordion" type="button" data-toggle="collapse" data-target="#{{valor.id}}" aria-expanded="true"> {{valor.pergunta}} </a> </div> </div> <div class="col-sm-12"> <div id="{{valor.id}}" class="collapse"> <div class="boxFaq"> <div class="card-body"> <div>{{valor.resposta|raw}}</div> </div> </div> </div> </div> {% endfor %} </div> JAVASCRIPT: $(function () { $("#buscaPerguntas").autocomplete({ autoFocus: true, minLength: 1, appendTo: '#form', source: function (request, response) { $.ajax({ url: '/pesquisafaq', type: 'post', data: { dadosPesquisa: request.term } }).done(function (data) { let parse = JSON.parse(data) if (parse.length > 0) { let dados = Object.values(parse).map((e) => { return { label: e.pergunta, desc: "<div class='divFaqCollapse'><div class='col-sm-12'><div class='boxFaq'><a class='btn btn-faq accordion' type='button' data-toggle='collapse' data-target='#collapse' aria-expanded='true'>" + e.pergunta + "</a></div></div> <div class='col-sm-12'> <div id='collapse' class='collapse'> <div class='boxFaq'> <div class='card-body'> <div>" + e.resposta + "</div> </div> </div> </div> </div> </div>", } }) response(dados.slice(0)) } }); }, select: function (event, ui) { $("#buscaPerguntas").val(ui.item.label); $("#buscaPerguntas-description").html(ui.item.desc); $('#listaFaq').hide(); $('#buscaPerguntas-description').show(); } }) });

oi, estou desenvolvendo um sistema de FAQ, e preciso listar do meu banco de dados as perguntas e respostas dentro de um collapse. mas confesso que sou um pouco leiga sobre o assunto. não sei se o problema é com minha lógica, mas quando tento abrir o arquivo aparece que a página não foi localizada. segue código abaixo: ajuda.php <?php function listarPerguntas($mysqli){ $perguntasFaq= array(); $respostaFaq= array(); } $sqlAjudaFaq =$mysqli->query ("SELECT pergunta_FAQ, resposta_FAQ, id, FROM ajuda_FAQ"); while($lAjudaFaq = $sqlAjudaFaq->fetch_array()) { $perguntasFaq[] = array( "pergunta" => $lAjudaFaq['pergunta_FAQ'], "resposta" =>$lAjudaFaq['resposta_FAQ']); } ?> controles: public function ajuda(Application $app){ include("../includes/ds8.php"); include("../src/App/funcoes.php"); include("../src/App/ajuda.php"); return $app['twig']->render('ajuda.html'); } html: <div class="row"> <div class="col-sm-12"> <div class="boxFaq"> <a class="btn btn-faq accordion" type="button" id="busca_pergunta" data-toggle="collapse" data-target="#collapse_resposta_faq" aria-expanded="true"> {{%pergunta.pergunta_FAQ}} </a> </div> </div> <div class="col-sm-12"> <div id="collapse_resposta_faq" class="collapse"> <div class="card-body"> {{%resposta.resposta_FAQ}} </div> </div> </div> </div>

oi, estou desenvolvendo abas de navegação utilizando bootstrap, porém gostaria de tornar ele responsivo pois as abas não se alinham em telas menores e as abas ficam bagunçadas. segue código abaixo: em html: <div class="row"> <div class="col-lg-12"> <h3 class="page-header">Central de ajuda</h3> </div> </div> <div class="row"> <div class="col-lg-12"> <ul class="nav nav-tabs round" id="#" role="tablist"> <li class="active"> <a id="tutorial-tab" data-toggle="tab" href="#tutorial" role="tab" aria-controls="tutorial" aria-selected="true"><span><i class="fas fa-book-reader"></i> Tutorial</a> </span> </li> <li> <a id="tarefa-tab" data-toggle="tab" href="#tarefa" role="tab" aria-controls="tarefa" aria-selected="false"> <span><i class=" fa fa-list-alt"></i> Tarefa</a> </li></span> <li> <a id="sugestao-tab" data-toggle="tab" href="#sugestao" role="tab" aria-controls="sugestao" aria-selected="false"><span> <i class="fa fa-lightbulb-o"></i> Sugestão</a></span> </li> <li> <a id="faq-tab" data-toggle="tab" href="#faq" role="tab" aria-controls="faq" aria-selected="true"><span><i class=" fa fa-search"></i> FAQ</a> </span> </li> </ul> </div> css: .nav-tabs { border-bottom: 1px solid var(--cor-primaria); overflow: hidden; transition: border 250ms ease; } .nav-tabs > li { margin: 0px; padding: 0px; float: left; padding-left: 48px; list-style-type: none; } .nav-tabs >li *{ margin: 0px; padding: 0px; } .nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; display: block; float: right; padding: 10px 24px 8px; background-color: #f2f2f2; z-index: 2; position: relative; color: #666666; text-transform: uppercase; transition: all 250ms ease; border-top: 0.5px solid rgba(204, 204, 204, 0.1803921568627451); } .nav-tabs > li > a:before, .nav-tabs > li > a:after{ display: block; content: " "; position: absolute; top: 0; height: 100%; width: 44px; background-color:#f2f2f2; transition: all 250ms ease; } .nav-tabs > li > a:before { right: -24px; transform: skew(30deg, 0deg); box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0; border-top: 0.5px solid rgba(204, 204, 204, 0.1803921568627451); } .nav-tabs > li > a:after { left: -24px; transform: skew(-30deg, 0deg); box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0; border-top: 0.5px solid rgba(204, 204, 204, 0.1803921568627451); } .nav-tabs > li > a:hover, .nav-tabs > li > a:hover:before, .nav-tabs > li > a:hover:after { background-color: var(--cor-primaria); color: #fff; border-top: 0px; } .nav-tabs >li.active > a{ z-index: 3; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:before, .nav-tabs > li.active > a:after { color: #fff; background-color: var(--cor-primaria); cursor: default; font-weight: 700; border-top: 0px; } /* Round Tabs */ .nav-tabs.round >li > a{ border-radius: 8px 8px 0 0; } .nav-tabs.round > li > a:before { border-radius: 0 8px 0 0; } .nav-tabs.round > li > a:after { border-radius: 8px 0 0 0; } tbm já tentei fazer utilizando o @media porém não ajusta certinho. poderia me dar essa ajuda.

muito me ajudou bastante. muito obrigada.

oi, estou desenvolvendo uma página html e estou utilizando bootstrap, gostaria de fazer um menu com abas e que fosse levemente iclinado para direita... mais ou menos como essa ideia do arquivo... segue meu código html: <ul class="nav nav-tabs" id="#" role="tablist"> <li class="nav-item active"> <a class="nav-link" id="tarefa-tab" data-toggle="tab" href="#tarefa" role="tab" aria-controls="tarefa" aria-selected="false"> <i class=" fa fa-list-alt"></i> Tarefa</a> </li> <li class="nav-item"> <a class="nav-link" id="sugestao-tab" data-toggle="tab" href="#sugestao" role="tab" aria-controls="sugestao" aria-selected="false"><i class="fa fa-lightbulb-o"></i> Sugestão</a> </li> <li class="nav-item"> <a class="nav-link" id="faq-tab" data-toggle="tab" href="#faq" role="tab" aria-controls="faq" aria-selected="true"><i class=" fa fa-search"></i> FAQ</a> </li> </ul> segue meu código css: .nav-tabs { border-bottom: 2px solid var(--cor-primaria-2); } .nav-tabs > li { float: left; margin-bottom: -1px; /* margin-top: 0px; */ } .nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; border: 1px solid; border-bottom: 0px; border-radius: 4px 4px 0 0; color: #666666; background: rgba(204, 204, 204, 0.1803921568627451); } .nav-tabs > li > a:hover { border-color: #FFFFFF; }