locked
Web App Deisgn vs Debug ( Am i missing something ) RRS feed

  • Question

  • User2037455357 posted

    Hello there

    I am developing a few Web applications.

    When designing in Visual Studio I mostly use Tables to align my tools.

    also use ( Top, Left, Align (left, Right), Relative ) on my tools ie Textboxes, Labels, Dropdowns.

    But when I finally get to my desired output when debugging (F5), the design view has a totally different layout to the (F5) view.

    Am I missing something really basic.  Or is there a best practice when designing the layout of a web app.

    I like to get the skin / layout correct first before I do any C# button / event coding.

    Kind Regards

    Rob

    Friday, May 3, 2019 8:16 AM

Answers

  • User-821857111 posted

    Generally, best practice is to use divs to align elements in a web page. Tables should be used only to display tabular data (or to align things in an HTML email that needs to be displayed in Outlook). You should learn the basics of the CSS box model, and how to use floats to align items. Most people tend to use front-end frameworks these days, like Bootstrap.

    Never trust what the Visual Studio Design View shows you. It is not a browser. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 3, 2019 8:39 AM
  • User409696431 posted

    Go to the bootstrap website and read up on the basics.  You need to be aware of what the classes do, what HTML elements to use, and markup your pages accordingly.   Pages at different browser sizes will change content position, or show/hide content, based on the classes and HTML elements you use.

    Go to https://getbootstrap.com/ and click the Documentation menu item.   Look at the Examples menu to see how it works.  Go to some of them and resize your browser and see how the pages behave.

    Bootstrap can be used fairly simply, but you do need to know the basics to understand what you are doing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 4, 2019 4:06 PM

All replies

  • User-821857111 posted

    Generally, best practice is to use divs to align elements in a web page. Tables should be used only to display tabular data (or to align things in an HTML email that needs to be displayed in Outlook). You should learn the basics of the CSS box model, and how to use floats to align items. Most people tend to use front-end frameworks these days, like Bootstrap.

    Never trust what the Visual Studio Design View shows you. It is not a browser. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 3, 2019 8:39 AM
  • User2037455357 posted

    Hi Mike

    Thank you for your reply

    Can you develop C# applications in Bootstrap?

    Friday, May 3, 2019 8:46 AM
  • User409696431 posted

    Developing in C# and using bootstrap are two separate things.  C# is code that runs on the server before sending information to the browser. Bootstrap is (one) framework that can be used to develop a responsive front-end design.  That's HTML, CSS and JavaScript, which display and run in the client's browser.

    You can develop an application using C# as the server language, and develop the front-end look and feel yourself (write your own HTML, CSS, JavaScript, with knowledge to make the design responsive), or you can develop the front-end with the help of a framework, such as Bootstrap, that has predefined styles and components to give you a leg up on developing a responsive design.

    Friday, May 3, 2019 10:43 PM
  • User2037455357 posted
    Thank you for the great information.

    i see you can use bootstrap within Visual Studio for responsive
    design. i shall look i to this

    is there anything i need to be aware of using Bootstrap
    or is it fairly easy to work with. ?

    Regards

    Rob
    Saturday, May 4, 2019 10:35 AM
  • User409696431 posted

    Go to the bootstrap website and read up on the basics.  You need to be aware of what the classes do, what HTML elements to use, and markup your pages accordingly.   Pages at different browser sizes will change content position, or show/hide content, based on the classes and HTML elements you use.

    Go to https://getbootstrap.com/ and click the Documentation menu item.   Look at the Examples menu to see how it works.  Go to some of them and resize your browser and see how the pages behave.

    Bootstrap can be used fairly simply, but you do need to know the basics to understand what you are doing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 4, 2019 4:06 PM
  • User-1174608757 posted

    Hi masterdineen,

    Bootstrap is a simple, intuitive, and powerful front-end development framework based on HTML, CSS, and JavaScript. In simple words,Bootstrap is a wrapper around css and js. You could learn it in bootstrap website and you could also learn bootstrap in w3 school. Here is the link, it will be easy for you to learn by using it.

    https://www.w3schools.com/bootstrap/

    Best regards

    Wei

    Monday, May 6, 2019 2:32 AM