I'm currently working on a Django project and I'm facing a bit of headache. I need to "convert" an HTML page (form) to a proper functioning Django Form App. The problem comes exactly in the ChoiceField (the two choices Manhã and Tarde). On the left, it's the Django Form HTML output and on the right, there's the original HTML page. The styling is different and I can't figure out how I can make them equal. Also, I wanted to make them horizontally aligned, but Django it's not so flexible as I thought in this matter.
I hope you can give me clear tips and light in this strange darkness, I have a couple of frontend skills but nothing above the average.
You could you use something like bootstrap.
Put both choices in a row (read bootstrap grid documentation). Also, could use bootstrap styling to change the appearance of choice field.
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
Could also use Django Crispy forms, there's tutorials online on how to use it.
Related
can you help me understand what bootstrap is? I know people is it for styling pages but can you clarify it to me? A big company like Twitter, Facebook or YouTube can use it?
Bootstrap is a very nice set of "styles" for all elements of any webpage. With it, a developer can focus on what they want to build (i.e. the elements) and very easily apply all the styling (including a lot of the colours, positioning, layout, movement/javascript) by simply adding few lines of code at the start of the webpage and adding a bootstrap class to an element, or wrapping parts of their webpage in a <div>.
Here is an excellent example of a very basic site that is made to look professional very quickly using very simple bootstrap. Click on "full page demo", then view -> view source to see the source code.
You can see some classic bootstrap classes like
<div class="jumbotron text-center">
and
<div class="container-fluid">
Bootstrap is a free and open-source front-end framework developed with css and javascript.
For styling and other change of the html, we make CSS classes and ids. And the main work we do in the css file and js file . But in bootstrap there is already some files which have many built in classes and ids .
After adding bootstrap to a html file we can do many work by only calling those classes and ids .
like ,
<p class="text-center">Center aligned text on all viewport sizes.</p>
only calling the class "text-center" we can align text center . No need to do any other css .
Many big company like Twitter, Facebook or YouTube can use it. On the other hand some make their custom files like bootstrap.
I do hate to keep asking questions. I have been trying to add code to my website. No matter what code I add, none of it works. I have changed the names of the CSS names thinking that would work but it fails.
Currently I am trying to add in some image gallery blocks. I am on w3 schools and it works.
https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery
I bring the CSS and code to my website and it looks like this:
https://postimg.cc/image/ifn4dsqrr/
I have tried so many card and block codes and they all either mess up my homepage or ruin the css and I have to revert back to the previous version.
Over the last 2 days I have spent 6 hours trying to get 4 little responsive blocks with image background and text overlay to simply work in between 2 banners.
Here is a link to my test store where I am building out a homepage:
http://newdev-vitavibe-com.3dcartstores.com/
I am determined to learn why. I opened up a request to pay someone to build this homepage for me. I had lots of offers but I really want to learn how myself.
If you are willing to use bootstrap you could put them in containers, I linked below the documentation for this. Bootstrap will make your life a lot easier when it comes to grids, saved my butt plenty of times.
https://getbootstrap.com/docs/4.0/layout/grid/
Inspecting the html of your site, a saw that what you want could be accomplished with the following html structure
<div id="fullWidthBlock" class="fullWidthBlock2">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div id="fullWidthBlock">...</div> <!-- all the div.gall where here -->
Note that the <br/> between the two div#fullWidthBlock where removed.
And dont repeat the id attribute it is meant to be unique in each html document.
Thats the page with the changes:
Take a look at "!important" keyword in CSS. You should use it like that:
#smth { color: red !important; }
Having created a simple registration form using Twitter Bootstrap for the UI, I find that I've run into an unexpected problem. You see, some of the form rows are clickable, whereas some of them are not. However, you can tab over to all of the rows and enter information, which then writes correctly to the database. So, my guess is that it's a CSS problem. I haven't written any JavaScript that should cause this problem.
Anyone have any ideas? The page can be found here:
http://loganswalk.com/efc/efc/registration.php
Try adding form-horizontal class to your form:
<form class="form-signin form-horizontal" role="form" action="registration.php" method="post">
Looking at your html I figured that you are using a horizontal form but you are not quite following the bootstrap 3 documentation . And also you are adding your own extra css to effect the left and right margin of the col-md-x classes (which is not a good idea) to make it look ok. Try following the example in the documentation closely and avoid changing the left and right margin or padding of any col-x-y class.
I understand the concept of one id in an html page. As a noob, i was just wondering if you can use the same id once for different html pages. Will that be consider sloppy?
For instance, <div id="1"></div> (used only once)in index.html and used <div id="1"></div> again in product.html. Is that consider bad?
I tried to do a search but found no answers.
Thank you!
!edit! Thank you for the answer guys. Appreciated!
An id should only be used once on a single document. It is used for elements that only should appear once on the page anyway (think of a "top navigation bar"). Classes are used for elements that can appear more than once (think of a "particularly styled table", a "repeatable block of information" or things that share particular charasteristics such as "on this browser width this block spans 6 columns" in for example bootstrap). It is perfectly normal to use the same id on different pages. Usually you'll make a skeleton/template for your layout, where each element will be styled the same on each page that uses this template. It is then helpful to have the same id for the same element across different pages. (or: It would be considered sloppy to change the layout of the page on every page, using different id's for each element, as it would be hard or impossible to maintain your pages.)
It's fine to do that, but you would want to name your ids something better than "1". Something more descriptive, like <div id="main-part"></div> would be better.
Basically, having multiple forms in a row isn't possible so far as I've seen.
LastUpdate
Given the situation with phones and
the unpredictable nature of how most
the browsers render the page, I think
I have to go with multiple buttons per
form. Not super happy with this since
it feels like a WebForms hack for MVC
but it makes the most sense for the
situation. Making a complexish ui for
mobile devices is tough in WebForms,
looks to be harder in MVC.
Something I've been reintroduced to is the idea of having multiple forms per page so that you can have buttons post to different controllers. Problem is that turns out a form is a block element so that it's not possible to get to button next to each other. (Why they are block elements I'd like to know.)
Now here's the main problem, this is a site that was build to be viewable on most phones with a browser. It also has a lot of buttons due to buttons being a lot easier to click with touch phones like iPhones. Floating may not (Not completely ruled out) be an option as floating isn't very predictable on phones. Inline sometimes works sometimes not with browsers as I've seen.
This is sort of a large problem from a design standpoint and I'm hoping there's some kind of MVC method for creating a magical button that would work.
Clarification:
I think the best way to put this is I'm using some buttons as links. In the WebForms version, there were a few of the buttons that basically just redirected. So with that in mind:
Say I have three buttons but all three will need to post to different pages. This would suggest 3 different forms. Unfortunately that would also mean all three buttons would now appear as block elements. (Even though that's it's the form causing this.) Maybe I should be asking if in MVC there is a way to post back to the same controller to redirect from there? Redirect I've done, so that's not a big deal. Posting to a controller and evalutating a button based on it's value I haven't, but that almost seems like trying to recreated WebForms functionality of postback.
Example http://www.eythere.com/images/eythere.jpg
From that image, the top three buttons are merely postbacks to redirets.
UPDATE:
Have attempted tables and floating divs. Tables don't work well with small phones like Razors since they tend to ignore TDs and just make on big vertical column.
Tried floating divs like thus:
<div >
<form >
<input type="submit" style="float:left;"/>
</form>
<form>
<input type="submit" style="float:left;"/>
</form>
<form>
<input type="submit" style="float:left;"/>
</form>
</div>
Problem is it shows the buttons in two rows (That's fine) but the two buttons in the same row aren't aligned vertically. The second one is off by a little bit. Almost to the point that it looks like a Final Four bracket.
May have to go with the multiple buttons to a form thing. This seems to contradict the MVC design but I don't see another way around this.
When you post a form, the name attribute of the button used to post it is sent as a form value. Give each button a name, and then check the Form collection (or an Asp.Net MVC intermediary) for the button's name.
if(!String.IsNullOrEmpty(Request.Form["myButtonName"])) {
//myButtonName has been pressed.
}
EDIT:
Problem is that turns out a form is a block element so that it's not possible to get to button next to each other. (Why they are block elements I'd like to know.)
Forms are block elements because if they were inline elements it would be invalid to nest tags like p and div inside of them (both of which are handy in constructing forms).
If I understand what you are asking, then sorry there is no such function. You would have to find or create your own method that would identify the client and then output the correct HTML code and CSS to accommodate that device. It may be better to find a solution on the user side of the code. You could maybe use display:inline; to forge the button to act like an inline element no matter what. It should work in all major browsers (http://www.quirksmode.org/css/display.html), and this this probably includes the iPhone browser because it is safari based.
It would probably help if you could explain a bit more about how you want the stuff to interact. That said, no law says a form can only have one submit button, and, when submitted it is possible to figure out which button is clicked--the name/value (text) of the button appear in the posted data. Exactly how to handle that really goes to what needs to happen and how you want to architect it, but you can definitely give a form multiple buttons.
--UPDATE--
Thanks for the clairifications. I think your best bet would be to use normal links and style them a bit:
a.button { display: block; width: 100px; float: left; }
They should be nice big clickable things in iTouches and in other more modern mobiles and degrade nicely in older mobile stuff as there really ain't nothing that can do HTML that doesn't support links.
this might solve your problem
another solution: if you can use javascript, make a DIV and a onclick action on it
like what Jeff did here on SO with the [Votes] | [Answers] | [Views] "button" on the home page on the left side of every question
Use css to style anchor links like buttons. That way you get rid of the useless forms and maintain affordability and clickability.
I haven't tried this so I can't say if it will work or not, but could you not just set the forms on the page to "display:inline"?
If you are not collecting data from the user, than they just look like simple links.
HTML buttons don't have to be inside forms. You can have a button with a javascript onclick handler that does whatever you want, like setting a form's action and submit it, or load a new document.
<input type="button" value="Home"
onclick="location.href='/index.php'" />
<input type="button" value="Rooms"
onclick="var f=document.getElementById('myform');f.submit()" />
<input type="button" value="Create"
onclick="var f=document.getElementById('myform');f.action='/create.php';f.submit()" />
Those buttons can then be styled in any way.
If your form isn't collecting data, then all your buttons can behave like the "Home" button in my example.