In Chrome everything works good, but is aligned to the right in Safari, I don't know why. It's a button with text. I tried text-align center;, justify-content: center; or text-align: -webkit-center; but nothing happened.
.box-product .add-items .bttn-add {
width: 115px;
height: 30px;
display: block;
background-color: var(--naranjoAgro);
color: #fff;
text-transform: uppercase;
font-size: 1em;
font-weight: 700;
line-height: 30px;
border-radius: 15px;
margin: 0 0 0 1em;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
justify-content:center;
}
<div class="buttonbox">
<c:choose>
<c:when test="${(autentificar == 'true')&&(statusUsuario == 2)}">
<a class="bttn-add btncarr spinner-button" onclick="mensajeBloqueoCompras();" type="submit">agregar</a>
</c:when>
<c:when test="${autentificar == 'true'}">
<a class="bttn-add btncarr spinner-button" onclick="agregarProducto(this, '${oferta.codigo_material}', 'cantidadProdu${oferta.codigo_material}', '${contexto}', '${cantidadMinPed}', '${cantidadMaxUni}', 'HOME - PRODUCTOS EN OFERTA')" data-button-action="add-to-cart"
type="submit">agregar</a>
</c:when>
</c:choose>
</div>
For justify-content:center to work it has to be in a display:flex or display:grid block.
You can change your display: block to display:flex.
It also seems to me that your css classes do not correspond to those in your html.
Related
I am trying to use String.replaceAll(regex, String) to replace some chars from a String.
My string is some html and I've been trying to replace 'width: xxxxx.xxxpx;' width 'width: auto;'.
I came up with 2 reg expressions which according to an online reg tester works fine as:
width: [0-9]{3,}px; -- match at least 3 digits followed by px;
width: [0-9]{3,}.[0-9]{1,}px; -- match at least 3 digits followed by any char (in my case a .) followed by at least 1 digit and finally px;
This has been used in this way in my code:
text = text.replaceAll("width: [0-9]{3,}px;", "width: auto;");
text = text.replaceAll("width: [0-9]{3,}.[0-9]{1,}px;", "width: auto;");
as an example, I used this text:
<p style="margin-left: 10px;"><br></p><p style="margin-left: 10px;">text <span style="text-decoration-line: underline;">not</span> not text.</p><div class="ui-resizable-handle ui-resizable-n" style="width: 1404.8px; z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="height: 100.8px; z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="height: 100.8px; z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="width: 1404.8px; z-index: 90;"></div><table class="ui-resizable" style="width: 1405.6px; border: 1px solid black; margin-left: auto; margin-right: auto;"><tbody><tr><td class="ui-resizable" style="padding: 10px; border: 1px solid black;">in my opinion both this text is wrong;<br><br><br><div class="ui-resizable-handle ui-resizable-e" style="height: 99.2px; z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="width: 1404px; z-index: 90;"></div></td></tr></tbody></table><p style="margin-left: 10px;">other text: </p><table class="ui-resizable" style="width: 1422.4px; border: 1px solid black; margin-left: auto; margin-right: auto;"><tbody><tr><td class="ui-resizable" style="padding: 10px; border: 1px solid black;"><p><br></p><p><br></p></td></tr></tbody></table>
But this is not working. What am I doing wrong, please?
Are you sure about your code, wouldn't it be something like?
text = text.replaceAll("width: [0-9]{3,}px;", "width:auto");
text = text.replaceAll("width: [0-9]{3,}.[0-9]{1,}px;", "width:auto");
Also I would change the second Regex by adding a backslash before the dot
"width: [0-9]{3,}\.[0-9]{1,}px;"
And what do you get as result string with your current code?
So, I have this:
<td th:if="${#fields.hasErrors('teacher.name')}" th:errors="*{teacher.name}">Name Error</td>
It works, it prints out the desired message on the screen, but how to color the messages in my style.css file? Which class to use? I've tried using th:errors, th:if, errors...
Also tried to name a class, eg.: <td class="validation-error" th:if="${#fields.hasErrors('teacher.name')}" th:errors="*{teacher.name}">Name Error</td> and then puting the validation-error in the style.css file, but nothing worked... I know it is a dumb question, but I lost my mind with it.
My style.css file looks like this:
input[type=text], textarea, select {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
border-radius: 4px;
width: 400px;
}
input[type=text]:focus, textarea:focus, select:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 1px solid rgba(81, 203, 238, 1);
}
input[type=submit] {
background-color: dodgerblue;
border: none;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
td[class=validation-error] {
color: red;
}
Did you remember to precede the classname with a fullstop?
ie:
.validation-error{..}
instead of
validation-error{..}
In CSS classes need to be preceded by a full stop (.) and IDs by a hashtag (#), only native elements can be selected with their name alone.
either give you td a class something similar to
<td class="error-list" th:if="${#fields.hasErrors('teacher.name')}" th:errors="*{teacher.name}">Name Error</td>
and add that class to your css file or style the td in the css file
td {
color: red;
}
Before:
After
The first image is of the login page, but when I click login button the navigation bar becomes like the second picture, spaces appear between the blocks. This happens when a sevlet is called and has this code:
out.print("<p style='position:absolute;top:200px;left:300px;color:#CC0066;'>Sorry username or password error! </p>");
RequestDispatcher rd=request.getRequestDispatcher("login.jsp");
rd.include(request, response);
The CSS code is:
#menuli{
display: inline;
float: left;
color: #CCCCCC;
}
#menuA,#menuAL {
display: block;
width: 180px;
padding: 10px;
color: #FFFFFF;
font-size: x-large;
font-variant: normal;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
margin: 10;
text-decoration: none;
opacity: 0.9;
border-spacing:0;
border-collapse:collapse;
text-align: center;
background-color: #000033;
/*font-weight: bold;
/*border-radius: 20px;*/
}
#menuA:hover, #menuAL:hover
{
/*color: #699;*/
background-color: #003;
/*text-shadow: 10px 0px 10px; */
font-weight: bold;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(65,62,110,1.00)),color-stop( 40.94% , rgba(7,5,53,1.00)),color-stop( 49.74% , rgba(9,8,56,1.00)),color-stop( 100% , rgba(12,11,60,1.00)),color-stop( 100% , rgba(54,56,116,1.00)));
background-image: -webkit-linear-gradient(270deg,rgba(65,62,110,1.00) 0%,rgba(7,5,53,1.00) 40.94%,rgba(9,8,56,1.00) 49.74%,rgba(12,11,60,1.00) 100%,rgba(54,56,116,1.00) 100%);
background-image: linear-gradient(180deg,rgba(65,62,110,1.00) 0%,rgba(7,5,53,1.00) 40.94%,rgba(9,8,56,1.00) 49.74%,rgba(12,11,60,1.00) 100%,rgba(54,56,116,1.00) 100%);
}
#menu
{
position: absolute;
top: 126px;
left: 139px;
}
The JSP code is:
<div name="header" id="header">
<img id="logo" style="position:absolute; left:145px; top:10px; "src="images/logo.jpg">
<div id="menu" >
<ul>
<li id="menuli"><a id="menuA" href="index.jsp#header">Home</a></li>
<li id="menuli"><a id="menuA" href="index.jsp#services">Services</a></li>
<li id="menuli"><a class="prod" id="menuA" href="Display?course=6">Products</a>
</li>
<li id="menuli"><a id="menuA" href="index.jsp#contact">Contact</a></li>
<li id="menuli"><a id="menuA" href="index.jsp#about">About</a></li>
</ul>
</div>
</div>
It's happening with all the pages after any servlet includes it.
Please see the links for images.
Printing the html content inside servlet is considered as bad practice . you can rather set the attribute in the request . so instead of this ,
out.print("<p style='position:absolute;top:200px;left:300px;color:#CC0066;'>Sorry username or password error! </p>");
RequestDispatcher rd=request.getRequestDispatcher("login.jsp");
rd.include(request, response);
use,
request.setAttribute("message","Sorry username or password error!");
RequestDispatcher rd=request.getRequestDispatcher("login.jsp");
rd.include(request, response);
And try to print the message in the jsp page,
simply using the scriptlet as ,
<p style='position:absolute;top:200px;left:300px;color:#CC0066;'><%=message></p>
or using EL
<p style='position:absolute;top:200px;left:300px;color:#CC0066;'>${message}</p>
using scriptlets are also considered to be bad practices since a decade . see this How to avoid java codes inside jsp
Hope this helps !!
Got it fixed. I had margin:10px in the CSS part of the navigation bar. Removed it and the problems are all gone.
:)
I'm developing a website for the first time. I have used two div tags. One is outer container whose width and height are set to 100%. Other one is inside container. I want to set this to the center vertically. similar to this website: http://www.bigcinemas.com/IN/home.aspx.
But its not working. I tired something like this:
index.jsp
<div class="container">
<div class="banner">
<a class="logo" href="index.jsp">
<img src="images/logo.png" alt="Rainbow Entertainment" width="250px" height="50px"/></a>
<div id="login">
<table style="background-color: purple">
<tr><td>Username : <input type="text"></td>
<td>Password : <input type="password"></td>
<td>Sign in<input type="submit"></td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
menu.css
.container{
width: 100%;
height: 100%;
}
#banner{
width: 60%;
padding-left: 30%;
padding-right: 30%;
position: absolute;
}
.logo{
margin-top: 5px;
float: left;
width: 20%;
position: relative;
}
#login{
width: 30%;
float: right;
padding-left: 10%;
}
#menu{
height: 20%;
width: 70%;
}
.menu_items{
width: 80%;
color: white;
}
Also I want to the difference between id and class.
I was looking for a similar solution earlier today - check the answer on this question. How to vertically center a div for all browsers? . It sounds like the code provided there will suit your needs.
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
CSS
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: /*whatever width you want*/;
}
I am using velocity 1.7 and within a foreach loop I want to print the count. In the template I have the following string in a #foreach/#end section:
Count: $foreach.count
and was expecting to see in the rendered result something like
Count: 1
...
Count: 2
...
but all I see is:
Count: $foreach.count
...
Count: $foreach.count
...
Any ideas what am I doing wrong?
Neither $foreach.count nor $counter worked for me.
This answer suggests using $velocityCount, and it worked for me.
Your code is partial, we don't see the foreach directive.
Else, I know that the foreach loop has a built-in variable called $counter, though in the guide they do refer to $foreach.count
I tried with $counter & $foreach.count but neither of these worked for me.
However, the $velocityCount tag worked and below is the example.
Input code:
#foreach($entry in $entries)
<p>In for Loop count is : $velocityCount</p>
#end
Output:
In for Loop count is : 1
In for Loop count is : 2
In for Loop count is : 3
I do not know why the foreach loop built-in variable called $count is not working as guide refer. But $velocityCount is worked for me.
There is property called directive.foreach.counter.name is velocityCount in velocity.properties file, so default $count variable may not be working.
k.honsalis answer is deprecated.
At this point you can only use $velocityCount, even though the documentation will refer to deprecated methods.
#foreach($item in $items)
counter 0: $foreach.index
counter 1: $foreach.count
counter 2: $counter
counter 3: $velocityCount
#end
Output:
$foreach.index
$foreach.count
$counter
1
The default variable is velocityCount, but you can change the variable name and initial value (only in prior 2.0 versions) if you want.
VelocityEngine engine = new VelocityEngine();
engine.setProperty("directive.foreach.counter.name", "velocityCount");
engine.setProperty("directive.foreach.counter.initial.value", 1);
http://people.apache.org/~henning/velocity/htmlsingle/VelocityUsersGuide.html
$velocityCount is works for me and i'm using velocity 1.5 $foreach.count & $counter
I am currently formatting my email_html.vm like so.
Note, I am using
#set( $count = 1 )
and
#set( $count = $count + 1 )
<html>
<body>
<table style="border: 1px solid black; border-collapse: collapse">
#set( $count = 1 )
#foreach( $film in $filmList )
<tr>
<td colspan=2 style="background: bisque; text-align: center"><b>Movie $count</b></td>
</tr>
<tr>
<th style="border: 1px solid black; border-collapse: collapse; padding: 5px; text-align: left">Title</th>
<td style="border: 1px solid black; border-collapse: collapse; padding: 5px; text-align: left"> $film.getTitle() </td>
</tr>
<tr>
<th style="border: 1px solid black; border-collapse: collapse; padding: 5px; text-align: left">Synopsis</th>
<td style="border: 1px solid black; border-collapse: collapse; padding: 5px; text-align: left"> $film.getSynopsis() </td>
</tr>
<tr>
<th style="border: 1px solid black; border-collapse: collapse; padding: 5px; text-align: left">Trailer</th>
<td style="border: 1px solid black; border-collapse: collapse; padding: 5px; text-align: left"> $film.getTrailerLink() </td>
</tr>
<tr>
<th style="border: 1px solid black; border-collapse: collapse; padding: 5px; text-align: left">More Information</th>
<td style="border: 1px solid black; border-collapse: collapse; padding: 5px; text-align: left">
https://www.landmarktheatres.com/$film.getMoreInfoLink() </td>
</tr>
#set( $count = $count + 1 )
#end
</table>
</body>
</html>
Output
$foreach.count (starts with 1) and $foreach.index (starts with 0) worked for me with Velocity 2.3.
More available loop variables are mentioned in the docs.