I am trying to do a manual rendering of Django forms and it generates the code below, is there a way to get rid of the texts that do not have any HTML tags, a good example is the texts "Currently: " and "Change:" it is really difficult to style with CSS.
<div class="row align-center mb-0 text-center">
<div class="col-md-12">
<div class="fuzone mb-2">
<div class="fu-text">
<span><i class="mdi mdi-image-area"></i> Click here or drop files to upload</span>
</div>
Currently:
realtor/download.jpeg
<input type="checkbox" name="image-clear" id="image-clear_id">
<label for="image-clear_id">Clear</label><br>
Change:
<input type="file" name="image" accept="image/*" class="clearablefileinput form-control-file" id="id_image">
</div>
</div>
You are safe to highlight 'Currently:' and 'Change:' and delete them without affecting your code. :)
On the other hand, if you'd like to style them, you can wrap them in divs and assign them css styling by referencing their class names.
Imagine divs like physical boxes that hold content. Very rarely should anything not be in a div.
Related
<div class="row mb-3">
<div class="col-6">
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" >
<input type="text" id="startLocation" class="form-control" placeholder="von Bahnhof / Haltestelle / Adresse" tabindex="-1">
</div>
</form>
</div>
<div class="col-6">
<input type="text"id="destination" class="form-control" placeholder="nach Bahnhof / Haltestelle / Adresse" tabindex="-1">
</div>
</div>
I want my two text inputs to be the same with and toghther fill the total width. The Problem is the "startLocation does not have the correct width. I think its because its nested inside another element but I need the other element to have the class autocompleted so I don't know how to fix this.
Sorry If this is a stupid beginner question. Im new to html and bootstrap.
What is the "mb-3" class for in row?
Did you mean md-3? Which you would only need to set column widths (if you're using bootstrap).
Open the developer tools and check the padding and margin around the form. The form itself, and the nested div are probably taking up some space. Also the inputs have different parents so your styling might not be targeting the right selector.
The project I have been working on has an HTML file that looks like this:
<div id="spn-service-provider-list">
<div class="spnsearch">
<i class="spnicon spn-icon-search"></i>
<input type="search" ng-model="spsearch" id="spsearch" placeholder="Search Providers" name="spsearch">
</div>
</div>
I want to move spnsearch independently of the parent div, hence, wrote it outside the parent div, as:
<div class="spnsearch">
<i class="spnicon spn-icon-search"></i>
<input type="search" ng-model="spsearch" id="spsearch" placeholder="Search Providers" name="spsearch">
</div>
<div id="spn-service-provider-list">
.............
............
</div>
When I inspect the page in the browser, no change takes places. That is, spn-service-provider-list still contains the search box. Can someone please explain to me why is this happening? I am a beginner with UI development, so please bear with me if the question is elementary. Thanks!
I would like to display remember me checkbox and submit button inline using Bootstrap 3 inside my Login form.
<div class="row">
<div class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="checkbox">
<label>
<input type="checkbox" name="remember" value="1"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
They do not align vertically very well, especially on mobile size. I would like them to be vertically aligned so the checkbox is in the middle of Submit button.
Also Remember me label is not aligned nicely with checkbox, it seems like words Remember me are slightly higher than chekcbox.
How to solve this ?
What you could do is create another row class inside of the first one. Then inside of that create two classes of two, so col-x-6 twice. Inside one place the check box and inside the other place the button. Then use CSS to clean up and misalignment.
I don't know if this will solve the problem, but it may be worth a try!:)
I have this site:
http://www.les-toiles.co/shop/amandine-dress/
I put a picture to understand better what I want.I want to position these sights integral to be in line with the "in stock".
This is code HTML:
<div class="single_variation_wrap" style="">
<div class="single_variation">
<p class="stock in-stock">Only 2 left in stock</p>
</div>
<div class="variations_button add-cart">
<div class="cart-number">
<span></span>
<div class="quantity">
<input type="number" step="1" name="quantity" value="1" title="Quantity" class="input-text qty text" size="4" min="1" max="2">
</div>
</div>
<button type="submit" class="button single_add_to_cart_button alt btn-block">
<i class="icon-cart2"></i>
Add to cart
</button>
</div>
<input type="hidden" name="add-to-cart" value="1726">
<input type="hidden" name="product_id" value="1726">
<input type="hidden" name="variation_id" value="1922">
</div>
How can I resolve this with CSS?
I tried to add this CSS code, but unfortunately not working
.cart-number {float:left;display:inline-block;}
this is not just an easy quick thing that you can get. There are much more things that need to changed. Let me see how far can I explain. Refer the attached images. For this, you should use the 'Chrome Dev Toolbar' or Firebug of Firefox, so that it helps.
First, the div block of your Wishlist button is completely outside the FORM element. So you can't make it inline, unless you move it inside the FORM element. See the 1st Image.
Now I have moved the DIV block of your Wishlist button inside the FORM element and have modified CSS for many classes and DIVs, definitely as INLINE, for demonstration. You need to really work hard to put this as modular as possible. I am sure you'll figure that out. In the next image, You'll see the effect as you wanted and see the CIRCLED section for the added or edited CSS code
Add display:inline-block; to both .button and .cart-number. It tells the elements to position themselves on the same line, and hopefully with this method you should't need to use float.
Im designing a website using Visual Studio 2012 ASP.NET MVC4
And it’s supposed to be like this
but it turned out to be like this
![default2][2]
I need to align the logo with the Username & Password fields and those fields should have space in between. Btw, I'm using the latest version of Twitter Bootstrap as my CSS. Thanks for helping out!
Also, these are my codes.
<header class="navbar navbar-inverse" role="banner">
<div class="container">
<img src="#Url.Content("~/Content/img/Logo-Sample.png")" alt="Image" id="logo" class="img-responsive"/>
<div class="pull-right">
<form class="navbar-form pull-right" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</div>
</div>
</header>
Update:
I've applied Ryan's suggestion the "float stuff" and the logo is now inlined with the input fields.
But the input field went upward instead of downward. Any suggestions for this? Thanks!
Check out Bootstrap's docs for Inline forms. I believe this is exactly what you are looking for.
As a side note, check out TwitterBootstrapMVC. Your code might look cleaner with it.
So it looks like your logo and login sections are both block-level elements. They need to be inline-block OR one of them needs to be floated left or right as appropriate.
Insofar as the space between elements for your login block... I'd do a css selector to match the header login input elements and add some margin-right to them.
HTML formatting is very finicky sometimes. However, open up the markup for the asp file and put a space between those input areas' tags or put one trailing after the word in the placeholder. For the being slightly too high, I forgot the word I am looking for, but its something a bit like a table, make them both in slots for that row. Look around for what Im attempting to say as I just completely forgot the term.
(if I remember Ill come back and edit this)