I have a hamburger menu that is showing working fine except that with semantic ui input boxes show through. Please see the pictures.This is before. [This is when the menu is selected][2]
Thank you!!
HTML:
<div class="find-book-total">
<form action='/find_book_results/' method='GET' value='{{request.GET.q}}'>
<div class="ui icon input">
<input type='text' name='q' value='{{request.GET.q}}' placeholder="Search books" />
<i class="search icon"></i>
</div>
<div class="">
<input type='submit' name='submit' value='Search' class="ui blue button"/>
</div>
</form>
It wont let me upload the css because the code is too long. I used this code as a base for my css
Related
I'm running into issues with modals and forms with Foundation.
I want to be able to fill out a form, open a modal, then have that modal be able to submit the form.
Normally, I'd have my form, and all of it's form fields, and put the modal inside the the form element, and that would be fine - but with foundation, I find that the reveal modal is moved to the bottom of the DOM.
What's the best way to accomplish what I'm after?
I've added a skeleton of what my normal structure might be like - any help would be greatly appreciated.
<form method="post" action="...">
<label for="title">Title</label>
<input type="text" name="title" id="title" placeholder="Enter campaign title here" required>
<label for="title">Description</label>
<textarea type="text" name="description" placeholder="Description of this campaign"></textarea>
<button type="button" class="button default-btn float-right" data-open="emailSendConfirmation">Publish campaign</button>
<div class="reveal" id="emailSendConfirmation" data-reveal>
<button data-close aria-label="Close modal" type="button" class="button">Cancel</button>
<button type="submit" class="button" name="status" value="Published">Publish</button>
</div>
</form>
Thanks,
Ollie
I'm trying to create a popup, i did whatever, it is not the main thing.
This is the situation, I add a autocompleted textbox in the popup and a textbox below of it with two buttons. But when I enter some input to textbox, it suggests me three of the most approximetly words, but it effects the other buttons and textbox, they are going down, I dont want it to do this. everything has to be stable, how can i handle this problem? For more information,screenshots are below.
Thanks...
without entering a data to textbox
after entering a data to textbox
<div class="header">X</div>
<form name="X" class="content">
<div>
<input type="text" name="country" id="country" ng-model="country" ng-change="complete(country)" class="form-control" />
<ul class="list-group" ng-model="hidethis" ng-hide="hidethis">
<li class="list-group-item" ng-repeat="countrydata in filterCountry" ng-if="$index < 3" ng-click="fillTextbox(countrydata)">{{countrydata}}</li>
</ul>
</div>
<input type="text" class="form-control" id="qty" placeholder="Quantity">
<!-- Dialog Buttons -->
<br />
<br />
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="">CANCEL</button>
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="" ng-disabled="">OK</button>
</div>
</form>
This is the source code of popup, it is called by another button from the page and opening with this style and html...
So im working with Foundation and I am trying to align the Search bar and search button next to each other. I've tried putting them into a container, and floating them left and right respectively, but that didn't work.
This is what it looks like now: https://gyazo.com/59a22c3c9cd849b1dd9fec6bb9df6bd5
And this is the HTML:
<div class="top-bar-right">
<ul class="menu">
<form method="GET" action="">
<li><input type="text" align="middle" name="search" value="{{ request.GET.search }}"placeholder="Search by Title"></input></li>
<li><button type="button input" class="button">Search</button></li>
</form>
</ul>
</div>
but I want them to be side by side.
Thanks for the help!
EDIT: Forgot to add my html!
One way would be using span ,
li is block element,
So using span will help you make your elements inline.
Copy and Save the code below as an Html file, eg - demo.html
and open it on Browser.
Try this -
<html>
<body>
<div class="top-bar-right">
<form method="GET" action="">
<span>
<input type="text" align="middle" name="search" value="{{ request.GET.search }}"placeholder="Search by Title">
</input>
</span>
<span>
<button type="button input" class="button">
Search
</button>
</span>
</form>
</div>
</body>
</html>
Note -
I've removed your ul tag , it had a css class "menu" , not sure if your code uses it for something.
By default each line item (li) fills the width of its container. To display them side by side, you should use display: inline-block on line items.
You can do this with Foundation's inline-labels-and-buttons:
<div class="top-bar-right">
<ul class="menu">
<li>
<form method="GET" action="">
<div class="input-group">
<input class="input-group-field" type="text" name="search" value="{{ request.GET.search }} " placeholder="Search by Title">
<div class="input-group-button">
<input type="submit" class="button" value="Submit">
</div>
</div>
</form>
</li>
</ul>
</div>
JSFiddle example
Basically when I want to move "About me" button Contact button moves but About me button doesn't move at all.
Here's html
<div id="damn">
<img src="illtrythis.jpg" alter=" ">
</div>
</head>
<form>
<input type="submit" class="aboutme" value="About me" >
<input type="submit" class ="contact" value="Contact">
</form>
</html>
Sorry for bad code,
I'm having problem with putting CSS into "code here so heres a screenshot.
I am using a template, the name is Treble One Page Rsponsive Theme from Wrapbootstrap which uses Twitter Bootstrap. I am implementing the template and encountered this small error which drove me crazy.
There is a search bar, consists of <input> tag and <button> tag. Previously it was fine, until I make it inside a <form>, the search bar started to act weird. The <input> field is centered, but the <button> appended into outside the field making the whole things uncentered.
Here is the image, to be clear:
picture
And here is my code:
<div class="row">
<div class="span8 offset2">
<div class="input-append">
<form method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search">
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
</div>
I've googled this template.
This code works on original template as expected:
<div class="row">
<div class="span8 offset2">
<form class="input-append" method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search" />
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
Main idea is to convert "input-append" div into form, instead of adding new form element within it.