jquery - Cannot affect css worth a darn -


i'm new foundation , jquery selectbox. said, have wasted night trying accomplish simple task , virtually no results @ all.

i have html:

<!--  top nav --> <div class="nav row">     <div class="small-3 columns">         <select id="team" name="team">             <option value="volvo">volvo</option>             <option value="saab">saab</option>             <option value="mercedes">mercedes</option>             <option value="audi">audi</option>         </select>     </div>     <div class="gear small-1 columns">         <a href="#"><img id="teamsettingsgear" src="/images/settings.png" alt="team settings" /></a>     </div>     <div class="small-3 columns">         <select id="site" name="site">             <option value="red">red</option>             <option value="blue">blue</option>             <option value="green">green</option>             <option value="yellow">yellow</option>         </select>        </div>     <div class="gear small-1 columns">           <a href="#"><img id="sitesettingsgear" src="/images/settings.png" alt="site settings" /></a>     </div>     <div class="small-3 columns">         <select id="info" name="info">             <option value="volvo">volvo</option>             <option value="saab">saab</option>             <option value="mercedes">mercedes</option>             <option value="audi">audi</option>         </select>        </div>     <div class="gear small-1 columns">         <a href="#"><img id="informationgear" src="/images/settings.png" alt="information" /></a>        </div> </div>

it's using both foundation 4 , jquery plugin called selectbox ivanov.

here attendant css:

.header, .help, .content, .footer { padding-top: 10px; }   .content { height: 500px; }  .inventory, .multipurpose, .cart { text-align: center; }  .nav { position: relative; top: -15px; }  .gear { padding-left: 0px !important; margin-left: 0px !important; }

all want have gear float right of select box, maybe 10px in between.

if put selectbox , gear image in same div, gear image gets put on next 'line' down.

if mess position: relative; left: -whatever, gear move closer select box, because it's responsive css toolkit, have widen browser space them out again. conversely, if shrink browser window, gear floats on select box.

you don't need add additional styles align image dropdown using foundation. remember if put 2 elements in row in each column float right of each other. try removing of styles positioning , leave have additional padding or margin. this fiddle shows how accomplish it.

for mobile view, remember lot of mobile devices small, can have users using 240x400 devices. cater small devices have split columns will responsive , not tuck them in 1 row. sample below in fiddle shows how can accomplish it. of course can change 8 , 4 combination suit need. that's idea on how can present elements on small devices.

<div class="nav row">     <div class="small-8 large-3 columns">         <select id="team" name="team">             <option value="volvo">volvo</option>             <option value="saab">saab</option>             <option value="mercedes">mercedes</option>             <option value="audi">audi</option>         </select>     </div>     <div class="gear small-4 large-1 columns">         <a href="#"><img id="teamsettingsgear" src="img/gear.png" alt="team settings" /></a>     </div>     <div class="small-8 large-3  columns">         <select id="site" name="site">             <option value="red">red</option>             <option value="blue">blue</option>             <option value="green">green</option>             <option value="yellow">yellow</option>         </select>        </div>     <div class="gear small-4 large-1 columns">           <a href="#"><img id="sitesettingsgear" src="img/gear.png" alt="site settings" /></a>     </div>     <div class="small-8 large-3 columns">         <select id="info" name="info">             <option value="volvo">volvo</option>             <option value="saab">saab</option>             <option value="mercedes">mercedes</option>             <option value="audi">audi</option>         </select>        </div>     <div class="gear small-4 large-1 columns">         <a href="#"><img id="informationgear" src="img/gear.png" alt="information" /></a>        </div> </div>

Comments

Post a Comment

Popular posts from this blog

monitor web browser programmatically in Android? -

i've got tricky question here. need users make payment bank (namely barclaycard) in uk. so, have https url , add parameters (such amount pay, order reference, etc) url, start http connection intent.actionview, redirect user browser can enter credit card details on bank's webpage , make payment our account successfully. far ? the code use below (i changed values privacy reasons) problem is, need app when user has completed/failed/cancelled payment. barclaycardautomatically redirects particular url when payment has succeeded, 1 if failed. there no way of knowing when barclaycard payment has succeeded go android app somehow ? button cardbutton = (button) findviewbyid(r.id.card_button); cardbutton.setonclicklistener(new view.onclicklistener() { @override public void onclick(view arg0) { string prehashstring = new string(); string prohashstring = new string(); string shapassphrase = new string(); shapassphrase = "gsvth£h70zkh...
Read more

Shrink a YouTube video to responsive width -

i have youtube video embedded on our website , when shrink screen tablet or phone sizes stops shrinking @ around 560px in width. standard youtube videos or there can add code make go smaller? you can make youtube videos responsive css. wrap iframe in div class of "videowrapper" , apply following styles: .videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } the .videowrapper div should inside responsive element. padding on .videowrapper necessary keep video collapsing. may have tweak numbers depending upon layout.
Read more

wpf - PdfWriter.GetInstance throws System.NullReferenceException -

i'm trying create pdf document using itextsharp 5.3.4 using following document document = new document(); filestream stm = new filestream(filename, filemode.create); pdfwriter writer = pdfwriter.getinstance(document, stm); i'm getting system.nullreferenceexception following stack trace: system.nullreferenceexception occurred hresult=-2147467261 message=la référence d'objet n'est pas définie à une instance d'un objet. source=itextsharp stacktrace: à itextsharp.text.version.getinstance() innerexception: i've verified neither document nor stm null, , if select "continue" in vs12 document created - exception thrown. updated itextsharp 5.4.0 , it's still occurring. can't find information on anywhere - got ideas? make sure not catching exceptions. nullreferenceexception can 1 caught , handled inside itextsharp, don't care it. fact can continue supports theory. change following setting verify: debug -> exceptions ...
Read more