I'm very new to ASP.NET, and I'm currently using ASP.NET Core 2.0, so my issue could come from this, just letting you know.
So, what I'm trying to do is quite simple, display a row including 2 col-md-6, and another row under this one including a col-md-12.
This works perfectly on "normal" laptop screen, but when I reduce screen size to test responsiveness, the second row displays behind the first one, and in its center.
Laptop screen:
Small screen:
CSS here :
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Custom changes */
body {background-color:grey;}
.form {
background-color: green;
height: 66vh;
}
.form form {
height: 100%;
}
#inputs {
height: 90%;
width: 100%;
margin: 0;
padding: 0;
}
.col-md-6 {
padding-top: 2%;
padding-bottom: 3%;
text-align: center;
background-color:orange;
height: 100%;
}
.textbox {
width: 66%;
height: 90%;
background-color: red;
resize: none;
}
#submit {
text-align: center;
background-color: pink;
height: 48px;
padding: 0;
margin: 0;
}
.errors {
background-color: aqua;
}
And HTML:
#page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
#{
string message = "";
string phones = "";
int error_nb = 0;
int error_line = 0;
if (Request.Method == "POST")
{
message = Request.Form["message"];
phones = Request.Form["phones"];
}
}
<div class="form">
<form method="post">
<div class="row" id="inputs">
<div class="col-md-6">
Message:<br />
<textarea type="text" name="message" class="textbox">#message</textarea>
</div>
<div class="col-md-6">
Phones:<br />
<textarea type="text" name="phones" class="textbox">#phones</textarea>
</div>
</div>
<div class="row" id="submit">
<div class="col-md-12">
<input type="submit" name="submit" class="btn btn-lg btn-success" />
</div>
</div>
</form>
</div>
<div class="errors">
<textarea>#error_nb error(s) detected at line #error_line !</textarea>
</div>
Any idea to solve this ?
Thanks !
EDIT: Here is the _Layout.cshtml file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - WebApplication6</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
#RenderSection("Scripts", required: false)
</body>
</html>
The problem is that at lower screen resolution, you have no set column... You should always define at least a col-xs-* here, I added col-xs-12 and it works.
CSS here: body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Custom changes */
body {
background-color: grey;
}
.form {
background-color: green;
height: 66vh;
}
.form form {
height: 100%;
}
#inputs {
height: 90%;
width: 100%;
margin: 0;
padding: 0;
}
.col-md-6 {
padding-top: 2%;
padding-bottom: 3%;
text-align: center;
background-color: orange;
height: 100%;
}
.textbox {
width: 66%;
height: 90%;
background-color: red;
resize: none;
}
#submit {
text-align: center;
background-color: pink;
height: 48px;
padding: 0;
margin: 0;
}
.errors {
background-color: aqua;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form container">
<form method="post">
<div class="row" id="inputs">
<div class="col-md-6 col-xs-12">
Message:<br />
<textarea type="text" name="message" class="textbox">#message</textarea>
</div>
<div class="col-md-6 col-xs-12">
Phones:<br />
<textarea type="text" name="phones" class="textbox">#phones</textarea>
</div>
</div>
<div class="row" id="submit">
<div class="col-xs-12">
<input type="submit" name="submit" class="btn btn-lg btn-success" />
</div>
</div>
</form>
</div>
<div class="errors">
<textarea>#error_nb error(s) detected at line #error_line !</textarea>
</div>
Unfortunately, this is not documented correctly in the docs, but having columns without a XS value will have unpredictable results. Note that in your case, the CSS rule float:left was missing, since only col-xs-* apply it.
It's working perfectly when am using row-fluid in you grid, its suggested to use row-fluid for better responsive cases.
Ref link.
and for the responsive issues, I have added this code for you -
#media only screen and (max-width: 767px) {
#inputs {
height: auto;
width: auto;
margin: 0;
padding: 0;
}
}
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Custom changes */
body {
background-color: grey;
}
.form {
background-color: green;
height: 66vh;
}
.form form {
height: 100%;
}
#inputs {
height: 90%;
width: 100%;
margin: 0;
padding: 0;
}
.col-md-6 {
padding-top: 2%;
padding-bottom: 3%;
text-align: center;
background-color: orange;
height: 100%;
}
.textbox {
width: 66%;
height: 90%;
background-color: red;
resize: none;
}
#submit {
text-align: center;
background-color: pink;
height: 48px;
padding: 0;
margin: 0;
}
.errors {
background-color: aqua;
}
#media only screen and (max-width: 767px) {
#inputs {
height: auto;
width: auto;
margin: 0;
padding: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form">
<form method="post">
<div class="row-fluid" id="inputs">
<div class="col-md-6">
Message:<br />
<textarea type="text" name="message" class="textbox">#message</textarea>
</div>
<div class="col-md-6">
Phones:<br />
<textarea type="text" name="phones" class="textbox">#phones</textarea>
</div>
</div>
<div class="row-fluid" id="submit">
<div class="col-md-12">
<input type="submit" name="submit" class="btn btn-lg btn-success" />
</div>
</div>
</form>
</div>
Related
I used margin on other elements successfully, yet when I try to do this with #searchbarcontainer it moves the entire page down. I'm trying to center it slightly below the middle of the page, but I can't work my way around this problem. I am trying to make somewhat of a Google clone and I'm new to HTML and CSS. Here is my code:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
#nav {
display: flex;
justify-content: flex-end;
margin-top: -40px;
margin-right: -5px;
padding: 20px;
}
.child {
padding: 15px;
}
.link {
color: rgb(95, 91, 91);
text-decoration: none;
}
.link:hover {
color: black;
}
#logo {
margin-top: 110px;
text-align: center;
}
#searchbarcontainer {
text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="form">
<form action="https://google.com/search">
<div id="searchbarcontainer">
<input id="searchbar" type="text" name="q">
</div>
<div id="submitcontainer">
<input id="submit" type="submit" value="Google Search">
</div>
</form>
</div>
<div id="nav">
<div class="child">
<button type="button" class="btn btn-light"><a class="link" href="images.html">Image Search</a></button>
</div>
<div class="child">
<button type="button" class="btn btn-light"><a class="link" href="advanced.html">Advanced Search</a></button>
</div>
</div>
<div id="logo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
Your layout doesnt allow for the search bar container to be moved without affecting the entire page. You say that you want it to be lower, but as you can see in the picture, it has no where to go except to move everything down.
If you wanted to move it down you have to change it so that the search input and the "google search" button will be in the same container and center it that way
when writing html, you have to write what you want to see in vertical order in your website
you've written from bottom to top instead
you've also made a lot of unnecessary elements
here's a somewhat streamlined version
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "sans-serif";
}
input {
outline: 0;
border: 0.3vh solid #bbb;
font-size: 1.6vh;
}
nav {
width: 100%;
height: 6.7vh;
border-bottom: 0.2vh solid #bbb;
display: flex;
justify-content: flex-end;
padding: 0 3vh;
}
nav>div {
height: 6.7vh;
background: #000;
display: flex;
align-items: center;
justify-content: space-around;
}
nav>div>a {
color: black;
text-decoration: none;
font-size: 1.6vh;
background: yellow;
}
nav>div>a:first-child {
margin-right: 1vh;
}
section {
height: 93.3vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section>img {
width: 45vw;
height: 15vh;
object-fit: contain;
}
section>form {
width: 45vw;
display: flex;
justify-content: space-around;
margin-top: 3vh;
}
section>form>input[type="text"] {
padding: 1vh;
border-radius: 1vh;
width: 65%;
}
section>form>input[type="submit"] {
width: 25%;
border-radius: 1vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<nav>
<div>Image SearchAdvanced Search</div>
</nav>
<section>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<form action="https://google.com/search">
<input id="searchbar" type="text" name="q" />
<input id="submit" type="submit" value="Search" />
</form>
</section>
</main>
</body>
</html>
I am trying to create an html form that will change to column layout when the screen width reaches x amount of pixels (with flexbox and media query). The problem I am incurring is that the submit button will not position itself under the different fields such as name, town you were born, email in full screen but will in the phone sized screen.
I have tried to put the form-button div both inside and out of the contact div. Only when I leave it in the contact div I cannot get the button to display below the message box in mobile format. Then when I take it out the contact div it works for mobile but not full screen.
The first two pictures I include below are what I would like both full screen and mobile to look like (please exclude the responsiveness of the other elements it's a work in progress). The final two pictures are my current state.
Lastly I include both the HTML and CSS code for the form. I have also included the main CSS stylesheet incase there is something in there that may be affecting my form. The code for the button/button div may look bare, I have tried many different flexbox properties although none worked so I have removed them to avoid unnecessary clutter.
Full Screen Correct Small Screen Correct Full Screen Incorrect Small Screen Incorrect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="formStyle.css" />
<title>Contact Us</title>
</head>
<body>
<header>
<img src="Images/logo.png" alt="logo" id="logo" />
<!--Logo-->
<nav>
<ul class="nav_links">
<li>Home</li>
<li>Merchandise</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<h1>CONTACT US</h1>
<br /><br />
<h4>
Have a quick question? Use contact form below and we'll be back to you as
soon as possible!
</h4>
<br />
<form action="#" class="contactForm">
<div class="message">
<label for="msg">Message</label>
<textarea id="msg"></textarea>
</div>
<div class="contact">
<label for="name">Name</label>
<input type="text" id="name" />
<label for="townborn">Town you were born in</label>
<input type="text" id="townborn" />
<label for="email">Email Address</label>
<input type="email" id="email" />
</div>
<div class="form-button">
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
.contactForm {
display: flex;
background-color: beige;
border-radius: 3px;
padding: 1.8em;
}
.message {
display: flex;
flex-direction: column;
order: 3;
}
.message > textarea {
flex: 1;
min-width: 18em;
}
.contact {
flex: 1;
order: 1;
margin-right: 2em;
}
.contact input {
width: 100%;
}
.contact input {
padding: 1em;
margin-bottom: 1em;
}
#media only screen and (max-device-width: 480px) {
.contactForm {
flex-direction: column;
}
.message {
margin-right: 2em;
order: 2;
}
.form-button {
order: 3;
}
}
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: linear-gradient(to top, #ddf2eb, #d3cdd7);
background-repeat: no-repeat;
height: 100vh;
}
header {
display: flex;
padding: 10px 5%;
background-color: #ddf2eb;
align-items: center;
align-self: stretch;
}
#logo {
height: 70px;
width: 70px;
cursor: pointer;
}
.nav_links {
list-style: none;
margin-left: 10%;
white-space: nowrap;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0;
font-family: "Montserrat", "sans-serif";
font-weight: 500;
font-size: 15px;
color: #606d5d;
text-decoration: none;
}
.nav_links li a:hover {
color: honeydew;
}
.flex-container {
display: flex;
}
I'm not sure that possible with flex, because flex is either row or column, and you want both at the same time.
you could try with grid instead!
Example with grid
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.contactForm label {
display: block;
}
.contactForm input,
.contactForm textarea {
height: 100%;
width: 100%;
}
.contactForm > div {
width: 100%;
}
.contact-name {
grid-area: name;
}
.contact-townborn {
grid-area: townborn;
}
.contact-email {
grid-area: email;
}
.contact-msg {
grid-area: msg;
padding-bottom: 20px;
}
.contact-form-button {
grid-area: button;
margin-top: -20px;
padding-top: 10px;
}
.contactForm {
background-color: #2196F3;
display: grid;
grid-gap: 20px;
grid-template-areas: 'name' 'townborn' 'email' 'msg' 'button';
padding: 20px;
max-width: 800px;
}
#media (min-width: 480px) {
.contactForm {
grid-template-areas: 'name msg' 'townborn msg' 'email msg' 'button msg';
}
.contact-form-button {
margin-top: 0;
}
}
<form action="#" class="contactForm">
<div class="contact-name">
<label for="name">Name</label>
<input type="text" id="name" />
</div>
<div class="contact-townborn">
<label for="townborn">Town you were born in</label>
<input type="text" id="townborn" />
</div>
<div class="contact-email">
<label for="email">Email Address</label>
<input type="email" id="email" />
</div>
<div class="contact-msg">
<label for="msg">Message</label>
<textarea id="msg"></textarea>
</div>
<div class="contact-form-button">
<button type="submit">Submit</button>
</div>
</form>
Source: W3schools CSS Grid Layout
Newbie here. I am trying to come up with a simple one-page site but my contact form first name label is not attaching with the correct section.
I am attaching the image where the underlined "First Name" is not with the input, even though I have added it under another section and container.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Sitemize Hoşgeldiniz</title>
</head>
<body>
<nav class="nav-bar">
<ul class="nav-list">
<li class="nav-items">Home</li>
<li class="nav-items">Contact</li>
<li class="nav-items">About</li>
</ul>
</nav>
<section id="information">
<div class="container">
<div class="information-showcase">
<h1 id="header"><span id="header-span">Sitemize</span> Hoşgeldiniz</h1>
</div>
</div>
</section>
<section id="short-info">
<div class="container">
<div class="container-image-1">
<div class="row">
<div class="column">
<h2>Anında Sipariş</h2>
<i class="fas fa-shopping-cart fa-5x"></i>
</div>
<div class="column">
<h2>Hızlı Teslimat</h2>
<i class="fas fa-truck fa-5x"></i>
</div>
<div class="column">
<h2>Mmnuniyet Garantisi</h2>
<i class="fas fa-smile-beam fa-5x"></i>
</div>
</div>
</div>
</div>
</section>
<section class="contact-us">
<div class="container">
<form action="#">
<label for="fname">First Name</label>
<input type="text" id="fname" placeholder="Enter your first name">
<label for="fname">Last Name</label>
<input type="text" id="lname" placeholder="Enter your last name">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</section>
</body>
<script src="app.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</html>
/* Body */
body {
background-color: burlywood;
}
/* Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0A800C
}
.nav-items {
display: inline;
float: left;
}
.nav-items a {
text-decoration: none;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
}
.nav-items a:hover {
background-color: #111;
}
/* Image section */
.column {
float: left;
width: 25%;
padding: 10px;
margin-top: 25px;
margin-left: 100px;
background-color: aqua;
}
#information {
background:url("resim2.jpg");
background-repeat: no-repeat;
background-position: center;
height: 400px;
}
#header {
text-align: center;
padding-top: 150px;
color: aqua;
font-size: 60px;
}
.lead {
text-align: center;
}
/* Create three equal columns that floats next to each other */
.column {
float: center;
width: 20%;
padding: 10px;
height: 200px;
text-align: center;
background-color: burlywood;
}
.row {
margin-left:150px;
}
Thank you
Onur
the problem is you are using the
float
in your css that is makeing the problem
if you need your elements to be horizantly
add this to .row
.row {
margin-left: 150px;
display:flex;
}
remove this property from your css
.column
and wrap the items with a div that has this property
display:flex;
you can learn more about it here
https://www.youtube.com/watch?v=fYq5PXgSsbE
good luck!
look how i did it
https://stackblitz.com/edit/js-qjmbgj?file=index.html
https://js-qjmbgj.stackblitz.io
if you cant use display flex
use position :absolute ;
for more understanding
go here
https://www.khanacademy.org/computing/computer-programming/html-css/css-layout-properties/pt/css-position
I am trying to find a way to enter a button inside input field as follow:-
can anyone advice ?
There is no native bootstrap solutions. You can do this with custom code.
.custom-search {
position: relative;
width: 300px;
}
.custom-search-input {
width: 100%;
border: 1px solid #ccc;
border-radius: 100px;
padding: 10px 100px 10px 20px;
line-height: 1;
box-sizing: border-box;
outline: none;
}
.custom-search-botton {
position: absolute;
right: 3px;
top: 3px;
bottom: 3px;
border: 0;
background: #d1095e;
color: #fff;
outline: none;
margin: 0;
padding: 0 10px;
border-radius: 100px;
z-index: 2;
}
<div class="custom-search">
<input type="text" class="custom-search-input" placeholder="Enter your email">
<button class="custom-search-botton" type="submit">Subscribe</button>
</div>
Bootstrap mixed solution, according to bootstrap styles.
.custom-search {
position: relative;
}
.custom-search-input {
width: 100%;
padding-right: 100px !important;
box-sizing: border-box;
}
.custom-search-botton {
position: absolute;
right: 3px;
top: 3px;
bottom: 3px;
line-height: 1 !important;
z-index: 4;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div class="input-group custom-search">
<input type="text" class="form-control custom-search-input" placeholder="Enter your email">
<button class="btn btn-primary custom-search-botton" type="submit">Subscribe</button>
</div>
You cant put a button inside a input field with bootstrap only but you can use custom css to move the button inside the input field. I created a small example for you (I used bootstrap 4):
input[type="text"] {
width: 200px;
height: 50px;
padding-right: 50px;
}
.example {
margin: 5px -90px 5px;
height: 40px;
width: 80px;
z-index: 100;
}
.test-div {
width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="test-div">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<button class="btn btn-outline-secondary example" type="button">Button</button>
</div>
</div>
I changed your source and use font awesome. I think it became more nice, isn't it?
.custom-search {
position: relative;
}
.custom-search-input {
width: 100%;
padding-right: 100px !important;
box-sizing: border-box;
}
.custom-search-botton {
position: absolute;
right: 35px;
top: 1px;
bottom: 3px;
line-height: 1 !important;
z-index: 4;
border: none;
border-radius: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9"
crossorigin="anonymous">
<div class="input-group custom-search" >
<input type="text" (keyup.enter)="onSearch()" class="form-control custom-search-input" placeholder="Search" aria-label="Search">
<i class="btn fas fa-search custom-search-botton" type="button"></i>
</div>
I saw in a previous post that the solution to prevent those annoying bullets to show up in our beautifull HTML was adding this: list-style-type: none; in our CSS.
It looks this way right now
Okay, but the problem is the following: I am using: display: list-item; and if I add that css code it changes to this
As you can see it gets all messed up.
Any possible way to prevent all that mess or removing bullets without that happening? And keeping the same structure, 5 columns in a row with the same size, and allowing some of those to be "double data" (left floated and right floated)
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="plantilla.css">
<script src="plantilla.js"></script>
<head>
<title>Plantilla</title>
</head>
<body>
<input type="text" id="input" class="input" value="" autofocus />
<div id="main" class="main">
<div id="header">Main</div>
<div id="global1" class="global">
Global1
<div id="small11" class="small">
<div class="izq">asdfasdf asdfasdfasdf</div>
<div class="der">1234</div>
</div>
<div id="small12" class="small">aaaa</div>
<div id="small13" class="small">ssss</div>
<div id="small14" class="small">ddd</div>
<div id="small15" class="small">ffff</div>
</div>
<div id="global2" class="global">
Global2
<div id="small21" class="small">abcdef</div>
<div id="small22" class="small">fedcba</div>
<div id="small23" class="small">facbde</div>
<div id="small24" class="small">decfab</div>
<div id="small25" class="small">bacfed</div>
</div>
<div id="global3" class="global">
Global3
<div id="small31" class="small">eeeeee</div>
<div id="small32" class="small">eabdc</div>
<div id="small33" class="small">bcdae</div>
<div id="small34" class="small">dcbea</div>
<div id="small35" class="small">eadcb</div>
</div>
<div id="global4" class="global">
Global4
<div id="small41" class="small">decab</div>
<div id="small42" class="small">baced</div>
<div id="small43" class="small">becad</div>
<div id="small44" class="small">daceb</div>
<div id="small45" class="small">cedab</div>
</div>
<div id="global5" class="global">
Global5
<div id="small51" class="small">cadeb</div>
<div id="small52" class="small">cadeb</div>
<div id="small53" class="small">cedab</div>
<div id="small54" class="small">eadcb</div>
<div id="small55" class="small">aebdc</div>
</div>
</div>
</body>
</html>
body{
text-align: center;
font-family: helvetica;
}
div {
margin: 1px;
}
#main {
}
#input {
width: 10%;
padding: 1px;
margin: auto;
}
.global{
width: 18%;
float: left;
border: 1px solid #a1a1a1;
border-radius: 5px;
}
.small{
border: 1px solid #AA0000;
border-radius: 0px;
margin: 2px;
display: list-item;
}
#header {
text-align:left;
clear: both;
font-size: 22px;
}
ul
{
list-style-type: none;
}
.izq { float: left; }
.der { float: right; }
This issue has nothing to do with the the bullets or display:list-item and the "messed up" layout is caused the the #small11 element collapsing as it only contains floated elements.
All that is required is a "clearfix" of which there are several.
body {
text-align: center;
font-family: helvetica;
}
div {
margin: 1px;
}
#main {} #input {
width: 10%;
padding: 1px;
margin: auto;
}
.global {
width: 50%;
/* for this demo */
float: left;
border: 1px solid #a1a1a1;
border-radius: 5px;
}
.small {
border: 1px solid #AA0000;
border-radius: 0px;
margin: 2px;
display: list-item;
list-style-type: none;
overflow: hidden;
/* cleafix */
}
#header {
text-align: left;
clear: both;
font-size: 22px;
}
.izq {
float: left;
}
.der {
float: right;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="main" class="main">
<div id="global1" class="global">
Global1
<div id="small11" class="small">
<div class="izq">asdfasdf asdfasdfasdf</div>
<div class="der">1234</div>
</div>
<div id="small12" class="small">aaaa</div>
<div id="small13" class="small">ssss</div>
<div id="small14" class="small">ddd</div>
<div id="small15" class="small">ffff</div>
</div>
</div>