Style u Responsiveness für Listenauswahl in maske_combo_laden.jsp angepasst #7

superx/edit/kern/maske_combo_laden.jsp

@@ -42,35 +42,32 @@ callurl+=params;
     <title>Auswahl <%=fname  %></title>
 </head>
 <style>
-/*.cell {
+/* Abstand unter der Navbar für kleine Bildschirme */
-    position: sticky;
+@media screen and (max-width: 800px) { 
-    top: 0;
+  body {
-    z-index: 10;
+    margin-top: 5rem; /* Platz für die fixe Navbar, Höhe anpassen */
-} 
+  }
-
-.label {
-   font-size: 14px; }
-
-.input-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
 
-.input-container > .label {
+  .navbar.is-fixed-top {
-    margin-bottom: 0.25rem;
+    z-index: 1000; /* Stellt sicher, dass die Navbar immer im Vordergrund ist */
+  }
 
-@media (min-width: 768px) { 
   .input-container {
-	    flex-direction: row;
+    margin-top: 1rem; /* Zusätzlicher Abstand für Eingabefelder */
-	    align-items: center;
   }
+}
 
-	.input-container > .label {
+/* Abstand für größere Bildschirme */
-	    margin-bottom: 0;
+@media screen and (min-width: 801px) { 
-	    margin-right: 1rem; 
+  body {
+    margin-top: 2rem; /* Platz für die Navbar */
   }
-}*/
+}
+/**Breakpoints zur Info:**/ 
+/*Viewports bis 768px=tablet-Hochformat */
+/*@media screen and (min-width: 585px) and (max-width: 768px) { */	
+/*Kleine Viewports */
+/*@media screen and (max-width: 584px){*/  
 
 </style>
 <script type="text/javascript" language="javascript">
@@ -151,24 +148,24 @@ targetDiv.innerHTML=zs;
 <div  id="nd_navi_top" style="margin-bottom:3rem">
     <nav class="navbar is-fixed-top" role="navigation" ><!--aria-label="main navigation"-->
        <div class="navbar-brand">
-	   
 	    <div class="navbar-item">
-	    	<p><strong>Auswahl <%=fname %></strong></p>
+		<p class="title is-4">Auswahl <%=fname %></p> 
 	    </div>
-	    <div class="navbar-item">
 
+	    <div class="navbar-item">
 	    <div class='input-container'>
-	    <div class='field has-addons'><div class='control'>
+	         <div class='field has-addons'>
+		    <div class='control'>
 		       <input id='comboSuche' class='input is-small is-active' type='text' placeholder='Suche' onBlur='renderCombo(comboContent,this.value);return false;'/>
-</div><div class='control'><button class='button is-small is-rounded' onClick="renderCombo(comboContent,document.getElementById('comboSuche').value);return false;">
+		    </div>
-<span class='icon' aria-hidden='true' alt='Suche' title='Suche'><img src='../../images/search_blue.svg'/></span></button>
+		    <div class='control'>
-</div></div>
+		       <button class='button is-small is-rounded' onClick="renderCombo(comboContent,document.getElementById('comboSuche').value);return false;">
-</div>
+		       <span class='icon' aria-hidden='true' alt='Suche' title='Suche'><img src='../../images/search_blue.svg'/></span></button>
-	    
+		    </div>
-	    
+		 </div>
+	    </div>
 	    </div>
 	</div>
-	    
 	    
 	<div class="navbar-end"><span class="navbar-end">
 	    <div class="navbar-item is-hoverable">
@@ -211,17 +208,18 @@ targetDiv.innerHTML=zs;
 	   {
 	   %>
 	
-	<div class="input-container"> <!--style="padding-top:1em;"-->
+	<div class="input-container" style="margin-top:5em;">
 	     <div class="buttons">
-	      <input type="checkbox" name="metaCheckox" value="" style="margin-left:1.5rem" onclick="ndMaskDialogToggleAllCheckboxes(document.forms['selection'],this)" />&#160; alle markieren
+		  <input type="checkbox" name="metaCheckox" value="" style="margin-left:1.5rem;" onclick="ndMaskDialogToggleAllCheckboxes(document.forms['selection'],this)" />&#160; alle markieren
 	     </div>
 	</div>
+	
 <%
 }
 %>
-       <div class="input-container"> <!--style="padding-top:1em;"-->
-       <div id="comboDiv" class="comboDiv">keine Auswahl m&ouml;glich
 
+       <div class="input-container" style="margin-left:5em; margin-top:1em;">
+	    <div id="comboDiv" class="comboDiv">keine Auswahl m&ouml;glich
 	    </div>
        </div>
 	

superx/edit/kern/maske_sicht_laden.jsp

@@ -346,7 +346,6 @@ function ndSichtEintraegeSuchen(was) {
 	    </div>
 	 </div>
 	    
-	   
 	 <div class="navbar-end"><span class="navbar-end">
 	    <div class="navbar-item is-hoverable">
 	    <div class="buttons">
@@ -390,7 +389,6 @@ function ndSichtEintraegeSuchen(was) {
         <div class="input-container">
             <div class="field is-grouped is-grouped-multiline">
                 <div class="input-container">
-                    
                     <div id="sichtauswahlDiv">
 	    </div>
                 </div>